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

Question

Измените путь 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?

689 3

javascript html svg

3 ответов:

Comments

Ничего не найдено.

pimvdb · Accepted Answer · 2011-07-25 12:26:02

Атрибуты можно задать другим способом:
alert(document.getElementById('s3').getAttribute('d'));
Это, кажется, работает. Для установки используйте setAttribute.
Существует разница между атрибутами и свойствами. Атрибуты задаются как <elem attr='value'>, а свойства-динамически.
Например, элемент ввода не изменит свой атрибут при вводе в него чего-либо. Однако это свойство изменится. Таким образом, .value вернет правильный результат, тогда как .getAttribute('value') вернет начальное значение, заданное с помощью value="something".

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

Http://jsfiddle.net/Kdp4v/

Phrogz · Accepted Answer · 2012-07-26 16:06:10

Интерфейс 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 является базовый интерфейс наследуется более конкретными объектами, из которых вы возвращаетесь как может выглядеть использование:
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
  }
}

James Wiseman · Accepted Answer · 2011-07-25 12:20:01

Попробуйте использовать getAttribute():
alert(document.getElementById('s3').getAttribute("d"));