[英]SVG textPath not working in Safari
我試圖通過內聯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 textPath
中使用textPath
有任何限制嗎? 如何在兩個瀏覽器中正確呈現?
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.