SVG точка удара, когда анимированная линия наведите на нее курсор - PullRequest
Новая
       31

SVG точка удара, когда анимированная линия наведите на нее курсор

0 голосов
/ 10 апреля 2019

ниже я создаю простую скрипку с 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>

У меня такой вопрос: есть ли способ, которым я могу выделить синюю и красную точки (например, изменить их цвет), когда красная линия наведет их?

Спасибо

1 Ответ

2 голосов
/ 10 апреля 2019

Это мое решение: я создаю маску с линией.Есть 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>
...