0

私は2つの円を持つSVGを持っています。実際、s1 と呼ばれる単一の「def」のみを使用します。1 つのサークルから属性を変更するにはどうすればよいですか (使用)。たとえば、特定の「use」要素で使用するときに、要素 s1 に別のクラスを設定したい。

<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
    <!-- A circle of radius 200 -->
    <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
</defs>
<use x = "100" y = "100" xlink:href = " #s1 "/>
<use x = "100" y = "650" xlink:href = " #s1 "/>

前もって感謝します。

4

1 に答える 1

1

要素の特定の属性 (cx、cy、r) は変更できませんが、 を使用してこのリスト<set ... >のすべての属性を変更できます。たとえば「不透明度」。円の変更方法は次のとおりです (ヒント: Opera または chrome でこの svg を開く場合は、カーソルを 3 番目の円の上に置きます)。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 1000 1000" version="1.1" height="1000px" width="1000px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<g>
    <rect y="0" width="1000" fill="blue" x="0" height="1000" />

    <defs>
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
    </defs>

    <use id = "one" x = "100" y = "100" xlink:href = "#s1"/>
    <use id = "two" x = "100" y = "500" xlink:href = "#s1"/>
    <use id = "three" x = "500" y = "100" xlink:href = "#s1">
        <set attributeName="opacity" from="1" to="0.7"  begin="mouseover" end="mouseout"/>
    </use>

    <set xlink:href="#two" attributeName="opacity" from="1" to="0.2"  begin="three.mouseover" end="three.mouseout"/>
    <set xlink:href="#one" attributeName="opacity" from="1" to="0.4"/>

</g>
</svg>

これが役立つことを願っています。

于 2013-08-08T14:06:00.620 に答える