微信小程序实现圆形菜单弹出选中动画

vector-effect是SVG中十分冷门的属性，相信大多数小伙伴都没有了解过，说句实话，在这次重学SVG之前，这个属性我连听都没听说过。

不过，冷门不重要，重要的是管用，尤其是以后在面对相应场景下，能够快速的想到还有这么个属性提供了一种解决方案就足矣啦。

OK，老规矩，先来扒一扒这个属性的定义。

vector-effect的定义

MDN

vector-effect: 属性指明绘制对象时要使用的矢量效果。在任何其他合成操作（如滤镜，蒙版和剪辑等）之前，都要应用矢量效果。该属性可以直接在 CSS 样式表中使用。

作为显示性属性，它能被应用到任何元素，但只对以下元素有效果：<circle>、 <ellipse>、 <foreignObject>、 <image>、 <line>、 <path>、<polygon>、 <polyline>、 <rect>、 <text>、 <textPath>和 <tspan> 。

总结一下，vector-effect可以指定绘制对象使用的矢量效果，但是只对上述的元素生效，与大多数SVG属性一样，可以在CSS中直接声明。

但是矢量效果又是什么呢？那就要轮到vector-effect的可选值出场了。

vector-effect的可选值

vector-effect可选值有：none（默认） | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position

有点多，不怕，让我们来分而食之。

作为默认值的none

none: 该值指定不应用矢量效果，是默认的渲染行为，即首先用指定的绘画填充几何形状，然后使用指定的绘画来描边轮廓。

作为默认值，none的表现也就是我们没指定vector-effect时的效果，所以也是最常见的，毕竟这么冷门的属性谁会没事去指定一下呢？

.icon {width: 50px; height: 50px;stroke-width: 2px;stroke: #2486ff;fill: none;
}
.scale {width: 100px; height: 100px;
} 

<svg style="display:none;"><symbol id="icon" 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>

<div class="wrapper"><p><svg class="icon"><use xlink:href="#icon"></use></svg></p><p><svg class="icon scale"><use xlink:href="#icon"></use></svg></p>
</div>