Question

我有一个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>

我现在拥有的是

<object type="image/svg+xml" data="images/icons1.svg"></object>

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

我的样式表条目

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

结果为无图像。如果我在整个网页上进行选择，则应该有一个图片的大块（〜350 x 150 px），但没有图片。

我该如何在使用HTML的外部文件中引用rectangle？

Answer 1

不需要<object>标签。它所做的只是为您提供空白区域。 Insterad，链接到文件和中的符号：

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

Answer 2

您可以这样使用符号：<svg><use xlink:href="#rectangle"></use></svg>

我应该如何参考收集到单个svg文件中的svg符号？

2 个答案: