我可以对不是 CSS 的 SVG 属性进行转换吗？

Question

我有一个 SVG，我想在鼠标悬停在它上面时过渡到扩展，并在鼠标不悬停时放回其正常大小。因为它不是通过 CSS 调整的，所以我不知道如何实现这种转变。

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

^ 一个 link 到我目前得到的例子

我是 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>

我可以对不是 CSS 的 SVG 属性进行转换吗？

Can I make a transition on an SVG attribute that is not CSS?

javascript

animation

svg

transition