<!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
M 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>