CSS转换来源不适用于Safari中的SVG [英] CSS transform-origin not working for svg in safari
问题描述
我正在尝试将图像绕其中心旋转.但是在Safari(SVG的左上角)中，它的原点始终被当作旋转中心.
I am trying to rotate the image about its center. But in Safari, the top left corner of the SVG, it's origin is always taken as the center for rotation.
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/
推荐答案
根据用于转换来源的MDN文档，用于 SVG 的 transform-origin 的状态为未知兼容性.因此它可能尚未在Safari中实现.
According to the MDN docs for transform-origin, the status of transform-origin for SVG is Compatibility Unknown. So it may not be implemented yet in Safari.
但是，如果完全删除了 transform-origin 属性，则可以使用 rotate()函数的第二个和第三个参数为所选元素定义旋转中心.例如
However, if you remove the transform-origin attributes completely, you can use the second and third arguments of the rotate() function to define the center of rotation for your selected element. e.g.
图像的 x 和 y 值分别为 325 和 150 ，宽度和高度分别为都为100.因此旋转中心应为 x 和 y 值加上宽度和高度的一半(50)，以给出 375 和 200 .
Your image's x, and y values are 325 and 150 respectively, and the width and height are both 100. So the center of rotation should be the x and y values plus half the width and height (50) giving 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);
});
}
这篇关于CSS转换来源不适用于Safari中的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
