javascript - 我可以对非 CSS 的 SVG 属性进行转换吗？

Question

我有一个 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>

Answer 1

正如 Robert Longson 所评论的，您可以使用 SMIL 动画:行内 #move有 2 <animate>元素:第一个为mouseover第二个为 mouseleave .

第一个动画正在更改行 from="96.1" to="26" 的 x2 属性值。第二个元素没有 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>