變換：旋轉模糊圖像

如何應用旋轉變換而不損失質量？我試過添加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>

來源

2016-12-04 V. Logvinenko

您可以通過圖像呈現CSSS屬性https://developer.mozilla.org/en/docs/Web/CSS/image-rendering關閉它，但我懷疑您會喜歡結果。 –

@RobertLongson感謝您的迴應！這個屬性沒有幫助，我嘗試了，我只看到「圖像渲染：像素化」效果。但它看起來歪斜（ –

-2

你應該閱讀更多關於仿射transformation。

來源

2016-12-04 19:38:18

）爲什麼？應用轉換後沒有關於圖像質量的信息 –

<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變換旋轉屬性？在那裏你可以設置旋轉中心作爲附加參數。

旋轉的圖像看起來非常好。

來源

2016-12-04 21:10:26 Reinhard

您正在拍攝低分辨率（60x60）圖標並將其旋轉很少。由於插值/抗鋸齒，你將會產生一個小的不利影響。

如果使用更高分辨率的圖標（例如120x120）作爲原始圖像。然後在旋轉60x60時渲染它，你會發現它看起來比低分辨率的好。

來源

2016-12-05 08:54:34

好點！謝謝！我試圖做到這一點，並沒有幫助。所以，我看到沒有辦法做到這一點更好的位圖，我的理解是需要使用SVG –

它可能比位圖更好，但是如果你打算讓水平線或垂直線偏離一度，那麼結果可能不會那麼好。祝你好運！ –

變換：旋轉模糊圖像

回答

相關問題