SVG和javascript/jQuery交叉引用

SVG and cross reference with javascript/jQuery

本文关键字：引用 jQuery javascript SVG      更新时间：2023-09-26

想象一下这种情况:

<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/

那不可能。将<use>视为此处的引用项。如果你改变引用的项目，那么所有的<use>实例将会改变。

SVG规范的作者已经注意到人们经常想要做这类事情，并且有一个SVG参数化建议可能成为SVG 2的一部分。参数化建议中的例子是用javascript创建的，所以你现在可以这样做，如果你复制那里的机制。

相关文章：