html - 变换:旋转模糊图像

Question

如何在不损失质量的情况下应用旋转变换？我试过添加 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>

Answer 1

<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 属性旋转有什么用？您可以在那里将旋转中心设置为附加参数。

旋转后的图像看起来非常好。