Chrome 的 SVG 问题

Question

自 2022 年以来，我注意到以前工作正常的圆形 svg 存在问题。 svg 仅在 chrome.

下存在错误

边缘

Firefox

Opera/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>

Answer 1

将两个 <textPath> 元素放在 Chrome 中的单个 <text> 下时，可能存在问题。通过用 <text> 元素包围每个 <textPath> 来修复：

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>

Chrome 的 SVG 问题

SVG Issue with Chrome

html

css

compatibility

svg

google-chrome