0

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

我希望能够使用自己的用户坐标系来跟踪形状中的点。我的想法是在形状中找到点的坐标，然后创建一个 SVGPoint，这样我就可以传递那个元素。我在示例中看到了创建 SVGPoint 的方法，但它似乎是在“SVG_root”的上下文中使用的（即 document.documentElement.createSVGPoint() 有效）。

当我使用（在 Firefox 中）

inSvgObj.createSVGPoint()

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

编辑（在考虑 Robert Longson 的回答之后）：鉴于 SVGPoint 仅在“SVG 根”中创建，并且我无法找到将其移动到另一个元素中的方法，我发现使用不同的 svg 元素更方便类型：SVGMatrix。如果它对某人有帮助（因为我花了一些时间试图处理这个问题），可以通过创建一个 SVGMatrix 来操作 SVG 点内的模拟值，该 SVGMatrix 可以作为模拟点（为了坐标的目的）。结束方法.createSVGMatrix()，getCTM()并且.multiply()（最后来自 SVGMatrix）被使用。为了说明这一点，我将包含一个 (js) 函数，它接受 4 个参数：要转换的用户坐标系 (ucs) 中的 x 坐标，y 坐标是那个 ucs，其 ucs 是我们想要转换的对象的对象和一个对象在我们要转换到的 ucs 中；并返回具有 thrre 属性的对象，即转换后的 ucs 中的 x 坐标、其 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。

任何评论，特别是忽略了具有相同或任何缺点的现有方法，都将受到欢迎。

4

1 回答 1

1

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

于 2013-06-26T15:01:49.157 回答