從中心點旋轉SVG

我有一個svg齒輪，我想圍繞它的中心點旋轉。我可以在不使用第三方（如raphael或d3）插件來查找中心點的情況下執行此操作嗎？從中心點旋轉SVG

<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/

來源

2014-02-23 ShambalaG

爲什麼你不能使用變換旋轉。調用變換：使用間隔中的js進行旋轉。 – Bala

我寫了一篇關於這件事的博客文章：http://www.petercollingridge.co.uk/blog/svg-animation-rotating-elements –

您可以只使用拉斐爾和D3使用自己的普通SVG DOM。

計算框的中心並將旋轉調整爲例如

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)));

來源

2014-02-23 10:28:10

感謝羅伯特，正在努力尋找關於svg動畫的任何體面的文檔。這很有用。 – ShambalaG

小提琴例子（沒有看到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/

來源

2015-12-11 16:12:28 Escher

從中心點旋轉SVG

回答

相關問題