1

I have the followint SVG Text that I want to animate. No issue on the animation, however the length of the dash-array differs from Chrome to Safari (not tested else where yet).

Note that the stroke-dasharray works at 87 on Chrome and at 837 on Safari. Why is it different?

#chrome{
   stroke-dasharray: 87;
   stroke-dashoffset: 87;
   transition: .5s;
}

#chrome:hover{
  stroke-dashoffset: 0;
}

#safari{
   stroke-dasharray: 837;
   stroke-dashoffset: 837;
   transition: .5s;
}

#safari:hover{
  stroke-dashoffset: 0;
}
Chrome: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="chrome" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>
<br>
Safari: Hover below.
<svg width="500" viewBox="0 0 102 17">
    
    <text id="safari" x="0" y="13" stroke-width=".2" stroke="red" fill="none">Web Design.</text>

</svg>
stemon
  • 599
  • 1
  • 5
  • 23
  • Are you using the same fonts? And is this WIndows vs. Mac or are you doing both on Mac? Default fonts are not standard across browsers or platforms - which could be making the difference. – Michael Mullany May 08 '21 at 22:00
  • If your text is not dynamic (changes at runtime), then convert it to paths. Problem solved. – Paul LeBeau May 09 '21 at 11:49
  • @MichaelMullany Both on Mac, and same font. – stemon May 10 '21 at 15:55
  • @PaulLeBeau Ideally I want ot have it as TEXT for SEO purposes. – stemon May 10 '21 at 15:55
  • @stemon Do you need search engines to actually index the text in `` elements? In most cases, providing appropriate content `in ` and/or `<desc>` elements would be sufficient.</desc> – Paul LeBeau May 11 '21 at 08:57

0 Answers0