Блог

Главная - Вопросы по программированию - Точка выпуклости SVG при наведении курсора анимированной строки

Точка выпуклости SVG при наведении курсора анимированной строки

#animation #svg #interaction

#Анимация #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>

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

Спасибо

Ответ №1:

Это мое решение: я создаю маску с линией. Есть 2 дополнительных круга ( fill:gold ), которые замаскированы линией.

Я помещаю анимированную строку внутри a <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>

Комментарии:

1. Сегодня мы ответили на разные вопросы : =)

2. ага … svg-маска. спасибо, я попробую как можно скорее. Я предполагаю, что я могу применить и другие изменения — например, изменить размер круга или прозрачность? Какой-то эффект радара.

3. и еще один дополнительный вопрос: считаете ли вы, что эффект маски может быть растянут во времени? Значение — наведение курсора красной линии, наложение маски, наведение курсора красной линии, удаление маски через 1 секунду? Мне так жаль, что я сейчас разговариваю по телефону, не могу дождаться, чтобы попробовать ваше решение.

4. Мне нужно было бы понять, почему вам нужно ее удалить.

5. Для сохранения визуального внимания. Моя цель — добиться чего-то вроде радарного изображения, где оно имеет аналогичный эффект. Пользователь должен видеть «след» от объекта, через который прошла красная линия, еще 1-2 секунды