17

How can I change the width/height of a selected path in SVG-edit.

  • So far i only have this:

    svgCanvas.changeSelectedAttribute("height", "499");

The above command has absolutely no effect on the path. Resizing the bounding box just resizes the bounding box, but not the path itself.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167

1 Answers1

15

For a path, you probably want to apply a transform rather than edit the path coordinates, which can get complicated. See http://www.w3.org/TR/SVG/coords.html#TransformAttribute

Plynx
  • 11,341
  • 3
  • 32
  • 33
  • 1
    since there are handles within an svg editor that allow you to to select a path and resize it, wouldnt it be possible to set the bounding box with an easier way? – nicholaswmin Feb 16 '13 at 05:23
  • @NicholasKyriakides Those handles are recomputing every point in the path for you. There is no bounding box locally assigned to an SVG element (apart from its transformation)—the bounding box is a purely computed value resulting from its position, and not defining it. – Plynx Feb 16 '13 at 05:25
  • 3
    @NicholasKyriakides No, it's not hard at all! Use whatever method you like to change the `transform` attribute of the SVG element. Let's say you have an SVG path with the ID of `mypath` and wanted to make it half the width. `$('#mypath').attr("transform", "scale(0.5,1)");` – Plynx Feb 16 '13 at 05:29
  • @NicholasKyriakides I don't know what's making the handles for you, but it either may not expect you to work with transforms or it might otherwise need to be told to "refresh" after you change something in an underlying way. – Plynx Feb 16 '13 at 05:35
  • @NicholasKyriakides No, but I just looked it over. It seems that they do have some built-in functions for transformation you might want to try. http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html#SelectorManager.transformBox – Plynx Feb 16 '13 at 05:42
  • *Probably* (remember I've never used this svg-edit) you are supposed to get an `element` object with http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html#SelectorManager.getElem like `var el = getElem("svg_1");` then you apply the transform, maybe it works like `el.transformBox(0,0,100,100);` – Plynx Feb 16 '13 at 05:58
  • Follow up - SVG-edit has a function called recalculateAllSelectedDimensions() which refreshes the handles. Thanks again Plynx! – nicholaswmin Apr 24 '13 at 04:48
  • in case anyone's wondering, I think [this](https://github.com/zenozeng/svgcanvas) is the most current version of svgcanvas.js (from the links above). – ashleedawg Aug 24 '21 at 15:09