svg transform matrix changes the stroke of an element. How to prevent this?

Question

I am doing a modification of svg-edit and i have written a function where the user selects an element and clicks a button to fire a function that asks for new dimensions and the element gets resized to the resized dimensions.

However there is a problem. When dimensions get resized the stroke width gets resized as well sometimes. The lines appear thinner. Is there any way to prevent this from happening?

this is my function:

function changeDimensions() 

{

    svgNode = svgCanvas.getSelectedElems()[0];

    var transformw=prompt("Enter your new width");
    var transformh=prompt("Enter your new height");
    var lastw = svgNode.getBoundingClientRect().width;
    var lasth = svgNode.getBoundingClientRect().height;

    newW=transformw/lastw;
    newH=transformh/lasth;
    alert(newH);
    alert(newW);


    svgCanvas.changeSelectedAttribute("transform", "matrix(" + newW + ", 0, 0, " + newH + ", 0, 0)");


    svgCanvas.recalculateAllSelectedDimensions();



}

Answer 1

Opera, Webkit and Firefox implement the SVG tiny vector-effects="non-scaling-stroke". It's not supported by IE though as far as I know though so if you need to support that you'll need to do something in javascript that adjusts the stroke manually.