javascript - SVG:<use> 元素嵌套在 g 中时不起作用(用 fiddle !)

Question

我需要在我的 SVG 图形中显示使用元素。

当我尝试在 g 元素中使用它们时，它不起作用。 在一个小演示中，use 元素似乎在 g 元素之外工作。

这是 fiddle (您可以向下滚动到使用元素以查看演示):

http://jsfiddle.net/3dacnxdb/2/

为什么会这样？如何从 g 元素中显示它们？ (我的图形由许多模块组成，我需要 gs 将它们分开)

感谢您的帮助!

<svg id="graphic">
  <defs>

    <clipPath id="icon-cp">
      <rect x="0" y="0" width="150" height="100" />
    </clipPath>

    <image id="icon-sprite" width="969" height="293"
    xlink:href="http://i.stack.imgur.com/TPx5h.png" />

    <g id="icon2" clip-path="url(#icon-cp)">
      <use xlink:href="#icon-sprite" transform="translate(-240,0)" />
    </g>
  </defs>

  <!--     ----------------------------------------
    Here is the question:
    
    the first use element is not displayed.
    The second one is displayed. (the elements are under this text)
    
    Why does it not work? 
    How can a use element be used within nested g elements?

    (to test it you can comment out the second use element, 
    even tough both use elements have the same attributes 
    no icon is visible anymore)
    ---------------------------------------- -->

  <!--  following does not work: -->
  <g id="testg">
    <use xlink:href="#icon2" x="100" y="50" />
  </g>

  <!--  following works: -->

  <use xlink:href="#icon2" x="100" y="50" />


  <!--  why???? -->

Answer 1

它确实有效。你的jsfiddle和你的内联代码不一样(使用的x和y不一样)。

如果您在 <g> 中设置 x 和 y 值和外面一样，它会起作用。在非工作情况下，您将剪掉 <use> 的内容用你的剪辑路径。