Search code examples
htmlcssgoogle-chromesvgcompatibility

SVG Issue with Chrome

Since 2022 I have noticed a problem with a circular svg that worked fine before. The svg only bugs under chrome.

Edge

enter image description here

Firefox

enter image description here

Opera/Chrome

enter image description here

Code :

 <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>
Solution

  • There is probably a problem with putting two <textPath> elements under a single <text> in Chrome. Fixed by enveloping each <textPath> with a <text> element:

    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>