Question

以下是我的密码笔的链接：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中却很少。谢谢！

Answer 1

使用由path插入的circle和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。

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

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

2 个答案: