Search code examples
javascriptsvgjquery-svg

Error when assigning currentScale of SVG root element

I have a problem with SVG and JavaScript:

This code behaves as expected:

function initSvg(width) {
    SVGRoot = document.getElementsByTagName('svg')[0];
    console.log(SVGRoot.currentScale);    // Displays '1' which is OK

but when I try to reassign the currentScale parameter like so:

function initSvg(width) {
    SVGRoot = document.getElementsByTagName('svg')[0];
    SVGRoot.currentScale = parseFloat(width)/400;   
    console.log(SVGRoot.currentScale);    // Should display some floating point number

I get the error

Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) nsIDOMSVGSVGElement.currentScale]

and the alert is not executed. What is wrong with my assignment to SVGRoot.currentScale?

UPDATE:

The error disappears when I use 

SVGRoot.setAttribute('currentScale', parseFloat(width)/400);

or

SVGRoot.setAttributeNS(null, 'currentScale', parseFloat(width)/400);

but the actual value of currentScale does not change. It stays at 1 regardless what is passed into setAttribute.

Solution

  • The setAttribute(NS) way isn't correct, there's no 'currentScale' attribute in SVG.

    The 'currentScale' is a property in the SVGSVGElement interface, and you should be able to get and set it like you do as long as the number is reasonable (e.g not Inf or NaN). Note however that the SVG 1.1 spec only defines the behavior of currentScale on the outermost svg element.