0

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();



}
Passerby
  • 9,715
  • 2
  • 33
  • 50
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167

1 Answers1

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242