代码之家 › 专栏 › 技术社区 › padarom

SVG TEXTPATH在Safari中不工作

safari svg html

padarom · 技术社区 · 6 年前

我试图通过内联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>

此代码段在Chrome中显示文本“foobar stackoverflow”,但在Safari中不显示。

路径的曲线不重要,直线( M10.100,L100.100 )也不起作用。唯一能让文本显示的方法是直接嵌入到 text 标签,例如 <text id="...">Foobar StackOverflow</text> 这显然不是我想要的。

使用时有什么限制吗 textPath 在Safari SVG?如何在这两个浏览器中正确呈现?

1 回复 | 直到 6 年前

Robert Longson 6 年前

Safari只支持xlink:href,不支持更新的bare 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>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前