如何管理具有不同大小的2個SVG的筆畫

我很快就會使用svg icon以及我的網站的筆畫屬性。但是當2 svg具有不同的畫布尺寸時，在調整大小之前繪製筆畫。如何管理具有不同大小的2個SVG的筆畫

因此，對於32像素和2像素筆畫上的svg，64像素結果具有4像素的像素。第二個（在128像素上）對最終結果有1像素筆畫。

例如我已完成的jsfiddle：http://jsfiddle.net/kX6tL/1/

<tr> 
    <td>Stroke : 2</td> 
    <td> <svg class="icon"><use xlink:href="#home-icon" /></svg> </td> 
    <td> <svg class="icon"><use xlink:href="#earth-icon" /></svg></td>    
</tr> 
<tr> 
    <td>Stroke : 10</td> 
    <td> <svg class="icon large-stroke"><use xlink:href="#home-icon" /></svg> </td> 
    <td> <svg class="icon large-stroke"><use xlink:href="#earth-icon" /></svg></td>    
</tr> 

.icon{ 
    width: 64px; 
    height: 64px; 

    fill: #AB1; 

    stroke: red; 
    stroke-width: 2px; 
} 
.large-stroke{ 
    stroke-width: 10px; 
}

有人有一個解決方案？

謝謝大家的閱讀和幫助！ :)

來源

2014-03-05 Arthur

可能重複（http://stackoverflow.com/questions/10160262/draw-a-line-that-doesnt-get-更厚的時候圖像延伸） –

您可以使用矢量效果=「非縮放筆畫」。
除IE以外，此屬性由FF，Chrome，Opera和Safari支持。的[畫一條線，不得到較厚時，圖像拉伸]

http://www.w3.org/TR/2014/WD-SVG2-20140211/painting.html#NonScalingStroke

來源

2014-03-06 00:16:46 defghi1977

感謝您的回覆，我嘗試了我的代碼，它不起作用（html和css版本）非縮放比例代碼：http://jsfiddle.net/kX6tL/2/ – Arthur

我嘗試另一種想法，它的工作！我不必把這個屬性放在svg應答器上，而是放在svg的孩子身上。所以：svg * {矢量效果：非縮放筆畫; } 工作代碼：http://jsfiddle.net/kX6tL/3/ – Arthur

如何管理具有不同大小的2個SVG的筆畫

回答

相關問題