SVG的Line标签在设置Mask属性后无法显示
因为项目需要,我要实现一个水管流水的效果,大致效果是这样的:
要实现图中飞线效果我使用了SVG的蒙版技术 mask,mask可以实现指定图像的某个位置可以显示出来,他具有ALPHA透明通道,详细的内容,我就懒得在这里详细说明了,在做这个特效的时候我还是遇到了一些坑,这里对我遇到的其中的一个坑加以介绍。
Line或者Path绘制平行X轴或者Y轴的直线,本该被蒙版显示的线段并没有显示,为什么我是说是平行X轴或者平行与Y轴的情况下的直线才不显示呢?那是因为你但凡给一个角度给直线都能显示出来,后来查询资料发现mask标签默认是只对有边界框的对象起作用,直线在旋转了一定的角度后它实际是形成了一个边界框,这个时候我们只要给mask标签设置maskUnits="userSpaceOnUse"即可:
<svg height="450" width="450">
<defs