问题描述
我有一个网站。文件结构如下:
-index.html
-imgs
--sprite.svg
当我使用vscode中的实时服务器在端口上打开站点时,出现svg。
但是当我直接从文件中打开它时,它不会出现。
index.html中的svg代码如下:
<svg class="sec-workflow__img">
<use xlink:href="imgs/sprite.svg#planning"></use>
</svg>
我不明白原因?
解决方法
尝试一下:
首先,您需要使用图标加载精灵<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>
,
在浏览器无法呈现SVG时显示的PNG文件。 因此,将您的svg转换为png。 如果您在here.
的Windows上,则可以在Windows商店中获取图像转换器。如果使用linux,则可以使用imagemagics将文件从svg转换为png。