Вращение фигуры SVG вокруг ее центра в поперечном браузере (включая IE)

Я пытаюсь, чтобы фигура SVG вращалась вокруг ее центра. Для этого я рассчитываю центр вращения и масштабирую его согласно viewBox. Он работает как шарм в Chrome, Firefox и Safari, но, несмотря на все мои усилия, я не смог заставить его работать в Internet Explorer. Я попытался изменить preserveAspectRatio, проверяя, что не так с моими значениями, но не мог понять это ... Любая идея?Вращение фигуры SVG вокруг ее центра в поперечном браузере (включая IE)

<!doctype HTML> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 
<body> 
 
<svg version="1.1" id="sketch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 1332 1080" style="enable-background:new 0 0 1332 1080;" preserveAspectRatio="xMinYMin slice"> 
 
\t <g id="wheel1"> 
 
\t \t <g> 
 
\t \t \t <path class="st8" d="M258.4,149c-123.7,0-224,100.3-224,224s100.3,224,224,224s224-100.3,224-224S382.1,149,258.4,149z M258.9,533 
 
\t \t \t \t c-88.4,0-160-71.6-160-160s71.6-160,160-160s160,71.6,160,160S347.2,533,258.9,533z"/> 
 
\t \t \t <g> 
 
\t \t \t \t <polyline class="st9" points="258.5,149 282,181 258.5,213 \t \t \t "/> 
 
\t \t \t </g> 
 
\t \t </g> 
 
</svg> 
 

 
<script type="text/javascript"> 
 
var svg = document.getElementById('sketch') 
 
    var wheel = document.getElementById('wheel1') 
 

 
    var svgBBox = svg.getBoundingClientRect() 
 
    var wheelBBox = wheel.getBoundingClientRect() 
 

 
    // calculate the rotation center of the wheel 
 
    var cx = (wheelBBox.left - svgBBox.left) + wheelBBox.width/2 
 
    var cy = (wheelBBox.top - svgBBox.top) + wheelBBox.height/2 
 

 
    // Calculate the ratio for scaling measurments according to viewBox/viewport 
 
    var viewBox = svg.getAttribute('viewBox').split(' ').map(function(v) { return parseInt(v, 10) }) 
 
    var ratioX = viewBox[2]/svgBBox.width 
 
    var ratioY = viewBox[3]/svgBBox.height 
 

 
var t0 = Date.now() 
 

 
// Rotate loop 
 
    setInterval(function() { 
 
var delta = (Date.now() - t0) 
 
wheel.setAttribute('transform', 'rotate(' + delta * 0.05 + ', ' + (cx * ratioX) + ', ' + (cy * ratioY) + ')') 
 
    }, 10) 
 
</script> 
 

 
<style type="text/css"> 
 
\t \t .st9 { fill: yellow; } 
 
</style> 
 

 
</body> 
 
</html>

источник

2017-01-10 sebpiq

использование getBBox() вместо getBoundingClientRect(). Координаты getBBox() уже относительно viewBox. Вы можете использовать эти значения напрямую независимо от любого вида.

Не уверен, если это фиксирует IE ...

var svg = document.getElementById('sketch') 
 
var wheel = document.getElementById('wheel1') 
 
var wheelBBox = wheel.getBBox() 
 

 
    // calculate the rotation center of the wheel 
 
    var cx = wheelBBox.x + wheelBBox.width/2 
 
    var cy = wheelBBox.y + + wheelBBox.height/2 
 

 
var t0 = Date.now() 
 

 
// Rotate loop 
 
    setInterval(function() { 
 
var delta = (Date.now() - t0) 
 
wheel.setAttribute('transform', 'rotate(' + delta * 0.05 + ', ' + cx + ', ' + cy + ')') 
 
    }, 10)

.st9 { fill: yellow; }

<svg version="1.1" id="sketch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 1332 1080" style="enable-background:new 0 0 1332 1080;" preserveAspectRatio="xMinYMin slice"> 
 
\t <g id="wheel1"> 
 
\t \t <g> 
 
\t \t \t <path class="st8" d="M258.4,149c-123.7,0-224,100.3-224,224s100.3,224,224,224s224-100.3,224-224S382.1,149,258.4,149z M258.9,533 
 
\t \t \t \t c-88.4,0-160-71.6-160-160s71.6-160,160-160s160,71.6,160,160S347.2,533,258.9,533z"/> 
 
\t \t \t <g> 
 
\t \t \t \t <polyline class="st9" points="258.5,149 282,181 258.5,213 \t \t \t "/> 
 
\t \t \t </g> 
 
\t \t </g> 
 
</svg>

источник

2017-01-11 05:34:15

Fantastic! Оно работает!!! Большое спасибо. – sebpiq

Вращение фигуры SVG вокруг ее центра в поперечном браузере (включая IE)

ответ

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