Question

下面，我用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>

我的问题是：当红线悬停在蓝点和红点上时，有没有办法使它们（例如更改其颜色）？

谢谢

Answer 1

这是我的解决方案：我正在用线条创建蒙版。该行掩盖了两个额外的圆圈（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凸点

1 个答案: