使用 javascript 更改 svg 路径

Change svg path with javascript

提问by Victor Marchuk

There is SVG path:

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

How can I change the d value?

如何更改 d 值？

Why does this alert(document.getElementById('s3').d);give me undefined?

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

回答by pimvdb

Attributes can be set another way:

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

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

That seems to work. To set use setAttribute.

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

There is a difference between attributes and properties. Attributes are set like <elem attr='value'>and properties are dynamically set.

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

For example, an input element will not change its attribute when entering something in it. The property, however, will change. So .valuewould return the correct result, whereas .getAttribute('value')would return the initial value as set with value="something".

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

In your case, it's an explicit attribute and not a property. Hence, .ddoes not work whilst .getAttribute('d')does.

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

http://jsfiddle.net/Kdp4v/

http://jsfiddle.net/Kdp4v/

回答by Phrogz

The SVGPathElementinterface does not have a dproperty:

该SVGPathElement接口没有d属性：

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

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

As others have said, you can access the data as a big ugly string by using the standard DOM 2 Core method available to all XML applications, myPath.getAttribute('d').

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

Note that while SVG elements are in the SVG namespace, SVG attributes are not; you should notuse myPath.getAttributeNS('http://www.w3.org/2000/svg','d').

请注意，虽然 SVG 元素在 SVG 命名空间中，但 SVG 属性不在；你应该不使用myPath.getAttributeNS('http://www.w3.org/2000/svg','d')。

However, if you want an object-oriented representation of the path data, you want one of these attributes:

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

• pathSegList
• normalizedPathSegList
• animatedPathSegList
• animatedNormalizedPathSegList

• pathSegList
• normalizedPathSegList
• animatedPathSegList
• animatedNormalizedPathSegList

All of these attributes give you a SVGPathSegList, which is an ordered list (not an array) of SVGPathSegobjects that you can enumerate using numberOfItemsand getItem().

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

Note that SVGPathSegis a base interface inherited by the more specific objects you get back from getItem():

请注意，这SVGPathSeg是您从中获得的更具体的对象继承的基本接口getItem()：

• SVGPathSegClosePath
• SVGPathSegMovetoAbs
• SVGPathSegMovetoRel
• SVGPathSegLinetoAbs
• SVGPathSegLinetoRel
• SVGPathSegCurvetoCubicAbs
• SVGPathSegCurvetoCubicRel
• SVGPathSegCurvetoQuadraticAbs
• SVGPathSegCurvetoQuadraticRel
• SVGPathSegArcAbs
• SVGPathSegArcRel
• SVGPathSegLinetoHorizontalAbs
• SVGPathSegLinetoHorizontalRel
• SVGPathSegLinetoVerticalAbs
• SVGPathSegLinetoVerticalRel
• SVGPathSegCurvetoCubicSmoothAbs
• SVGPathSegCurvetoCubicSmoothRel
• SVGPathSegCurvetoQuadraticSmoothAbs
• SVGPathSegCurvetoQuadraticSmoothRel

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

Here's what the usage might look like:

用法如下：

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

回答by James Wiseman

Try using getAttribute():

尝试使用getAttribute()：

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