我想沿着 SVG 曲线放置元素。我发现我们可以用来textpath沿着pathSVG 定位文本,我们可以对列表元素做同样的事情吗?如果是的话如何实现该功能
<svg viewBox="0 0 425 300">
<path id="curve"
d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
<text x="25">
<textPath xlink:href="#curve">
This text is now curved
</textPath>
</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
}
path {
fill: transparent;
}
text {
fill: #FF9800;
}
Run Code Online (Sandbox Code Playgroud)
<svg viewBox="0 0 425 300">
<path id="curve"
d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
<text x="25">
<textPath xlink:href="#curve">
This text is now curved
</textPath>
</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
body …Run Code Online (Sandbox Code Playgroud)