1

想象一下这种情况：

<svg height="0px">
    <defs>
        <g id="img">
            <circle id="cir1" cx="10" cy="10" r="5"/>
            <circle id="cir2" cx="30" cy="10" r="5" />
            <rect id="rect1" x="50" y="5" width="20" height="10" />
        </g>
    </defs>
</svg>
<div id="div1">
    <div id="div2" style="width:100px; height: 50px; border: 1px solid black">
        hey
    </div>
</div>
<svg height="20px"><use id="img1" xlink:href="#img"/></svg>
<svg height="20px"><use id="img2" xlink:href="#img"/></svg>
<svg height="20px"><use id="img3" xlink:href="#img"/></svg>
<svg height="20px">
    <circle id="cir5" cx="10" cy="10" r="5"/>
</svg>

id=img1可以使用 jQuery/javascript仅更改图像第一个圆圈的颜色吗？

就像是

$("#img1 #cir1").css("fill","red");

我试过了，但它不起作用。如果可以帮助这里的小提琴：http: //jsfiddle.net/MaxMarkson/q6Wep/

4

1 回答 1

0

那是不可能的。将<use>视为在此处绘制引用的项目。如果您更改引用的项目，则所有<use>实例都将更改。

SVG 规范的作者已经注意到人们经常想做这种事情，并且有一个SVG 参数化提案可能会成为 SVG 2 的一部分。参数化提案中的示例是使用 javascript 创建的，因此您可以这样做现在，如果您复制那里的机制。

于 2013-05-31T14:38:28.070 回答