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

How to access an svg inner id and have CSS change the fill color of that id?

本文关键字：id CSS 颜色 填充 并让 访问 内部 svg 何访问      更新时间：2023-09-26

这是我的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;
}

这是我在svg文件中更改.intern颜色的基本jQuery。我做错了什么？

由于$（"#objsvg"）.hasClass（"inner"）；返回false。

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

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

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

Fiddle 示例

ID在父对象或"对象"上不起作用，您需要用类似于高级文本的东西打开SVG，并为您试图操作的任何路径添加id="objsvg"。

例如

<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 id="objsvg" 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>

查看更新的js fiddle，也打开你的控制台jsfiddle.net/xaLkvc27/12

相关文章：