我正在尝试通过嵌入式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>
标记中,这显然不是我想要的。
在Safari SVG中使用textPath
是否有任何限制?如何才能在两个浏览器中正常渲染?
答案 0 :(得分:4)
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>