Chrome 的 SVG 问题答案

【问题标题】：SVG Issue with ChromeChrome 的 SVG 问题
【发布时间】：2022-01-08 12:29:37
【问题描述】：

自 2022 年以来，我注意到以前运行良好的圆形 svg 存在问题。 svg 只有 chrome 下的 bug。

边缘

火狐

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>

【问题讨论】：

向Chrome's bugtracker报告Chrome错误

标签： html css google-chrome svg compatibility

【解决方案1】：

可能在 Chrome 中将两个 <textPath> 元素放在一个 <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>

【讨论】：