SVG渲染（自動bluring）

當我試圖使這個SVG樣品時，線路會自動bluring並具有2px的高度：SVG渲染（自動bluring）

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >     
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" /> 
</svg>

但是，當Y座標變爲250.5，一切都OK - 線有1px的高度。

這將是一個解決方案（添加0.5像素），但我需要在元素上使用縮放變換。在轉化的元素上再次出現問題。

如何解決？謝謝。

來源

2012-02-10 user978259

模糊你的意思是消除鋸齒。嘗試使用清晰的邊緣渲染模式，例如：

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >     
    <line x1="100" x2="400" y1="250" y2="250" stroke="black" shape-rendering="crispEdges" /> 
</svg>

來源

2012-02-10 11:12:46 therobyouknow

對於普通瀏覽器來說是可以的，謝謝！但在IE9中沒有woks =（ – user978259 2012-02-10 11:30:47

這是不是很好，當縮小線條消失與形狀呈現=「crispEdges」 – magritte 2013-09-25 16:14:24

+1 upvote - 約定@magritte - 這將是一個工程的權衡：一切有利有弊我有興趣知道是否有一種模式可以提供清晰的邊緣，同時還可以保留非常細的線條，如你所描述的。一段時間以來，我一直對能夠警告這樣一種算法的算法感興趣場景 - 尤其是對於某些尺寸的複雜中文和日文字體的印刷 - 在這裏缺失的筆劃會給字符帶來不同的含義或根本沒有意義 - 當然這是非常不可取的。 – therobyouknow 2013-09-26 07:58:35

SVG渲染（自動bluring）

回答

相關問題