Question

我很快就使用svg icon和笔画属性为我的网站。但是当2 svg具有不同的画布大小时，在调整大小之前会画出笔画。

因此对于32px和2px笔划的svg，64px结果有4px strok。而第二个（128px）的最终结果是1px笔画。

例如我做了一个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;
}

有人有解决方案吗？

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

Answer 1

您可以使用vector-effect =“non-scaling-stroke” 除IE之外，FF，Chrome，歌剧和狩猎都支持此属性。

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

如何使用2个不同大小的SVG来管理笔划

1 个答案: