Keep text size the same when resizing SVG

[Conor]

Is it possible to keep text size the same when resizing SVG?

I've added resizable functionality to my charts using a viewbox. The problem is the text is getting horribly distorted.

I'm using the vector-effect attribute in CSS to keep my line sizes using non-scaling-stroke (i.e vector-effect: non-scaling-stroke;) but cant find an equivalant for text.

Does anyone know of any methods to prevent text from resizing?

[Shreeram Kushwaha]

Inside an SVG doc, on resizing, the text never get distorted. How is that happening with your SVG doc?

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

(Voice  +91-7849069144)
( Shreeram Kushwaha )
Software Engineer, SRI-B

Bengaluru, India

[Conor]

Perhaps distorted wasn't the best word to use. The text scales as expected. i.e If I resize my chart to half its origional size, the text will also half in size. This makes it unreadable in many places.

So it behaves as expected but I'm wondering if there is a way to stop the text from resizing

[Shreeram Kushwaha]

Since the text are coming in the SVG area or svg tag, hence the texts are becoming a part of svg in your case, so as far as I know its not be possible.

[Doug Estey]

I looked into this a while ago. As far as I know, the only solution is to keep track of the change of scale/zoom and then apply an inverse transform to the text element at the same time.

[Conor]

Hello Doug,

That is the only solution I found aswell. At this blog post : http://meloncholy.com/blog/making-responsive-svg-graphs/
The issue I had with this approach is that it doesn't seem to work with IE. Did you also have this problem?

Thanks

[nick]

That is what I have resorted to in the past as well. If I had to do that again, I would probably use this add-on:
https://github.com/trinary/d3-transform
which breaks up more of the craziness of the transform minilanguage... not sure if any extra overhead would get you if you have LOTS of transforms.

I haven't used the viewbox before, but it seems awesome... @conor: SVG doesn't work in most IE anyway, so what's the problem there?

Another approach would be to take a page from bootstrap and do this in css media queries: i.e. "projector", "desktop", "tablet" and "mobile" sub-stylesheets.
http://timkadlec.com/2013/04/media-queries-within-svg/
Of course, you probably can't do transform="zoom" AND media query stuff, as that would put you back in the crazy text zone.

The "right" way to do it, though, is probably for everything to be on scales that are recalculated based on the current screen dimension, which triggers a redraw of EVERYTHING on resize (suitably debounced)... but this can be MUCH harder to do after the fact than just throwing a transform on the parent element.

Cheers!