小编Fra*_*546的帖子

在 SVG 曲线上放置任何类型的元素

我想沿着 SVG 曲线放置元素。我发现我们可以用来textpath沿着pathSVG 定位文本,我们可以对列表元素做同样的事情吗?如果是的话如何实现该功能

用于沿 SVG 定位文本的 Html

<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)

CSS 相同 - 只是让它看起来不错

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)

html javascript css svg

5
推荐指数
1
解决办法
689
查看次数

标签 统计

css ×1

html ×1

javascript ×1

svg ×1