Как поворачивать или масштабировать (преобразовывать) путь SVG относительно его центральной точки?

Question

Я пытаюсь повернуть и масштабировать фигуры в SVG вокруг их центральной точки. Я просмотрел несколько библиотек, в том числе JQuery, Greensock, D3, RaphaelJS, но я не смог найти ни одного, обеспечивающего простой способ достичь этого. Каждый анимирует фигуру из точки начала (что я понимаю по умолчанию). Я хочу, чтобы иметь возможность вращать форму вокруг ее центральной точки или масштабировать ее вверх или вниз от центральной точки.

Вот несколько примеров использования Greensock и D3, иллюстрирующих поведение по умолчанию: http://jsbin.com/AHEXiPa/1/edit?html,js,output

Каждый из этих примеров отказов в и из верхней левой, а не остается неподвижным и расширяющийся от центра треугольника из во всех направлениях.

Может ли одна из библиотек, упомянутых мной, выполнить это, или есть другая библиотека или метод, которые я должен рассмотреть?

В идеале, мне нужно иметь возможность применить анимацию/преобразование к существующему объекту в DOM. D3 хорош в этом, например, но, по-видимому, Рафаэлю требуется преобразование SVG в Рафаэль, прежде чем вводить его в DOM.

Answer 1

Действительно, это случай выбора библиотеки, которая соответствует вашим потребностям, а затем вы увидите способ. Как говорит BigBadaboom, если вы выполняете поиск, есть много решений.

Чтобы попытаться совместить свои вопросы, так как иногда сложный бит использует существующий объект DOM, я включил пример в Snap.svg. Вы можете часто делать что-то подобное в большинстве библиотек.

jsfiddle здесь Fiddle используя ваш существующий html.

s = Snap("#mySVGContainer1"); // create a canvas from existing svg 

var triangle1 = s.select("#myShape1").transform("r90"); //select&transform existing object 


p = Snap("#mySVGContainer2"); 

var triangle2 = p.select("#myShape2"); 
var bbox = triangle2.getBBox(); //bounding box, centre cx/cy 

//rotate and scale with transform string (raphael/snap format) 
triangle2.animate({ transform: "r180," + bbox.cx + ',' + bbox.cy + "s3,3," + bbox.cx + "," + bbox.cy }, 2000); 

Answer 2

Для поворотов, поскольку @Ian указывает, вы можете указать центр вращения. Для других преобразований изменения определяются относительно точки пути (0,0).

Самый простой способ получить преобразования для работы относительно центра на путь является либо:

1. Определите путь таким образом, чтобы он находился по центру вокруг (0,0); или
2. Обведите путь в элементе <g>, а затем переведите его так, чтобы он был центрирован на (0,0) точке системы координат элемента <g>.

Затем вы можете применять повороты, весы и трансформации (в случае использования) на <g>, и все они будут хорошо центрированы.

Самая сложная часть - это «центр» произвольной формы. @ Иэн подход использования центра ограничительной коробки, как правило, дает достойные результаты. Если ваша фигура является полигоном, то есть d3 functions you could use.

Пример, показывающий форму движущегося с помощью мыши, вращение и изменение масштаба, все вокруг центра ограничивающей рамки:
http://fiddle.jshell.net/LgfE3/

Редактировать:simplier jsfiddle

Answer 3

Я искал долгое время, и согласится на следующее.

1. Дизайн вашей формы в SVG координаты х: 0, у: 0.

2. Определите вручную центр вращения, например, center = [x: 50, y: 100].

3. Построить spinIt() функция такая:

function spinIt() { 
    needle.transition() 
     .duration(2000) 
     .attrTween("transform", tween); 
    function tween() { 
     return d3.interpolateString("rotate(-180, 50, 100)", "rotate(90, 50, 100)"); 
    } 
} 

4. Используйте его на Тригер:

svg.on("click", spinIt); 

http://jsfiddle.net/SHF2M/79/