Html 如何引用收集到单个svg文件中的svg符号？

我有一个svg符号文件，下面是一个片段

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="oval" viewBox="0 0 60 60">
        <title>oval</title>
        <path ... />
    </symbol>
    <symbol id="rectangle" viewBox="0 0 512 512">
        <title>rectangle</title>
        <path ... />
    </symbol>
    <symbol id="star" viewBox="0 0 55.867 55.867">
        <title>star</title>
        <path ... />
    </symbol>
</svg>

结果是没有图像。如果我在整个网页中选择，图像应该在一个很大的块（~350 x 150 px）上，但是没有图像

---

比如说，如何在html中引用外部文件中的矩形？

您可以这样使用符号：

不需要

标记。它所做的只是给你一个空白区域。Insterad，指向文件及其符号的链接：

<svg class="icon">
    <use xlink:href="images/icons1.svg#size"></use>
</svg>

我就是这么想的，我就是这么做的。黑白样式，不显示。将问题重新创建为JSFIDLE或codepen来说明问题是html文档中嵌入的SVG吗？I jsut添加了

对象

条目。谢谢。300 x 150表示该款式不受欢迎。如何将样式表链接到标记？

svg.icon {
  width: 40px;
  height: 40px;
  color: black;
}

<svg class="icon">
    <use xlink:href="images/icons1.svg#size"></use>
</svg>