变换：旋转是模糊图像答案

【问题标题】：transform:rotate is blurring image变换：旋转是模糊图像
【发布时间】：2017-04-19 01:11:49
【问题描述】：

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

【问题讨论】：

您可以通过图像渲染 CSSS 属性 developer.mozilla.org/en/docs/Web/CSS/image-rendering 将其关闭，但我怀疑您是否想要结果。
@RobertLongson 感谢您的回复！这个属性没有帮助，我正在尝试，我只看到'图像渲染：像素化;'的效果但它看起来歪斜（

标签： html css animation svg transform

【解决方案1】：

您正在使用低分辨率 (60x60) 图标并将其旋转一小部分。由于插值/抗锯齿，您将产生很小的不利影响。

如果您使用更高分辨率的图标（例如 120x120）作为原始图像。然后以 60x60 旋转渲染，你会发现它看起来比低分辨率的更好。

【讨论】：

好点！谢谢！我试过这样做，但没有帮助。所以，我认为没有办法更好地处理位图，我的理解是需要使用 SVG。
它可能比位图更好。希望是。但是，如果您计划将线与水平或垂直方向偏离 1 度，结果可能不会那么好。祝你好运！

【解决方案2】：

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

旋转后的图像看起来很好。

【讨论】：

【解决方案3】：

您应该阅读有关仿射transformation 的更多信息。

【讨论】：

为什么？应用转换后没有关于图像质量的信息