Css 如何使用两个不同大小的SVG管理中风

我在我的网站上使用了“自短”和“笔划”属性。但是当两个svg具有不同的画布大小时，在调整大小之前绘制笔划

因此，对于32px和2px冲程的svg，64px的结果具有4px冲程。。第二个（128px）在最终结果上有1px的冲程

例如，我做了一个JSFIDLE：

行程：2
行程：10
.图标{
宽度：64px；
高度：64px；
填充：#AB1；
笔画：红色；
笔画宽度：2px；
}
.大冲程{
笔划宽度：10px；
}

有人有办法吗

谢谢大家的阅读和帮助！：）

您可以使用vector effect=“非缩放笔划”。
除IE外，FF、Chrome、opera和safari都支持此属性

---

可能重复感谢您的回复，我尝试了我的代码，但它不工作（html和css版本）代码与非缩放笔划：我尝试另一个想法，它的工作！！我不必将此属性放在svg应答器上，而是放在svg的子对象上。So:svg*{矢量效果：非缩放笔划；}工作代码：

<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;
}