vector-effect SVG描边不缩放demo实例页面

回到相关文章 »

效果：

原始图标

不设置vector-effect 2倍效果

设置vector-effect同时2倍放大

代码：

CSS代码：

.icon {
    width: 50px; height: 50px;
    stroke-width: 2px;
    stroke: #2486ff;
}
.scale {
    width: 100px; height: 100px;
}
circle, path {
    vector-effect: non-scaling-stroke;
}

HTML代码：

<svg style="display:none;">
  <symbol id="icon-plus" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20"/>
    <path d="M25 15 L 25 35"/>
    <path d="M15 25 L 35 25"/>
  </symbol>
</svg>

<p><svg class="icon"><use xlink:href="#icon-plus"></use></svg></p>
<p><svg class="icon scale"><use xlink:href="#icon-plus"></use></svg></p>