我正在尝试围绕其中心旋转图像。但在Safari中，SVG的左上角，总是以它的原点为中心进行旋转。
var rotate_val= 30;
function rotate(val){
rotate_val = rotate_val + val;
var transform = "translate(0, 0) scale(1, 1) rotate("+rotate_val+ ")";
var svg = d3.select("g").transition()
.style('-webkit-transform-origin', '50% 50%')
.style('transform-origin', 'center')
.duration(1200)
.attrTween("transform",function(interpolate) {
return d3.interpolate(transform, transform);
});
}
<body>
<button onclick="rotate(30)">Rotate + 30</button>
<button onclick="rotate(-30)">Rotate - 30</button>
<div id = "svgcontainer" style="border: 1px solid">
<svg width = "100%" height = "100%" viewBox="0 0 750 400">
<g>
<image x="325" y="150" xlink:href="image.png" height="100" width="100"/>
</g>
</svg>
</div>
</body>
https://jsfiddle.net/ztw2omgb/ https://jsfiddle.net/ztw2omgb/
根据变换源的 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin，状态transform-origin for SVG is 兼容性未知。所以它可能还没有在 Safari 中实现。
However，如果您删除transform-origin属性完全，您可以使用第二个和第三个参数rotate()函数来定义所选元素的旋转中心。例如
你的形象x, and y值是325 and 150宽度和高度分别为100。所以旋转中心应该是x and y值加上宽度和高度的一半 (50) 给出375 and 200.
function rotate(val){
rotate_val = rotate_val + val;
// note the rotate function now contains second and third argument,
// which specify the center of rotation.
var transform = "translate(0, 0) scale(1, 1) rotate("+rotate_val+ ", 375, 200)";
d3.select("g").transition()
.duration(1200)
.attrTween("transform",function(interpolate) {
return d3.interpolate(transform, transform);
});
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
