Question

我有一个小项目（学习SVG）运行（使用javascript）。

我希望能够使用自己的用户坐标系跟踪形状中的点。我的想法是找到形状内点的坐标，然后创建一个SVGPoint，以便我可以传递该元素。我已经看到该方法在示例中创建SVGPoint，但它似乎在'SVG_root'的上下文中使用（即document.documentElement.createSVGPoint（）起作用）。

当我使用（在Firefox中）

inSvgObj.createSVGPoint()

其中inSVGObj是一个元素，Web控制台说“TypeError：inSvgObj.createSVGPoint不是函数”。是否可以在随后使用表示该用户坐标系中坐标的值设置SVG点？

编辑（考虑到罗伯特·朗森的回答）：鉴于SVGPoint仅在“SVG根目录”中创建，并且我无法找到将其移动到另一个元素内的方法，我发现使用不同的svg元素类型更方便：SVGMatrix。如果它有助于某人（因为我花了一些时间来处理这个问题），可以通过创建一个可以作为模拟点的SVGMatrix来操纵SVG点内的模拟值（为了坐标的目的。）结束方法.createSVGMatrix()，getCTM()和.multiply()（最后来自SVGMatrix）。为了说明这一点，我将包含一个带有4个参数的（js）函数：用户的x坐标坐标系（ucs）进行变换，y坐标是ucs，ucs是我们想要变换的对象和我们想要变换到的ucs中的对象;并返回具有thrre poperties的对象x中的x坐标转换ucs，其y坐标和1（与SVG建议书保持一致）。

function coorUcsAToUcsB(ucsAx,ucsAy,svgObjUcsA,svgObjUcsB){
  var ctmUcsA=svgObjUcsA.getCTM();
  var ctmUcsB=svgObjUcsB.getCTM().inverse();
  var mtx=document.getElementsByTagName('svg')[0].createSVGMatrix();
  mtx.e=ucsAx;
  mtx.f=ucsAy;
  var simulSvgP=ctmUcsB.multiply(ctmUcsA.multiply(mtx)); //1
  return {"x":simulSvgP.e,"y":simulSvgP.f,"z":1};
}

// 1这一行创建一个svg矩阵，第1和第2列为0,3，坐标为ucsB，来自模拟svg矩阵，坐标为ucsA - 它将ucsA中的坐标视为视口的cs，并从那里到坐标UCSB。有关矩阵运算的说明，请参阅this。

任何评论，特别是忽略了现有方法，这些评论都有相同或任何缺点，将非常受欢迎。

Answer 1

您可以使用根元素创建创建SVG点，但是一旦完成，您可以设置所需的任何值。将这些值分配给对象时，对象将在其坐标系中解释它们。

在具有用户坐标的元素内创建SVGPoint

1 个答案: