使用 SVG 中 vector-effect 屬性來解決邊框（stroke）縮放問題

這是個人一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多關於SVG技術應用能夠去網站看看。

這篇文章來看看在SVG中SVGTiny12中vector-effect這個屬性以及使用它來解決SVG在縮放過程當中會產生邊框不定寬的問題，好比隨着SVG增大，邊框也會按比例增大，以下圖所示：

從上圖中就能夠看到中間icon的邊框明顯比旁邊的兩個icon的邊框要粗一點。

在前一段時間的一個項目中，使用SVG縮放的時候遇到這個邊框問題。

具體問題是，在一個項目中我把一個icon定義在SVG中的symbol元素中，這樣就能夠方便在不一樣的地方引用這個icon。根據不一樣的場景，它的寬高不同，這個時候就能夠任意放大縮小SVG的尺寸而不失真。衆所周知，SVG是矢量圖形，因此能夠任意放大縮小它的尺寸而保持不失真，這也是它大受歡迎的一個緣由。

在實際使用的過程當中，有一些icon是由邊框組成的，不管在什麼狀況下邊框的寬度都應該爲1px。而當你對一個SVG進行縮放的時候，它會把邊框也進行縮放，好比當你把一個SVG的icon放大兩倍的時候，它會把對應的邊框也會放大兩倍。而咱們的需求是，不管怎麼樣縮放SVG，邊框都應保持不變。

Vector Effect 屬性

程序員就是一個不斷的挖坑填坑並以此爲樂的一類人。在解決這個問題的過程當中，我在W3C標準的網站上發現了一個很不起眼的SVG屬性vertor-effect，而且它有一個non-scaling-stroke。正如這個屬性表示的那樣，它就是用來阻止SVG對邊框進行縮放的。

下面來具體看看代碼：

<!-- reusable symbols -->
<svg>
  <symbol id="Icon-plus" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/>
    <path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
    <path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
  </symbol>
</svg>

<!-- actually using the symbol -->
<svg width="50" height="50">
  <use xlink:href="Icon-plus"/>
</svg>

能夠看到下面SVG的寬和高和symbol的viewBox的值是同樣的，icon的邊框都是2px。這樣是沒問題的，當我對它進行縮放的時候，問題就出現了。好比我指定icon的寬和高爲200px：

<svg width="200" height="200">
  <use xlink:href="Icon-plus"/>
</svg>

能夠看到icon的尺寸變成200px了，同時它的邊框也加粗了。相對於原來的尺寸增長了4倍，邊框也增長到了8px。有了vector-effect這個屬性，解決這個問題就很簡單了。在不須要放大的SVG元素上添加vector-effect屬性而且設置它的值爲non-scaling-stroke就能夠了。

<circle vector-effect="non-scaling-stroke"/>
<path vector-effect="non-scaling-stroke"/>
<path vector-effect="non-scaling-stroke"/>

如今，不管你怎麼對它進行縮放，它的邊框永遠是2px。

中間的icon是沒有設置vector-effect屬性的。

源碼

原文地址，基於本身的理解翻譯而成。