动画线悬停时的SVG碰撞点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画线悬停时的SVG碰撞点相关的知识，希望对你有一定的参考价值。
下面我用svg动画创建一个简单的小提琴：
<svg width="250" height="250" viewbox="0 0 20 20">
<line x1="10" y1="0" x2="10" y2="10"style="stroke:rgb(255,0,0); stroke-width:1">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);"/>
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
</svg>我的问题是：当红线悬停时，有没有办法让蓝色和红色点碰撞（例如改变颜色）？
谢谢
答案
这是我的解决方案：我正在创建一个带线的面具。有2个额外的圆圈（fill:gold）被线条掩盖。
我把动画线放在<g stroke="red">里面因为我希望用过的线是白色的。
svg{border:1px solid;}<svg width="250" height="250" viewbox="0 0 20 20">
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);" />
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
<mask id="mask">
<use xlink:href="#L" style="stroke:white"/>
</mask>
<g stroke="red">
<line id="L" x1="10" y1="0" x2="10" y2="10" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
</g>
<g style="fill:gold;mask: url(#mask)">
<circle cx="5" cy="5" r="1" />
<circle cx="15" cy="15" r="1"/>
</g>
</svg>以上是关于动画线悬停时的SVG碰撞点的主要内容，如果未能解决你的问题，请参考以下文章