Как применить преобразование к элементу пути SVG?

В моем html-файле загружается изображение svg и выбирается один из его элементов пути. Теперь я хочу повернуть его, но я не знаю, как это сделать. Код ниже не работает.Как применить преобразование к элементу пути SVG?

Кто-нибудь знает, как это сделать?

Благодаря

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Animate</title> 
     <style> 
     </style> 
     <script src="../js/plugin/jquery-2.1.4.min.js"></script> 
    </head> 
    <body> 

     <object data="images/steve/steve.svg" type="image/svg+xml" id="steve" width="100%" height="100%"></object> 

     <script> 
      var steve = document.getElementById("steve"); 

      steve.addEventListener("load", function() { 


       var svgDoc = steve.contentDocument; 
       var right_arm = svgDoc.getElementById("right_arm"); 



       //right_arm.rotate(90); // THIS DOES NOT WORK 


      },false); 

     </script> 
    </body> 

</html>

источник

2015-05-27 omega

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Вы должны установить атрибут transform непосредственно на SVG элемент. Метод rotate принимает требуемый аргумент, который представляет собой число градусов, которое вы хотите повернуть свой элемент.

right_arm.setAttribute('transform','rotate(45)');

Вы должны использовать метод .setAttribute(...) в JavaScript, потому что если вы должны были сделать это в HTML напрямую, вы буквально указать атрибуты непосредственно к самому элементу DOM:

<rect transform="rotate(45)" ... />

http://www.w3.org/TR/SVG/coords.html#TransformAttribute

Важно отметить, что в соответствии с спецификациями SVG разрешены только определенные атрибуты для элементов SVG. Взгляните на все атрибуты, применимые для элемента rect, например http://www.w3.org/TR/SVG/shapes.html#RectElement.

источник

2015-05-27 22:59:18

Элементы SVG не используют все функции CSS и JavaScript, которые выполняются обычными элементами HTML. Существуют некоторые свойства CSS, которые по-разному работают с элементами SVG, а некоторые - не работают.

Для этой задачи вы можете использовать атрибут transform на элементе right_arm и указать поворот. Синтаксис следующий:

rotate(<a> [<x> <y>])

, где <a> является угол, а <x> <y> вариант (х, у) координат. В вашем примере, если вы хотите, чтобы повернуть right_arm 90 градусов, вы могли бы сделать:

right_arm.setAttribute("transform", "rotate(90)");

transform не работает на всех элементах SVG, однако. Для получения дополнительной информации об этом, я бы предложил посмотреть на this page.

источник

2015-05-27 23:02:04 rgutierrez1014

Как применить преобразование к элементу пути SVG?

ответ

Смежные вопросы