jQuery, SVG: как анимировать значение атрибута (не свойство стиля)? - PullRequest
Новая
       23

jQuery, SVG: как анимировать значение атрибута (не свойство стиля)?

8 голосов
/ 17 августа 2010

Мне нужно анимировать атрибут элемента SVG, который не имеет аналога CSS - <circle cx="..." /> Как мне этого добиться?

Или я могу использовать альтернативу, например, если бы я мог анимировать <g/> с использованием CSS top или аналогичного.

Есть опыт?

Спасибо, Ондра

Обратите внимание, что это не дубликат Как я могу анимировать значение атрибута(не свойство style) с jQuery? , поскольку речь идет о HTML.

См. также jQuery под SVG

Обновление

В конце я выполнил ручную анимацию, как в SVG, перетаскиваемой с использованием JQuery и Jquery-svg .

Решение jQuery все еще приветствуется.

Во всяком случае, это привело меня к другой проблеме - несоответствие единиц.evt.clientX в пикселях, но circle.cx.baseVal.value в некоторых относительных единицах.Поэтому, когда я делаю 

    onmousedown="
      this.moving=true; 
      this.pt0 = {x: evt.clientX, y: evt.clientY}; 
      this.origPos = {x: this.cx.baseVal.value, y: this.cy.baseVal.value};
    "
 onmouseup="this.moving=false;"
 onmouseout="this.moving=false;"
 onmouseover="this.moving=false;"
 onmousemove="if( this.moving ){
   this.cx.baseVal.value = this.origPos.x + (evt.clientX - this.pt0.x);
 }

и получаю <embed> 3x больше, чем "собственный" размер SVG, тогда круг перемещается в 3 раза быстрее, чем указатель.

Обновление

Я даже пытался 

this.origPos = {
    x: this.cx.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX), 
    y: this.cy.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX)
};

...


this.cx.baseVal.newValueSpecifiedUnits(
   SVGLength.SVG_LENGTHTYPE_PX, this.origPos.x + (evt.clientX - this.pt0.x) );

Но convertToSpecifiedUnits() возвращает undefined, что, кажется,отсутствие реализации http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength.

Ответы [ 2 ]

2 голосов
/ 17 августа 2010

jQuery сам по себе может не соответствовать вашим требованиям для простого перетаскивания svg (в настоящее время), поэтому вам нужно либо заставить его делать то, что вы хотите, либо использовать другой js framework. Я бы порекомендовал взглянуть на Raphaël , например.

Значения из event.clientX / Y не в пользовательских единицах, их необходимо преобразовать. См. Например, http://www.codedread.com/code.php#dragsvg для примера перетаскивания объектов SVG.

1 голос
/ 09 мая 2012

Для всех, кто еще заинтересован, проект плагина jQuery http://keith -wood.name / svg.html очень полезен для анимации элементов SVG.

...