以跨瀏覽器的方式（包括IE）圍繞其中心旋轉SVG圖形
[英]Rotating an SVG figure around its center in a cross-browser way (including IE)
問題描述
我正在嘗試使SVG圖形圍繞其中心旋轉。 為此，我正在計算旋轉中心，並根據viewBox對其進行縮放。 在Chrome，Firefox和Safari中，它的工作原理很吸引人，但是盡管我付出了所有努力，但我仍然無法在Internet Explorer中使用它。 我試過更改preserveAspectRatio ，檢查我的值出了什么問題，但無法弄清楚……有什么主意嗎？
<!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" viewBox="0 0 1332 1080" style="enable-background:new 0 0 1332 1080;" preserveAspectRatio="xMinYMin slice"> <g id="wheel1"> <g> <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 c-88.4,0-160-71.6-160-160s71.6-160,160-160s160,71.6,160,160S347.2,533,258.9,533z"/> <g> <polyline class="st9" points="258.5,149 282,181 258.5,213 "/> </g> </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"> .st9 { fill: yellow; } </style> </body> </html>
1 個解決方案
解決方案1
3 已采納 2017-01-11 05:34:15
使用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" viewBox="0 0 1332 1080" style="enable-background:new 0 0 1332 1080;" preserveAspectRatio="xMinYMin slice"> <g id="wheel1"> <g> <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 c-88.4,0-160-71.6-160-160s71.6-160,160-160s160,71.6,160,160S347.2,533,258.9,533z"/> <g> <polyline class="st9" points="258.5,149 282,181 258.5,213 "/> </g> </g> </svg>
在瀏覽器中將svg轉換為png圖像（包括IE在內的跨瀏覽器）
[英]In browser conversion of svg to png image (cross browser including IE)
使用 javascript 和一些跨瀏覽器支持向 svg 添加內容
[英]adding content to svg with javascript and some cross-browser support
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.