SVG`use`正在呈现空白图像

我正在尝试使用SVG作为CSS背景图像，并且除了使用

use

导入外部文件外，其他一切都正常工作

以下是我所拥有的：

CSS和HTML：

.shape1 {
  background: url("shapes/shape1.svg") no-repeat;
}

<div class="shape1"></div>

它引用了

parts/part1.svg

文件，其中包含以下内容：

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">  
  <defs>
    <path id="build" d="
      M 90 10
      l 0 180
      " fill="none" stroke="#000" stroke-width="1px"/>
  </defs>
</svg>

我还尝试过弄乱文件路径。我的目录结构如下：

index.html
shapes/
shapes/shape1.svg
parts/
parts/part1.svg

我试过

。/parts/part1.svg

，等等。。另外，我直接从文件系统运行它，因此路径是：

file:///Users/me/Desktop/test/index.html

。我在web控制台中没有收到任何错误。任何帮助都将不胜感激

---

我在Chrome上，现在只关心Chrome上的工作。

当SVG用作图像时，出于隐私原因，SVG文件必须是独立的

因此shape1.svg无法访问自身之外的任何内容。您必须将part1.svg嵌入shape1.svg

---

或者，不要将SVG用作背景图像，而是通过对象或iframe标记将其嵌入或将其内联。

将SVG用作CSS背景图像相当棘手。我建议阅读这篇文章：

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
  <path d="
    M 10 10
    l 0 180
    " fill="none" stroke="#000" stroke-width="1px"/>

  <use href="parts/part1.svg"/>
</svg>

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">  
  <path d="
    M 90 10
    l 0 180
    " fill="none" stroke="#000" stroke-width="1px"/>
</svg>

index.html
shapes/
shapes/shape1.svg
parts/
parts/part1.svg