0

我有一个带有 2 个圆圈的 SVG。事实上，他们只使用一个名为 s1 的“def”。如何仅从一个圆圈（使用）更改属性。例如，当由特定的“使用”元素使用时，我想为元素 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，请将光标放在第三个圈子上）：

<?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 回答