Повернуть SVG от центральной точки

0

У меня есть механизм svg, который я хочу повернуть вокруг его центральной точки. Могу ли я сделать это без использования плагина третьего лица (например, raphael или d3), чтобы найти центральную точку?

<section id="figure-container">
<svg version="1.1" id="mod02-fig01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="1636px" height="1089px" viewBox="0 0 1636 1089" enable-background="new 0 0 1636 1089" xml:space="preserve">
    <path fill="url(#SVGID_3_)" d="M861.877,817.743l48.579-13.964l-7.37-53.131l-50.668-0.205c-6.911-20.96-17.356-40.357-30.65-57.468
            l28.278-41.983l-39.8-35.961l-38.998,32.455c-18.266-11.33-38.604-19.688-60.366-24.367l-5.321-50.339l-53.605-1.963l-9.013,49.939
            c-22.031,3.157-42.905,10.078-61.917,20.116l-36.422-35.13l-42.326,32.951l25.192,44.046c-14.449,16.146-26.22,34.773-34.573,55.207
            l-50.406-3.492l-11.242,52.449l47.556,17.527c-0.713,22.521,2.492,44.267,9.005,64.574l-40.807,29.687l25.102,47.402l47.633-17.12
            c13.507,17.151,29.889,31.965,48.459,43.687l-12.17,48.941l49.701,20.18l25.455-43.681c10.423,2.166,21.162,3.499,32.158,3.901
            c11.245,0.411,22.298-0.163,33.08-1.629l22.132,45.302l51.042-16.485l-8.581-49.834c19.335-10.402,36.708-24.037,51.375-40.21
            l46.137,20.505l28.504-45.438l-38.629-32.683C856.307,861.728,861.022,840.265,861.877,817.743z">

        <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 470 675"
                    to="360 470 675"
                    dur="4s"
                    repeatCount="indefinite"/>
    </path>
</svg>

http://jsfiddle.net/6XNc7/

  • 0
    почему вы не можете использовать Transform Rotate. Преобразование вызова: вращение с использованием js в интервале.
  • 0
    Я написал сообщение в блоге об этой самой вещи: petercollingridge.co.uk/blog/svg-animation-rotating-elements
Теги:
svg
rotation

2 ответа

3
Лучший ответ

Вы можете просто использовать обычный SVG DOM, который Raphael и d3 используют сами.

Вычислите центр коробки и отрегулируйте вращение вокруг этого, например,

var path = document.getElementsByTagName("path")[0];
var bbox = path.getBBox();
var animate = path.getElementsByTagName("animateTransform")[0];
animate.setAttribute("from", "0 " + (bbox.x + (bbox.width / 2)) + " " + (bbox.y + (bbox.height / 2)));
animate.setAttribute("to", "360 " + (bbox.x + (bbox.width / 2)) + " " + (bbox.y + (bbox.height / 2)));
Поделиться
  • 0
    Спасибо Роберту, изо всех сил пытался найти какую-либо достойную документацию относительно SVG анимации. Это сработало.
0

Пример скрипта (пока еще не видел хорошего на SO) http://jsfiddle.net/r5xkw0pq/2/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

radians = function(degrees){
  return degrees/180 * Math.PI;
}

degrees = function(radians){
  return radians*180 / Math.PI;
}

var x = 0, y = 0, w = 100, h = 150;
var theta = 15;
var hyp = Math.sqrt(w*w + h*h);

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+hyp+'" height="'+hyp+'">'+
'<rect class="shape" x="0" y="0" width="'+w+'" height="'+h+'" transform="translate('+(hyp-w)/2+','+(hyp-h)/2+') rotate('+theta+','+w/2+','+h/2+')" fill="#006791"></rect></svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0, 223, 223);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

И болезненный способ, который предоставляет математику: http://jsfiddle.net/r5xkw0pq/1/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню