javascript - 如何访问 svg 内部 id 并让 CSS 更改该 id 的填充颜色？

Question

这是我的 svg 文件

下一个.svg

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <g class="next">
  <g>
   <polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
   <path fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
  </g>
 </g>
</svg>

这是我显示 svg 的基本 html

<div>
    <object id="objsvg" class="svgbtn" type="image/svg+xml" data="next.svg" onclick="changeSVGColor()"></object>    
</div>

这是我的 style.css 文件

.inner {
  fill: #000000;
}
.inner-new-color {
    fill: #ff00ff;
}

这是我的基本 jQuery，用于更改 svg 文件中 .inner 的颜色。我究竟做错了什么？

#objsvg 选择器似乎根本没有内部类，因为 $("#objsvg").hasClass("inner"));返回 false。

function changeSVGColor() {
    $("#objsvg").removeClass("inner");
    $("#objsvg").addClass("inner-new-color");
}

Answer 1

选择您想要按类别更改的部分。 $(".inner")

$(".inner").removeClass("inner").addClass("inner-new-color");

Example Fiddle