沿圆形剪辑路径元素的SVG弯曲文本不显示

布莱恩·布朗斯坦

这是我的代码笔的链接：https ://codepen.io/Bryandbronstein/pen/QVaQpa

所以基本上我所拥有的是一个 svg 圆，它被设置为一个 clipPath 元素来将我的图像切割成一个圆。然后我想围绕圆圈弯曲我的文本，而不是它在我的圆形图像顶部的一条直线上，如下所示：

问题是，我有这张图片作为我的例子来展示，因为这段代码适用于 Firefox，但我无法测试其他浏览器。是什么赋予了？这是我的代码：

        <svg height="300" width="350">
        <defs>
            <clipPath id="circleView">
                <circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
            </clipPath>
        </defs> 

        <text x="390" y="-20" width="100">
            <textpath id="homepageText" xlink:href="#curve">
                My Homepage!
            </textpath>
        </text>

        <image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />

    </svg>

澄清一下，我在 HTML 和 CSS 方面有中等经验，但在 SVG 方面经验很少。谢谢！

有钱人

使用pathinstedcircle和text-anchor+startOffset使文本居中：

<svg x="0px" y="0px" width="350" height="300" viewBox="0 0 350 300">
  <defs>
    <path id="curve" d="M40,180c0-60.751,49.248-110,110-110c60.751,0,110,49.249,110,110"/>
  </defs>
  <text fill="black" class="curved-text">
    <textPath xlink:href="#curve" text-anchor="middle" startOffset="50%">My homepage!</textPath>
  </text>
</svg>

工作代码笔。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。