다른 사용 요소에 대한 defs 요소의 속성 변경

Question

두 개의 원이있는 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 "/> 

감사합니다.

Answer 1

요소의 특정 속성 (cx, cy, r)은 변경할 수 없지만 list의 모든 속성은 <set ... >을 사용하여 변경할 수 있습니다. 예를 들어 "불투명도". 여기에 서클을 위해 그것을 변경하는 방법입니다 (힌트 : 당신이 오페라 나 크롬이 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> 

난이 도움이되기를 바랍니다 있습니다.