在SVG中，在对象中更改圆形填充

Change fill on circle, within an SVG, within an object

本文关键字：填充 对象 SVG      更新时间：2023-09-26

所以我选择创建一个对象来放置SVG对象，因为我想复制它100次或更多次。下面是SVG:

<svg xmlns="http://www.w3.org/2000/svg" class="ballsvg" viewBox="0 0 98 98">
    <g>
        <circle class="changeCircle" cx="50%" cy="51%" r="48%" stroke="red" stroke-width="3" fill="blue" />
        <text class="changeText" text-anchor="middle" x="50%" y="65%" font-family="Verdana" font-size="30" fill="white" ><tspan>0</tspan>  </text>
    </g>
</svg>

和我的JavaScript构建对象到div #svgMain:

for(var i=0; i<addingTo; i++){
   var obj = '<div class="clickBall" data-id="'+String(i+1+totalBalls)+'" ><object class="ball" data="ball.svg"></object></div>' 
   appendHTMLNodes += obj;
}

然后我在网上找到了如何动态更改对象上的文本:

$( "object.ball" ).each(function( index ) {
    var textNode = $(this.contentDocument);
    textNode = textNode.find(".changeText");
    textNode = textNode.children().first();
    textNode.text(index+1);
});

然后我想改变项目被点击时的填充颜色:

$(document).on('click', '.clickBall', function(event) {
    var mySVG = $(this).find("object.ball");
    mySVG = $(mySVG.contentDocument);
    mySVG = mySVG.find(".changeCircle");
    console.log(mySVG);
    mySVG.attr("fill", "#FF0000");
});

但是我不知道如何得到正确的元素，因为它从来没有改变填充，即使我可以改变文本之前。谢谢你的帮助。

可以直接选择.changeCircle，使用$(this)属性填充svg。试试下面的代码:

$(".changeCircle").on('click', function() {
    $(this).css({ fill: "#ff0000" });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" class="ballsvg" viewBox="0 0 98 98">
    <g>
        <circle class="changeCircle" cx="50%" cy="51%" r="48%" stroke="red" stroke-width="3" fill="blue" />
        <text class="changeText" text-anchor="middle" x="50%" y="65%" font-family="Verdana" font-size="30" fill="white" ><tspan>0</tspan>  </text>
    </g>
</svg>

更新:

tcoulson想要更新object标签内的SVG。以下是访问SVG object的方法:

$(function(){ 
    $("#obj").contents().find(".changeCircle").attr({"fill":"lime"}); 
    console.log($("#obj").contents().find(".changeCircle")); 
});
相关文章：