更改 use 元素上的 defs 中定义的属性

如何通过脚本来更改 defs 中定义的“use element”的样式？我试图进入 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>

Update

还有一件事：如果引用的元素是包含 2 个其他元素（如矩形和文本）的“g”怎么办？如何设置正确的 childNode 的属性（当然是通过 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>

正如你所看到的我的测试页 http://phrogz.net/svg/use_style_precedence.xhtml，如果您定义内部元素的视觉样式<defs>文档的一部分，您不能覆盖该样式<use>例如，不通过视觉属性，style属性，或应用于<use>.

此外，您不能在<use>将样式级联到源元素的元素；为此，您必须使用 CSS 样式。

你必须：

1. 确保您定义的元素没有应用视觉样式，并且

2. 使用 CSS 或设置手动解析或创建style属性，例如

   node.setAttribute('style','fill:blue');
   

As 此处注明 https://stackoverflow.com/questions/4882890/svg-in-xhtml5-setting-attributes-with-proper-namespace你可以使用setAttribute(...) or setAttributeNS(null,...)对于 SVG 属性。

Update: 回答你的第二个问题：

如果引用的元素是包含 2 个其他元素（如矩形和文本）的“g”怎么办？

您不能使用 CSS 规则来选择 a 的伪子级<use>;它们根本不存在。但是，您可以做的是应用您想要在内部保留的不变样式<def>然后应用style你想要在<use>.

例如：

<defs>
  <g id="foo">
    <!-- Every rect instance should be filled with blue -->
    <rect width="54" height="58" x="1.5" y="1.5"
          fill="blue" />
    <!-- I want to be able to change text color per use
         so I must be sure not to specify the fill style -->
    <text x="-34" y="47" transform="matrix(0.668,-0.744,0.744,0.668,0,0)"
     style="font-size:30px;stroke-width:0px">JC!</text>
  </g>
</defs>
<use xlink:href="#foo" style="fill:orange" transform="translate(0,-100)" />
<use xlink:href="#foo" style="fill:yellow" transform="translate(0, 100)" />

仅当您希望所有可更改项目的属性都以相同方式设置时，此方法才有效。

与 HTML 不同，SVG 中的标记is演示文稿。我上面建议的是一些碰巧起作用的黑客，但总的来说<use>元素旨在实例化定义的完整外观。如果您需要每个实例的自定义外观，也许您应该考虑克隆元素、修改属性并将它们添加到文档中，而不是黑客攻击<use>.