我正在尝试围绕其中心旋转图像。但在 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>
最佳答案
根据MDN docs for transform-origin ，SVG 的 transform-origin 的状态是兼容性未知。所以它可能还没有在 Safari 中实现。
但是，如果您完全删除 transform-origin 属性，您可以使用 rotate() 函数的第二个和第三个参数为所选元素定义旋转中心。例如
您的图像的 x 和 y 值分别为 325 和 150，宽度和高度为都是 100。所以旋转中心应该是 x 和 y 值加上宽度和高度的一半 (50) 给出 375 和 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);
});
}
关于javascript - CSS transform-origin 不适用于 safari 中的 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57732067/