为什么SVG中的<use>标签不起作用？

我有以下简单的例子。它存储在image.svg：为什么SVG中的<use>标签不起作用？

<svg> 
 
     <defs> 
 
     <g id="shape"> 
 
      <circle cx="100" cy="100" r="100" /> 
 
     </g> 
 
     </defs> 
 
</svg>

但是，把这个代码的HTML文件不会加载任何东西。这是为什么？

<svg> 
     <use xlink:href="#shape" x="10" y="10" /> 
</svg>

我在做什么错？我似乎无法使其工作。

来源

2017-01-23 BarbuDorel

堆栈片段彼此隔离（以便在一个文档中的ID不会与其他文档的ID冲突）。一般来说，这应该是可能的。 –

你需要与你想使用的形状SVG内使用标签：

<svg> 
    <defs> 
     <g id="shape"> 
      <circle cx="100" cy="100" r="100" /> 
     </g> 
    </defs> 

    <use xlink:href="#shape" x="10" y="10" /> 
</svg>

来源

2017-01-23 14:58:38 rblarsen

你做了一个堆栈片段，但你一般不会。 –

我认为在同一个文档中的两个SVG也可以工作：https://jsfiddle.net/t31vgbaj/ – pawel

这个问题非常意味着该定义是在另一个文件中，虽然... – lonesomeday

如果您正在使用的元素从另一个文件，你必须指定文件！

<use xlink:href="#shape" x="10" y="10" />

这意味着“使用当前文档中的#shape元素”。

要从另一个文档导入，你需要把参考SVG文件中xlink:href属性：

<use xlink:href="image.svg#shape" x="10" y="10" />

显然，你需要检查的路径是正确的在这里。请注意，这在任何版本的Internet Explorer中都不受支持，尽管可以使用polyfills。

来源

2017-01-23 14:59:51 lonesomeday

您需要的命名空间外部SVG文件......我已经添加填充来呈现圆形，否则这将是透明的：

<svg xmlns="http://www.w3.org/2000/svg" > 
 
    <symbol id="shape" width="200" height="200" viewbox="0 0 200 200"> 
 
    <circle cx="100" cy="100" r="100" fill="currentColor" /> 
 
    </symbol> 
 
    <text y="20">Symbol above will not render unless referenced by use element</text> 
 
</svg>

然后当你引用它，你需要使用正确的命名空间的XLink：

svg.defs-only { 
 
    display:block; position: absolute; 
 
    height:0; width:0; margin: 0; padding: 0; 
 
    border: none; overflow: hidden; 
 
} 
 

 
svg { 
 
    color: orange; 
 
    stroke: red; 
 
} 
 

 
.purple { 
 
    color: purple; 
 
    stroke: black; 
 
}

<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" > 
 
    <symbol id="shape" width="50" height="50" viewbox="0 0 50 50"> 
 
    <circle cx="25" cy="25" r="20" fill="currentColor" stroke="inherit" /> 
 
    </symbol> 
 
</svg> 
 

 
<svg xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <use xlink:href="#shape" x="10" y="10" /> 
 
    <use xlink:href="#shape" x="80" y="10" class="purple" /> 
 
</svg>

如果您正在引用外部文件，则需要将文件名放在#image.svg#shape确保您获得正确的路径。

请注意，并非所有浏览器都支持片段标识符 - 特别是IE和Edge--您需要为这些浏览器使用像svg4everybody一样的javascript填充。

解决方法 - 使用SVG内联只

来源

2017-01-23 17:08:03 Ruskin

为什么SVG中的<use>标签不起作用？

回答

相关问题