使用javascript更改svg路径

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

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

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

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

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

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

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

http://jsfiddle.net/Kdp4v/

Answer 2

该SVGPathElement接口没有d属性:

• http://objjob.phrogz.net/svg/object/101
• http://www.w3.org/TR/SVG11/paths.html#InterfaceSVGPathElement

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

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

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

• pathSegList
• normalizedPathSegList
• animatedPathSegList
• animatedNormalizedPathSegList

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

请注意,这SVGPathSeg是您从更具体的对象继承的基本接口getItem():

• SVGPathSegClosePath
• SVGPathSegMovetoAbs
• SVGPathSegMovetoRel
• SVGPathSegLinetoAbs
• SVGPathSegLinetoRel
• SVGPathSegCurvetoCubicAbs
• SVGPathSegCurvetoCubicRel
• SVGPathSegCurvetoQuadraticAbs
• SVGPathSegCurvetoQuadraticRel
• SVGPathSegArcAbs
• SVGPathSegArcRel
• SVGPathSegLinetoHorizo​​ntalAbs
• SVGPathSegLinetoHorizo​​ntalRel
• SVGPathSegLinetoVerticalAbs
• SVGPathSegLinetoVerticalRel
• SVGPathSegCurvetoCubicSmoothAbs
• SVGPathSegCurvetoCubicSmoothRel
• SVGPathSegCurvetoQuadraticSmoothAbs
• SVGPathSegCurvetoQuadraticSmoothRel

以下是使用情况:

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
  }
}