如何在不损失质量的情况下应用旋转变换? 我试过添加 translateZ(0) 但它无济于事。 这是例子:
svg {
background-color: rgb(93, 193, 93);
}
.rotated {
transform: rotate(1deg);
}
<svg width="400" height="100">
<image xlink:href="https://s11.postimg.org/vzvfu6osz/chip_25.png" width="60" height="60" x="90"/>
<image xlink:href="https://s11.postimg.org/vzvfu6osz/chip_25.png" width="60" height="60" x="160" transform="rotate(1)"/>
</svg>
<div>
<img src="https://s11.postimg.org/vzvfu6osz/chip_25.png"/>
<img src="https://s11.postimg.org/vzvfu6osz/chip_25.png" class="rotated"/>
</div>
最佳答案
<svg width="400" height="100">
<image x="50" y="20" xlink:href="https://s11.postimg.org/vzvfu6osz/chip_25.png" width="60" height="60" />
<image x="120" y="20" transform="rotate(-90, 150, 50)" xlink:href="https://s11.postimg.org/vzvfu6osz/chip_25.png" width="60" height="60" />
</svg>
用 svg transform 属性旋转有什么用?您可以在那里将旋转中心设置为附加参数。
旋转后的图像看起来非常好。
关于html - 变换:旋转模糊图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40960765/