css弧形⽂本-svg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #000;
}
/* svg{
width: 1000px;
height: 500px;
}*/
path {
fill: #4682B4;
}
text {
stroke: #fff;
stroke-width: 1;
font-size: 20px
}
svg text {
fill: #fff;/* ⽂字颜⾊ */
stroke: #f7f9fb6b;/* ⽂字边框颜⾊ */
stroke-width: 3;/* 边框宽度 */
text-anchor: middle;  /* ⽂本⽔平居中 */
/*dominant-baseline: middle; /* ⽂本垂直居中 */*/
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 500">
<defs>
<path id="MyPath"
d="M 10,150
C 150 170 220 240 1000 160
textstyleM 10,150
" />
</defs>
<!-- Show line of the viewport red-->
<!-- <use xlink:href="#MyPath" fill="none" stroke="red"  /> -->
<text  font-size="50"  >
<textPath xlink:href="#MyPath" startOffset="50%">
我是⼀段乖巧的实例⽂字centerdtextdpath元
</textPath>
</text>
<!-- Show outline of the viewport using 'rect' element -->
<!-- <rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" /> -->
</svg>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。