Question

122

Obtaining an original SVG viewBox via javascript

rated 0 times [ 126] [ 4] / answers: 1 / hits: 25221 / 13 Years ago, thu, october 6, 2011, 12:00:00

Our system loads SVG files programmatically into HTML via AJAX. A typical SVG file begins with:

 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm'  width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink

But strangely in JavaScript there seems to be no way of getting this 'viewBox' back from the SVG DOM - either as a string, or as a set of values. Under Mozilla, for example, firebug reports that the svg node has 5 of the 6 attributes we specifiy - namely: xmlns, xml:space, height, width and xmlns:xlink. But ViewBox is conspicuously missing from this list.

Is there anyway to programmatically retrieve this value? - where is it in the SVG DOM? (We cannot introduce 3rd party libraries).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devlin

Add To Favorites

Follow

Total Points: 474

Total Questions: 113

Total Answers: 100

Location: Sweden

Member since Fri, Apr 16, 2021

3 Years ago

devlin questions

1 How to watch public directory in Vite project for hot-reload?

Tue, Oct 19, 21, 00:00, 3 Years ago

1 how detect an element move (changing position) in document?

Tue, Apr 27, 21, 00:00, 3 Years ago

1 Difference between router.pathname and router.route in nextjs

Sat, Dec 19, 20, 00:00, 4 Years ago

1 Postman: custom signing request with SHA256 and RSA

Sat, Oct 31, 20, 00:00, 4 Years ago

1 disable fullscreen mode on html video on mobile devices

Fri, Aug 28, 20, 00:00, 4 Years ago

View All

answered 13 Years ago ramseydeshaunc · Accepted Answer

You'll want to take a look at the SVGFitToViewBox interface, which specifies the viewBox property. The interface for svg elements, SVGSVGElement, extends that interface, so this property is available on the element objects:

const svgElement = document.getElementById("example-svg");

const {x, y, width, height} = svgElement.viewBox.baseVal;