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=img1jQuery/javascriptを使用して、画像の最初の円の色のみを変更することは可能ですか?

何かのようなもの

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

試しましたが、うまくいきません。ここにフィドルがあります：http://jsfiddle.net/MaxMarkson/q6Wep/

4

1 に答える 1

0

それは可能ではありません。<use>ここで参照アイテムをペイントしていると考えてください。参照されたアイテムを変更すると、すべての<use>インスタンスが変更されます。

SVG 仕様の作成者は、人々がしばしばこの種のことをしたいと考えており、SVG 2 の一部になる可能性のあるSVG パラメーター化の提案があることに気付きました。パラメーター化の提案の例は JavaScript を使用して作成されているため、そのようにすることができます。そこにメカニズムをコピーすると、今すぐ。

于 2013-05-31T14:38:28.070 に答える