Question

我正在尝试将SVG用作CSS背景图像，并且除了使用use导入外部文件外，其他所有功能都可以正常工作。

这是我所拥有的：

CSS和HTML：

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

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

然后shapes/shape1.svg文件：

<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#build"/>
</svg>

它引用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>

但是，当我渲染所有内容时，它仅显示一行，而不显示两行。

我尝试了一些事情。我尝试删除defs并直接加载，就像这样：

<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

我尝试过../parts/part1.svg等。此外，我直接从文件系统运行此文件，因此路径为：file:///Users/me/Desktop/test/index.html。我在Web控制台中没有收到任何错误。任何帮助将不胜感激！

我在Chrome上，目前仅在乎此功能。

Answer 1

当将SVG用作图像时，出于隐私原因，SVG文件必须是自包含的。

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

或者，不要将SVG用作背景图像，也不要通过object或iframe标签将其嵌入或直接插入。

SVG`use`正在渲染空白图像

1 个答案: