SVG中的固定筆畫寬度

我希望能夠將SVG元素的筆劃寬度設置爲「像素感知」，即不管當前應用的縮放轉換如何，始終爲1px寬。我知道這可能是不可能的，因爲SVG的全部要素是獨立於像素的。SVG中的固定筆畫寬度

背景如下：

我有其視框的SVG元素和屬性preserveAspectRatio集。它看起來是這樣的

<svg version="1.1" baseProfile="full" 
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" 
    xmlns="http://www.w3.org/2000/svg" > 
</svg>

這意味着當我擴展該元素，裏面的實際形狀相應規模（到目前爲止好）。

正如你所看到的，我已經設置了viewBox，以便原點位於中心。我想在該元素內畫一個x軸和y軸，我這樣做：

<line x1="-1000" x2="1000" y1="0" y2="0" />

再次，這工作正常。但理想情況下，這個軸總是隻有1px寬。當我縮放父svg元素時，我對軸越來越不感興趣。

所以我擰了？

來源

2009-08-19 wxs

您可以使用vector-effect屬性設置爲non-scaling-stroke，請參閱the docs。另一種方法是使用transform(ref)。

這將在支持SVG Tiny 1.2中的那些部件的瀏覽器中工作，例如Opera 10.後備包括編寫一個小腳本來執行相同的操作，基本上反轉CTM並將其應用於不應該縮放的元素。

如果你想要更清晰的線條，你也可以disable antialiasing（shape-rendering=optimizeSpeed或shape-rendering=crispEdges）和/或玩定位。

來源

2009-08-20 07:49:17

不幸的是，這是在一個XUL應用程序，這似乎並沒有支持矢量效果。好吧。 – wxs 2009-08-20 14:22:32

這應該出現在Firefox 15中，所以你應該可以在壁虎15上構建XUL應用程序時使用它。 – 2012-05-19 14:04:07

IE11仍然不支持'vector-effect'屬性。在IE11中可以達到與「矢量效果：非縮放比例」相同的效果嗎？ – merlin 2014-08-04 03:48:16

SVG中的固定筆畫寬度

回答

相關問題