jsでマウスオーバーすると、rectの色を変更する方法は？

Question

私はこのコードを書く、しかし、私はそれを修正することができますどのようにしてください間違っているとどこマウスオーバー、誰もが私に言うことができるとき、それは矩形の色を変更することはできません判明？ `

<?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()"/> 
<script type="text/javascript"> 
function a(){ 
var ab=document.getElementById('haha'); 
ab.style.color="fill:#FFAEB9"; 
} 
function b(){ 
var ab=document.getElementById('haha'); 
ab.style.color="fill:#FFFF00"; 
} 
</script> 
</svg> 

Answer 1

塗りつぶしはしていませんあなたがstyle.fill=を使用するので、それは塗りつぶしに行く色で行く。それはあなたがHTML要素のテキストの色を変更しますcolorルールを、アクセスしている

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

独自のスタイルです。 styleプロパティのfillルールを使用してください。

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

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