我可以對不是 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 。

第一個 animation 將行的 x2 屬性的值from="96.1" to="26" 。 第二個元素沒有from屬性，但將 y2 的值設置to="96.1"兩個動畫的持續時間為dur="1s"並且fill="freeze"類似於animation-fill-mode: forwards .

我希望它有所幫助。

 .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>