在对象内

Question

所以我选择创建一个对象来放置一个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");
});

但我无法弄清楚如何获得正确的元素，因为它永远不会改变填充，即使我之前可以更改文本。 提前感谢您的帮助。

Answer 1

您可以直接选择.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")); 
});