Могу ли я сделать переход на атрибут SVG, который не является CSS? - PullRequest
Новая
       14

Могу ли я сделать переход на атрибут SVG, который не является CSS?

1 голос
/ 01 ноября 2019

У меня есть SVG, который я хотел бы перейти, чтобы расширить, когда мышь над ним наводится, и вернуть его к нормальному размеру, когда мышь не зависает. Поскольку он не настраивается с помощью CSS, я не могу понять, как осуществить этот переход.

https://codepen.io/BrendanOB/pen/LYYepQQ

^ Ссылка на пример того, что я получил до сих пор

Я новичок в javascript, любая помощь очень ценится, спасибо.

Я уже пробовал масштабирование и матрицу CSS-преобразования, без результатов работы. 

<style>
 .st2{fill:#E5CACA;}
 .st3{fill:none;stroke:#FFF;stroke-width:17;stroke-linecap:round;stroke-miterlimit:10;}
</style>

<g id="Layer_2">
   <line class="st3" x1="500" y1="142" x2="500" y2="95"/>
   <line onmouseover="bigLine()" onmouseleave="smallLine()" id="move" class="st3" x1="518.2" y1="142.9" x2="521.8" y2="96.1"/>
   <line id="stretch" class="st3" x1="536" y1="144.7" x2="544" y2="98.3"/>
</g>

<script>
 function bigLine(){
     var lines = document.querySelector('#Layer_2')
     var l = lines.querySelector('#move')
     console.log(l);
     l.transition = "all 2s";
     l.setAttribute("y2", "26");
   }

   function smallLine(){
     var lines = document.querySelector('#Layer_2')
     var l = lines.querySelector('#move')
     console.log(l);
     l.transition = "all 2s";
     l.setAttribute("y2", "96");
   }
</script>

1 Ответ

0 голосов
/ 01 ноября 2019

Как прокомментировал Роберт Лонгсон, вы можете использовать анимацию SMIL: внутри строки #move есть 2 <animate> элемента: первый для mouseover и второй для mouseleave.

Первыйанимация изменяет значение атрибута x2 строки from="96.1" to="26". Второй элемент не имеет атрибута from, но анимирует значение y2 to="96.1". Длительность обеих анимаций равна dur="1s", а fill="freeze" аналогичен animation-fill-mode: forwards из CSS.

Надеюсь, это поможет. 

.st2 {
  fill: #e5caca;
}
.st3 {
  fill: none;
  stroke: #ddd;
  stroke-width: 17;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  
}
<svg viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;">
  <g id="Layer_2">
	<line class="st3" x1="500" y1="142" x2="500" y2="95"/>
    <line id="move" class="st3" x1="518.2" y1="142.9" x2="521.8" y2="96.1">
       <animate
    	attributeType="XML" 
        attributeName="y2" 
        from="96.1" to="26" 
        begin="mouseover"
        dur="1s" 
        fill="freeze" />
       <animate
    	attributeType="XML" 
        attributeName="y2" 
        to="96.1" 
        begin="mouseleave"
        dur="1s" 
        fill="freeze" />
    </line>
	<line id="stretch" class="st3" x1="536" y1="144.7" x2="544" y2="98.3"/>
</g> 
</svg>
...