Question

我有以下简单的例子。它存储在 image.svg ：

中

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

我做错了什么？我似乎无法使其发挥作用。

Answer 1

如果您使用其他文档中的元素，则必须指定文档！

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

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

要从其他文档导入，您需要将引用放在xlink:href属性中的SVG文件中：

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

显然你需要在这里检查路径是否正确。请注意，任何版本的Internet Explorer都不支持此功能，但可以使用polyfill。

Answer 2

对于外部svg文件，你需要命名空间...我添加了一个填充来渲染圆圈，否则它将是透明的：

＆＃13;

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

＆＃13;

然后，当您引用它时，您需要为xlink使用正确的命名空间：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果您要引用外部文件，则需要将文件名放在#之前，例如image.svg#shape当然要确保路径正确。

请注意，并非所有浏览器都支持片段标识符 - 尤其是IE和Edge - 您需要为这些浏览器使用svg4everybody之类的javascript polyfill。

解决方法 - 仅使用svg内联

Answer 3

您需要在SVG中使用具有您想要使用的形状的use-tag：

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

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

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

3 个答案: