如何在保持抗鋸齒的同時呈現清晰邊緣的svg元素？

有沒有辦法來渲染清晰的邊緣SVG元素，同時仍保持抗鋸齒？如何在保持抗鋸齒的同時呈現清晰邊緣的svg元素？

我創建一個基於瀏覽器的工具，在現代瀏覽器上運行。

玩弄的shape-rendering屬性不給我，我要找的結果。

我希望我的元素有很好的抗鋸齒，這樣的路徑看起來光滑像下面shape-rendering: auto：

enter image description here

但我也想不需要抗鋸齒元素，像開始框看起來清晰，明快的，當shape-rendering: crispEdges呈現，如：

enter image description here

這可能嗎？我是否想要吃我的蛋糕並且吃它？

來源

2014-03-04 brice

是否允許用戶放大和平移任意？或者你可以鎖定特定的SVG世界單元來屏幕像素？ – Phrogz

@Progro：任意縮放和平移。 – brice

可能是設置爲根SVG元素形狀渲染性能。
您應該爲每個形狀元素設置形狀渲染屬性，像這樣。

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
     fill="none" stroke="black"/> 
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
     stroke="black" stroke-width="5"/> 
</svg>

來源

2014-03-04 07:41:31 defghi1977

嗯，我現在感到很蠢。我錯誤地認爲'shape-rendering'屬性只允許在根svg元素上。需要閱讀文檔（我鏈接到）更好...謝謝@ defghi1977 – brice

當我用'crispEdges'放大和縮小時，我仍然遇到嚴重的問題。當比例較小時，矩形的某些邊會消失並以不同的縮放級別重新出現。但這是另一個問題。 – brice

如果您忽略IE，請嘗試使用矢量效果屬性。 http://www.w3.org/TR/SVG2/painting.html#NonScalingStroke或嘗試從crispEdges切換形狀呈現以通過javascript或mediaquery優化質量。 – defghi1977

如果你希望你的箱子出現不因任何抗鋸齒模糊尖銳，不使用crispEdges模式，確保線邊緣的像素邊界。因此，例如，如果您的線條寬度爲奇數個像素，則給它們的座標爲0.5像素。

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

並且在邊界上如果筆畫寬度是偶數的話。

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

當然，這隻有在您的SVG以1：1呈現時纔有效。也就是說，它不會被瀏覽器重新縮放。只適用於水平和垂直的線條。

來源

2014-03-04 09:27:06

這是一個很好的提示。我從來沒有想過做這樣的事情 – brice

[我張貼這是一個答案，而不是評論，因爲我要發佈圖片。否則，這是對useful post by @defghi1977的評論。 +1給他，順便]

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
      fill="none" stroke="black" /> 
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
      fill="none" stroke="black" /> 
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
      stroke="black" stroke-width="5" /> 
    <path d="M80,30l100,100" shape-rendering="auto" 
      stroke="black" stroke-width="5" /> 
</svg>

生產

enter image description here

這是由火狐38.0.5渲染。
在Internet Explorer中11，無論shape-rendering設置產生具有抗混疊和不脆相同的結果。

來源

2015-06-06 06:23:23

沒有這樣的事情optimizeQuality：http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty –

@RobertLongson修復它。感謝您的提醒和鏈接。 –

對於0,90和45的dregree角度（你的例子），cripsEdges看起來不錯，但對其他角度和曲線看起來不好。 – movAX13h

如何在保持抗鋸齒的同時呈現清晰邊緣的svg元素？

回答

相關問題