使用JavaScript更改SVG路径

Change SVG path with JavaScript

本文关键字：路径 SVG 更改 JavaScript 使用      更新时间：2023-09-26

以下是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的值?

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

属性可以通过其他方式设置:

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

这似乎有效。设置使用setAttribute

属性和属性是有区别的。属性是像<elem attr='value'>一样设置的，属性是动态设置的。

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

在您的例子中，它是显式属性而不是属性。因此，.d不能工作，而.getAttribute('d')可以。

http://jsfiddle.net/Kdp4v/

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
  • SVGPathSegLinetoHorizontalAbs
  • SVGPathSegLinetoHorizontalRel
  • 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
  }
}

尝试使用getAttribute():

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

大家好。我不知道它是如何在2011年，但我们现在有setAttribute来解决这样的问题

document.getElementById('id').setAttribute("nameOfAttribute", "valueOfAttribute")


let foo = () => {document.getElementById('btn').setAttribute("d", "M42,2.98v43.54c0,0.54-0.71,0.98-1.59,0.98h-7.08c-0.88,0-1.59-0.44-1.59-0.98V2.98 c0-0.54,0.71-0.98,1.59-0.98h7.08C41.29,2,42,2.44,42,2.98z M18.62,2.98v43.54c0,0.54-0.71,0.98-1.59,0.98H9.96c-0.88,0-1.59-0.44-1.59-0.98V2.98C8.37,2.44,9.08,2,9.96,2 h7.08C17.91,2,18.62,2.44,18.62,2.98z")}
<style>
   svg{
   width: 25px; 
   height: 25px;
}
</style>
<svg viewBox="0 0 50 50"> 
   <path id="btn" d="M8.5,2.99v43.88c0,0.66,0.74,1.05,1.29,0.68l31.73-21.87c0.47-0.33,0.47-1.03,0-1.35L9.79,2.31 C9.25, 1.93, 8.5, 2.32, 8.5, 2.99z"/>
</svg>
<button onclick="foo()">change</button>

相关文章：