自 2022 年以來，我注意到以前運行良好的圓形 svg 存在問題。svg 只有 chrome 下的錯誤。
邊緣
火狐
歌劇/鉻
代碼 ：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" class="a-scrollIndicator__text">
<defs>
<path id="txt-path" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "></path>
</defs>
<text dy="0" font-size="15">
<textPath startOffset="0" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
SCROLL ? SCROLL ?
</textPath>
<textPath startOffset="50%" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
SCROLL ? SCROLL ?
</textPath>
</text>
</svg>
uj5u.com熱心網友回復：
有可能與把兩個問題<textPath>元素下單<text>在Chrome。通過<textPath>用一個<text>元素包圍每個來修復：
body {
background-color: black;
}<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 300 300" class="a-scrollIndicator__text">
<defs>
<path id="txt-path" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "></path>
</defs>
<text dy="0" font-size="15">
<textPath startOffset="0" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
SCROLL ? SCROLL ?
</textPath>
</text>
<text dy="0" font-size="15">
<textPath startOffset="50%" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
SCROLL ? SCROLL ?
</textPath>
</text>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/406761.html
標籤：
上一篇：使用Google表格的importXML時不要擴展結果
下一篇：串列中的自然排序字串（類）