Question

有SVG路径：

<svg id="sss" viewBox = "0 0 500 300" version = "1.1">
 <defs>
   <path id="s3" d="M 10,90 Q 100,15 200,70 "/>
 </defs>

如何更改d值？

为什么alert(document.getElementById('s3').d);给我undefined？

Answer 1

SVGPathElement接口没有d属性：

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

请注意，虽然SVG元素位于SVG名称空间中，但SVG属性不是;您应不使用myPath.getAttributeNS('http://www.w3.org/2000/svg','d')。

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

所有这些属性都会为您提供SVGPathSegList，这是SVGPathSeg个对象的有序列表（不是数组），您可以使用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
  }
}

Answer 2

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

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

这似乎有效。设置使用setAttribute。

属性和属性之间存在差异。属性设置为<elem attr='value'>，属性是动态设置的。

例如，输入元素在输入内容时不会更改其属性。但是，该物业将会改变。因此.value会返回正确的结果，而.getAttribute('value')会返回value="something"设置的初始值。

在您的情况下，它是一个显式属性而不是属性。因此，.d不起作用.getAttribute('d')。

http://jsfiddle.net/Kdp4v/

Answer 3

尝试使用getAttribute()：

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

使用javascript更改svg路径

3 个答案: