Question

我正在对svg-edit进行修改。我正在使用一个函数根据用户输入的宽度和高度使路径元素变大或变小。用户选择一个元素并单击一个按钮以启动该功能，该功能采用最后已知的宽度和高度测量，然后从用户询问新的宽度和高度值。然后它创建一个除数，用于在元素上创建TRANSFORM MATRIX操作，使其与用户想要的一样大。

问题在于，在转换矩阵时，元素也会改变位置。

我想要在用户被要求提供宽度和高度时也要求画布上的x，y位置，然后将所选元素移动到该位置。

他们是一种重新定位svg元素的方法吗？

   function changeDimensions() 

    {
  svgNode = svgCanvas.getSelectedElems()[0];

var dims = Raphael.pathBBox(svgNode.getAttribute('d')); 
lasth = parseInt(dims.height); 
lastw= parseInt(dims.width);

var transformw=prompt("Enter your new width");
var transformh=prompt("Enter your new height");
newW=transformw/lastw;
 newH=transformh/lasth;

svgCanvas.changeSelectedAttribute（“transform”，“matrix（”+ newW +“，0,0，”+ newH +“，0,0）”）; svgCanvas.recalculateAllSelectedDimensions（）; }

Answer 1

不同的svg元素具有用于定位自身的不同属性。例如，rect有x和y属性，但是圆圈有cx和cy。路径没有单独的属性。

但是你可以从变换中得到你需要的东西！大多数svg元素都会接受transform属性，您可以在其中分配翻译。 E.g。

<path d="M10,10L20,100" transform="translate(30,40)"/>

实际上，您可以使用相同的转换属性缩放路径。

使用javascript定位SVG元素

1 个答案: