javascript - 如何用JS改变路径数据？

Question

我想在鼠标悬停时将路径数据更改为无。在鼠标移出时，我想将值更改为其他值。

我的代码有什么问题？

这是我尝试过的：

HTML：

<button id="buttonjs">
    <svg width="10" height="10">
        <g fill-rule="evenodd">
            <path id="pathjs"  d="M0 5h7"></path>
        </g>
    </svg>
    </button>

JS：

document.getElementById("buttonjs").onmouseover = function() {mouseOver()};
document.getElementById("buttonjs").onmouseout = function() {mouseOut()};
        
        function mouseOver() {
          document.getElementById("pathjs").getAttribute('d, 0');
        }
        
        function mouseOut() {
          document.getElementById("pathjs").getAttribute('d, M0 5h7');
        }

标签： javascripthtml

Answer 1

.setAttribute('d', 'M0 5h7')

 
document.getElementById("buttonjs").onmouseover = function() {
  mouseOver()
};


document.getElementById("buttonjs").onmouseout = function() {
  mouseOut()
};
        
function mouseOver() {
  document.getElementById("pathjs").setAttribute('d', ' 0');
}

function mouseOut() {
  document.getElementById("pathjs").setAttribute('d', 'M0 5h7');
}

Button
<button id="buttonjs">
    <svg width="10" height="10">
        <g fill-rule="evenodd">
            <path id="pathjs"  d="M0 5h7"></path>
        </g>
    </svg>
</button>