Question

这是我的svg文件

next.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文件中更改.inner颜色的基本jQuery。我究竟做错了什么？

似乎#objsvg选择器根本没有内部类，因为$（“＃objsvg”）。hasClass（“inner”））;返回false。

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

Answer 1

ID无法在父对象或对象上运行，您需要使用类似于崇高文本的内容打开SVG，并为您尝试操作的任何路径添加var re=new RegExp("^38\d{10}$"); 。

e.g ..

id="objsvg"

看到更新的js小提琴，弹出你的控制台 jsfiddle.net/xaLkvc27/12

Answer 2

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

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

Example Fiddle

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

2 个答案: