Изменить svg-путь с помощью javascript

Существует путь 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?

Ответы

Ответ 1

Атрибуты могут быть установлены другим способом:

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

Это похоже на работу. Чтобы установить использование setAttribute.

Существует различие между атрибутами и свойствами. Атрибуты заданы как <elem attr='value'>, а свойства динамически задаются.

Например, элемент ввода не будет изменять свой атрибут при вводе в него чего-либо. Собственность, однако, изменится. Поэтому .value вернет правильный результат, тогда как .getAttribute('value') вернет начальное значение, заданное с помощью value="something".

В вашем случае это явный атрибут, а не свойство. Следовательно, .d не работает, а .getAttribute('d') делает.

http://jsfiddle.net/Kdp4v/

Ответ 2

Интерфейс SVGPathElement не имеет свойства d:

Как говорили другие, вы можете получить доступ к данным как к большой уродливой строке, используя стандартный метод DOM 2 Core, доступный для всех приложений XML, myPath.getAttribute('d').

Обратите внимание, что, хотя элементы 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
  }
}

Ответ 3

Попробуйте использовать getAttribute():

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