Jump to content

Setting text inside an SVG produces some strange results on mobile.

Recommended Posts

Snippet of code HERE.

Test page in question HERE.

Hey there. I'm generating svg's in html and setting text within them. It works fairly well in preview but on real hardware it looks off. I've attached images to show what I mean.

What am I doing wrong here? Is there a different way to align the text within the svg rather than setting the x and y? I'd rather not separate the two (text and svg) as that would break the animation you'll see on the test page.

I understand there's a lot going on here and there's a mismatch of units, would that be it? Any assistance would save me from pulling my hair out.



Edited by slimPC
Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

No, I've not figured this one out. Might be platform specific. Issue seems to effect android more than apple.


EDIT: I have no idea what's causing the cross platform issue, but it's not squarespace related. I realized I was trying to do things the hard way and just added the letters to the svg's themselves, bypassing the issue altogether. This doesn't leave room for any form of localization, but I suppose that's not too important at this time.

Edited by slimPC
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.