Как я могу добиться изменения стиля "используемого элемента", определенного в defs, посредством скриптов? Я пытался переместиться в рабочие интерфейсы w3c, но я проиграл в этом лабиринте
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100"
height="100"
id="svg1">
<defs>
<g id="minchia" onclick="color(evt)">
<rect width="50" height="50" style="fill:#ffff6e;stroke:#ee1400;stroke-width:3" />
</g>
</defs>
<script type="text/javascript">
<![CDATA[
function color(evt)
{
node = evt.target.correspondingUseElement;
alert(node.getAttributeNS(null, "style")); /* empty! */
alert(node.getAttributeNS("http://www.w3.org/1999/xlink", "style")); /* empty! */
node.setAttributeNS("http://www.w3.org/1999/xlink", "fill", "blue"); /* nothing */
node.setAttributeNS(null, "fill", "blue"); /* nothing */
}
]]>
</script>
<use xlink:href="#minchia" id="frufru" x="10" y="10" />
</svg>
Обновление
Еще одна вещь: что, если ссылочный элемент - это "g", который содержит 2 других элемента, таких как прямоугольник и текст? Как установить атрибут для правильного дочернегоNode (с помощью методов DOM)? В этом примере setAttribute формирует первый дочерний элемент ссылочного элемента. Что, если мне нужно было создать второй?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1000"
height="1000"
id="svg1">
<defs>
<g id="test" onclick="color(evt)" >
<rect
width="54"
height="58"
x="1.5"
y="1.5"
id="rect5" />
<text
x="-34"
y="47"
transform="matrix(0.66777386,-0.74436421,0.74436421,0.66777386,0,0)"
id="text2987"
style="font-size:30px;fill:#ffffff;stroke-width:0px">JC!</text>
</g>
</defs>
<script type="text/javascript">
<![CDATA[
function color(evt)
{
node = evt.target.correspondingUseElement;
node.setAttributeNS(null, "style", "fill:blue");
}
]]>
</script>
<use xlink:href="#test" id="frufru" x="10" y="10" style="fill:#000000" />
</svg>