更改defs on use元素中定义的属性 [英] Change attributes defined in defs on use element

问题描述

如何通过脚本更改在defs中定义的使用元素"的样式?我试图在w3c工作草案界面中移动，但是迷路了

How can I achieve changing the style of an "use element", defined in defs, through scripting? I was trying to move in the w3c working draft interfaces, but I lost in that labyrinth

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

更新

另一件事:如果引用的元素是包含两个其他元素(例如rect和text)的"g"，该怎么办?如何设置正确的childNode的属性(当然是通过DOM方法)? 在此示例中，setAttribute设置了所引用元素的第一个子元素的样式.如果我必须为第二个样式设置样式怎么办?

One more thing: what if the referenced element is a "g" which contains 2 other elements, like a rect and a text? How do I set the attribute for the right childNode (through DOM methods off course)? In this example, the setAttribute is styling the first child of the referenced element. What if I had to style the second one?

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

推荐答案

您可以在我的测试中看到页，如果您在文档的<defs>部分中定义了元素的外观样式，则不能通过，style属性或CSS类覆盖<use>实例上的元素的外观样式应用于<use>.

As you can see in my test page, if you define the visual style of an element inside the <defs> section of a document you cannot override that style on the <use> instance, not through a visual attribute, style attribute, or CSS class applied to the <use>.

此外，您不能在<use>元素上使用视觉属性来将样式级联为源元素.您必须为此使用CSS样式.

Further, you cannot use a visual attribute on the <use> element to cascade styles down to elements of the source; you must use CSS styling for this.

您必须:

1. 确保您定义的元素未应用任何视觉样式，并且

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

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

作为在此处注明，您可以使用SVG属性的setAttribute(...)或setAttributeNS(null,...).

As noted here you can use either setAttribute(...) or setAttributeNS(null,...) for SVG attributes.

更新:要回答第二个问题:

Update: To answer your second question:

如果所引用的元素是包含其他2个元素(如rect和文本)的"g"怎么办?

您不能使用CSS规则来选择<use>的伪子级；他们根本不存在.但是，您可以做的是在<def>中应用要保留的不变样式，然后在<use>上应用所需的style.

You cannot use CSS rules to select the pseudo-children of a <use>; they simply don't exist. What you can do, however, is apply the unchanging styling that you want to preserve inside the <def> and then apply the style you want on the <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)" />

仅当您希望所有可变项的属性设置都相同时，此选项才有效.

This only works if you want all changeable items to have their attributes set the same way.

与HTML不同，SVG 中的标记是.上面我建议的是可以正常工作的一些技巧，但通常<use>元素旨在实例化定义的完整外观.如果每个实例都需要自定义外观，则也许应该考虑克隆元素，修改属性并将其添加到文档中，而不用修改<use>.

Unlike HTML, the markup in SVG is the presentation. What I've suggested above is a bit of a hack that happens to work, but in general <use> elements are designed to instantiate the full appearance of a definition. If you need custom appearance per instance, perhaps you should consider cloning elements, modifying properties, and adding those to the document instead of hacking a <use>.

这篇关于更改defs on use元素中定义的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！