Изменить путь SVG с помощью JavaScript

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:

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

Как уже говорили другие, вы можете получить доступ к данным в виде большой уродливой строки, используя стандартный метод DOM 2 Core, доступный для всех приложений XML, 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
  }
}

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"));