SVG - 圖像縮放問題

縮放包含SVG的父DIV，該SVG具有彩色矩形圖像，顯示底層矩形的細線邊緣。SVG - 圖像縮放問題

<div style='transform: scale(0.79454)'> 
    <svg width="1280" height="720"> 
     <rect fill="yellow" width="1280" height="720"/> 
     <image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/> 
    </svg> 
</div>

在下面的截圖中，圖片下方有一個黃色框。兩者的大小相同，但您可以看到黃色框從邊緣「流血」了一下（您可以查看完整圖像或下面的提琴以清楚地看到它）。

無論我是否轉換圖像節點，並且當我嘗試使用viewBox而不是父div來縮放SVG時，都會發生這種工件。在Safari中比在Chrome中更好一些，但在某些情況下它仍然會發生。

這裏有一個小提琴https://jsfiddle.net/e17ea4j5/

是否有任何修復這個？

來源

2017-07-21 mitchgrasso

肯定有，取出RECT。 –

謝謝。讓我們假設我不是一個白癡，這是一個簡單的例子來說明問題。 – mitchgrasso

保羅在他的回答中解釋說，除了有限的方式，你的問題沒有其他答案可行。 –

你看到的是反鋸齒的結果。黃色矩形邊緣處的半透明像素通過圖像邊緣處的半透明像素可見。

真的沒有任何優雅的解決方案來消除這些問題。特別是當你按比例縮放時（例如1.4和0.79454）。

你只剩下一些有點像hacky的解決方案，比如在你的矩形周圍放一個黑色的筆劃。

<rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/>

body{ 
 
     background: black; 
 
     margin: 0; 
 
    }

<body> 
 
    <div style='transform: scale(0.79454)'> 
 
    <svg width="1280" height="720"> 
 
     <rect fill="yellow" width="1280" height="720" stroke="black" stroke-width="1"/> 
 
     <image width="1280" height="720" transform='matrix(1.4,0,0,1.4,-200,-150)' xlink:href="https://storage.googleapis.com/firebase-beautifulslides.appspot.com/test/dawid-zawila-279995.jpg"/> 
 
    </svg> 
 
    </div> 
 
</body>

來源

2017-07-22 10:01:10

謝謝，不幸的是，這不是我的情況下可行的解決方案。我試圖解決一個更一般的創作工具，其中的圖像可以任意地放置在像矩形一樣的形狀之上。圖像沒有必要像我的例子那樣完全遮住底層形狀 - 它可能只能沿着一個邊緣放置，我不想強制底層矩形有中風，因爲它的一部分可能是故意可見的。 – mitchgrasso

另一種選擇是確保矩形和圖像與像素邊界精確對齊。如果以1：1（或其倍數）查看SVG，那至少可以解決問題。 –

我想出的解決方案是輕微的縮放比例，所以它不再流血。 'style ='transform：scale（0.999）;轉換起源：50％50％'' – mitchgrasso

SVG - 圖像縮放問題

回答

相關問題