CODEWITHSUNDEEP
svg
Ian
Ian

Reputation: 13852

How to get an SVG viewBox that hasn't been set

This feels like it should be obvious, but I feel like I'm missing something.

If I want to scale/move an SVG via the viewBox, assuming it hasn't been set already (ie its no problem if the svg has been created with a viewBox attribute, as I can retrieve that and parse), how do I know what its values are.

So suppose I have an svg, 

<svg><rect x="10" y="10" width="100" height="100"/></svg>

If I do an inspect Element on the svg, no viewBox has been set. Also if I wanted to scale it, via currentScale, this seems to be read only, same with currentTranslate (in Chrome), is my understanding correct, as it seems to conflict with other things I've read on SO.

So I feel like I can assume x,y on the viewBox will be 0,0 if not set. But what about the width/height ? I guess I can do something like if viewBox not set, get svg width.baseVal.value, but feels a bit clunky.

So basically, is there a proper way to get the minx,miny,width,height of a viewBox, irrespective of whether the viewBox has been set via an attribute (if you can't what is the width/height based on that I can use instead)?

Upvotes: 1

Views: 1952

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

If there's no viewBox then the drawing will work differently. Try resizing a drawing that has a viewBox and compare what happens when you resize one that has.

So there are no values for viewBox that will make it work the same as not having a viewBox except for viewBox="none" (not all UAs support viewBox="none" as it is part of SVG 1.2 tiny and not part of SVG 1.1, Firefox does support it as did Opera 12).

Upvotes: 1

Related Questions