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

【问题标题】：SVG curved text along a circle clip path element not displaying沿圆形剪辑路径元素的SVG弯曲文本未显示
【发布时间】：2018-09-10 18:24:44
【问题描述】：

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

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

image with curved text

问题是，我有这张图片作为我的示例展示，因为这段代码在 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 方面经验很少。谢谢！

【问题讨论】：

标签： html css svg

【解决方案1】：

使用circle 的path insted 和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>

工作Codepen。

【讨论】：

我以前不知道 text-anchor 或 startOffset；很有用。谢谢！

【解决方案2】：

使用 svg 路径标签我们可以实现弯曲的文本。以下是对您的代码的修改。更正了文本标签的 x 和 y，并添加了 id 为“forText.

的路径

<svg height="300" width="350">
        <defs>
            <clipPath id="circleView">
                <circle id="curve" cx="150" cy="180" r="110" fill="transparent" />
            </clipPath>
        </defs> 
        <path id="forText" d="M32,110, C25,90, 180,-39,290,130" stroke="" fill="none"/>
            <text x="0" y="35" width="100">
                <textpath xlink:href="#forText">
                    My Homepage!
                </textpath>
            </text>
    <image width="300" height="410" xlink:href="meee.jpg" clip-path="url(#circleView)" />
</svg>

【讨论】：