Question

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

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

这里是小提琴（您可以向下滚动到使用元素以查看演示）：

为什么会这样？如何在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>的内容。

Answer 2

你看不到它，因为它们是叠加的...... =）

<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="0" y="0" />
  </g>

  <!--  following works: -->

  <use xlink:href="#icon2" x="100" y="50" />


  <!--  why???? -->

SVG：<use>元素在嵌套在g中时不起作用（使用小提琴！）</use>

2 个答案: