SVG textPath 在 Safari 中不起作用答案

【问题标题】：SVG textPath not working in SafariSVG textPath 在 Safari 中不起作用
【发布时间】：2018-12-26 13:06:37
【问题描述】：

我正在尝试通过内联 SVG 将弯曲的文本覆盖在图像上。它在 Chrome 中运行良好，但 iOS 和桌面上的 Safari 不呈现文本。

<svg viewBox="0 0 580 472" width="580" height="472" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <path id="curvedPath" d="M123.9,309.87s55.27,20.4,148.06,23.54c99.49,3.37,153.33-16.68,153.33-16.68"></path>
        <style type="text/css">
            #text {
                font-size: 24px;
                text-align: center;
                text-anchor: middle;
                fill: rgba(0,0,0,0.8);
            }
        </style>
    </defs>

    <image x="0" y="0" width="580" height="472" xlink:href="https://www.silvity.de/out/pictures/master/product/1/gravur-armband-swarovski-kristall-rosegold-schwarz-111106601.jpg"></image>

    <text id="text" class="Philosopher">
        <textPath href="#curvedPath" startOffset="50%" id="textcontent">Foobar StackOverflow</textPath>
    </text>
</svg>

此 sn-p 在 Chrome 中显示文本“Foobar StackOverflow”，但在 Safari 中不显示。

路径的曲线无关紧要，直线 (M10.100,L100.100) 也不起作用。我可以让文本显示的唯一方法是将其直接嵌入到text 标记中，例如<text id="...">Foobar StackOverflow</text>，这显然不是我想要的。

在 Safari SVG 中使用 textPath 是否有任何限制？我怎样才能让它在两个浏览器中都正确呈现？

【问题讨论】：

标签： html svg safari

【解决方案1】：

Safari 仅支持 xlink:href 而不是较新的裸 href。

<svg viewBox="0 0 580 472" width="580" height="472" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <path id="curvedPath" d="M123.9,309.87s55.27,20.4,148.06,23.54c99.49,3.37,153.33-16.68,153.33-16.68"></path>
        <style type="text/css">
            #text {
                font-size: 24px;
                text-align: center;
                text-anchor: middle;
                fill: rgba(0,0,0,0.8);
            }
        </style>
    </defs>

    <image x="0" y="0" width="580" height="472" xlink:href="https://www.silvity.de/out/pictures/master/product/1/gravur-armband-swarovski-kristall-rosegold-schwarz-111106601.jpg"></image>

    <text id="text" class="Philosopher">
        <textPath xlink:href="#curvedPath" startOffset="50%" id="textcontent">Foobar StackOverflow</textPath>
    </text>
</svg>

【讨论】：

我读到 Safari 还不支持 href，但我很确定这是在引用 image 标签（已经使用了 xlink:href），我只是没有注意到我在textPath 上使用href。非常感谢！