1

我有一个网站。文件结构如下：
-index.html
-imgs
--sprite.svg

当我在 vscode 中使用 live-server 在端口上打开站点时，会出现 svg。 在此处输入图像描述

但是当我直接从文件中打开它时，它并没有出现。

在此处输入图像描述

index.html中的svg代码如下：

<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>

我不明白原因？

4

2 回答 2

1

尝试这个：

首先你需要加载一个带有图标的精灵
<object type="image/svg+xml" data="imgs/sprite.svg"></object>

然后使用精灵中的图标

<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>

更新

正如@by-brt 评论的那样

我在哪里写这段代码

将代码添加到 Index.html

<!DOCTYPE html>
<html lang="en"> 
<body>
<object type="image/svg+xml"  data="imgs/sprite.svg"></object>
<div>
<svg class="sec-workflow__img">
      <use xlink:href="imgs/sprite.svg#planning"></use>
  </svg>
 </div> 
</body>
</html>

于 2020-10-18T15:25:00.467 回答
-3

在浏览器无法呈现 SVG 时显示的 PNG 文件。因此，因此将您的 svg 转换为 png。如果您在 Windows 上，则可以在 Windows 商店中获取图像转换器。

如果您使用 linux，则可以使用 imagemagics 将文件从 svg 转换为 png。

于 2020-10-18T12:00:54.543 回答