Question

我有一个带2个圆圈的SVG。实际上，他们只使用一个名为s1的“def”。如何从一个圆圈（使用）更改属性。例如，我想在使用特定的“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 "/>

提前致谢。

Answer 1

您无法更改元素的特定属性（cx，cy，r），但您可以使用<set ... >更改此list上的所有属性。例如“不透明度”。以下是如何为您的圈子更改它（提示：如果您使用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>

我希望这会有所帮助。

为不同的使用元素更改defs元素的属性

1 个答案: