使用JavaScript更改SVG路径

以下是SVG路径：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sss" viewBox="0 0 500 300">
  <path id="s3" d="M 10,90 Q 100,15 200,70 Z"/>
</svg>

如何更改

d

值

---

为什么

会发出警报（document.getElementById（'s3'）.d）给我
未定义的
？
尝试使用
getAttribute（）
：

属性可以通过另一种方式设置：

alert(document.getElementById('s3').getAttribute('d'));

这似乎奏效了。要设置，请使用
setAttribute

属性和属性之间存在差异。属性的设置类似于
，属性是动态设置的

例如，输入元素在输入内容时不会更改其属性。但是，属性将发生变化。因此
.value
将返回正确的结果，而
.getAttribute（'value'）
将返回设置为
value=“something”
的初始值

在您的例子中，它是一个显式属性而不是属性。因此，
.d
不起作用，而
.getAttribute（'d'）
起作用

svgpatheElement
接口没有
d
属性：





正如其他人所说，通过使用所有XML应用程序可用的标准DOM 2核心方法，
myPath.getAttribute（'d'）
，您可以将数据作为一个丑陋的大字符串进行访问

请注意，虽然SVG元素位于SVG名称空间中，但SVG属性不在其中；您应该而不是
使用
myPath.getAttributeNS（'http://www.w3.org/2000/svg“，”d“

但是，如果需要路径数据的面向对象表示，则需要以下属性之一：







所有这些属性都为您提供了一个
SVGPathSegList
，这是一个有序的对象列表（不是数组），您可以使用
numberOfItems
和
getItem（）
枚举这些对象

请注意，
SVGPathSeg
是一个基本接口，由从
getItem（）
返回的更具体的对象继承：






















下面是用法的用法：

var segments = myPath.pathSegList;
for (var i=0,len=segments.numberOfItems;i<len;++i){
  var segment = segments.getItem(i);
  switch(segment.pathSegType){
    case SVGPathSeg.PATHSEG_LINETO_ABS:
      // segment is a SVGPathSegLinetoAbs object
      console.log( "Absolute Line To", segment.x, segment.y );
    break;
    case SVGPathSeg.PATHSEG_CLOSEPATH:
      // ...
    break;
    // see http://www.w3.org/TR/SVG11/paths.html#DOMInterfaces for constants
  }
}

var segments=myPath.pathSegList；
对于（var i=0，len=segments.numberOfItems；i，关于“…如果您想要路径数据的面向对象表示…”谢谢您，我的朋友！是的，这正是我想要的：）现在要征服…顺便说一句，我想要它的原因，是因为我即将开始一个用于SVG投影转换的Javascript解决方案。我更喜欢一个完整的SVG解决方案，但我想不出一个。我觉得你是一个值得检查的人。你能想出一个纯SVG的方法吗？（我不明白为什么SVG转换不需要更多的数字。表示两点的同质3向量和转换它们的3x3矩阵将是完美的。）我刚刚意识到，这使用了一个不推荐使用的接口，不再有效。请参阅，特别是“将有一个新的API和一个polyfill用于此，以及一个polyfill用于旧的API也请参阅官方的chromium bug”。显示如何变异路径比将其放入警报中更有用。为什么在结尾处使用双引号？
var segments = myPath.pathSegList;
for (var i=0,len=segments.numberOfItems;i<len;++i){
  var segment = segments.getItem(i);
  switch(segment.pathSegType){
    case SVGPathSeg.PATHSEG_LINETO_ABS:
      // segment is a SVGPathSegLinetoAbs object
      console.log( "Absolute Line To", segment.x, segment.y );
    break;
    case SVGPathSeg.PATHSEG_CLOSEPATH:
      // ...
    break;
    // see http://www.w3.org/TR/SVG11/paths.html#DOMInterfaces for constants
  }
}