Изменить атрибуты из элементов defs для разных элементов использования

Question

У меня есть SVG с 2 кругами. Фактически, они используют только один «def», называемый s1. Как изменить атрибуты из одного круга (использование). Например, я хочу установить другой класс для элемента s1 при использовании определенным элементом «use».

<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 ... >. Например, «непрозрачность». Вот как изменить его для ваших кругов (подсказка: если вы откроете этот СВГ с оперы или хром, поместить курсор на третий круг):

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

Я надеюсь, что это помогает.