Question

我写了这段代码，但是当鼠标结束时它无法改变rect的颜色，有人能告诉我哪里出错了，我该怎么办呢？“

Answer 1

填充不会填充颜色，因此您使用style.fill=。这是它自己的风格

function a(){
var ab=document.getElementById('haha');
ab.style.fill ="#FFAEB9";
}
function b(){
var ab=document.getElementById('haha');
ab.style.fill="#FFFF00";
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 288 560" style="enable-background:new 0 0 288 560;" xml:space="preserve">
<rect id="haha" x="83.4" y="130.7" width="121.2" height="115.2" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>

</svg>

Answer 2

您正在访问color规则，该规则将更改HTML元素的文本颜色。只需在fill属性上使用style规则。

＆＃13;

function a(){
  var ab=document.getElementById('haha');
  ab.style.fill = "#FFAEB9";
}
function b(){
  var ab=document.getElementById('haha');
  ab.style.fill = "#FFFF00";
}

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0" style="enable-background:new 0 0;" xml:space="preserve">
  <rect id="haha" x="0" y="0" width="120" height="120" style="fill:#FFFF00" onmouseover="a()" onmouseout="b()"/>
</svg>

＆＃13;

当鼠标移过js时如何更改rect的颜色？

2 个答案: