トランスフォーム：回転はぼかし画像です

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

あなたはアフィンtransformationについての詳細を読んでください： これは一例です。

Answer 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と回転については何ですか？回転中心を追加パラメータとして設定することができます。

回転された画像はとてもうまく見えます。

Answer 3

低解像度（60x60）のアイコンを少しずつ回転させています。補間/アンチエイリアシングのために小さな有害な効果があります。

元の画像として高解像度のアイコン（例：120x120）を使用する場合。次に、60x60で回転させてレンダリングすると、低解像度のものよりもよく見えるはずです。