ブラウザを中心とした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からの相対座標です。これらの値は、どの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

ファンタスティック...

わかりません！できます！！！どうもありがとう。 – sebpiq

ブラウザを中心としたSVG図の回転（IEを含む）

答えて

関連する問題