html 不带ID的SVG外部引用

6ioyuze2 于 2023-01-24 发布在其他

关注(0)|答案(4)|浏览(105)

我有一个简单的SVG文件，其内容如下(icon.svg)：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="..."/>
</svg>

如何在不添加id属性的情况下为它创建一个外部引用？

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icon.svg"></use>
</svg>

4条答案

迟到了......如果您希望有一个对没有id的svg的外部引用，可以使用HTML的<object>
示例用法：

<object data="pathToSome.svg" width="20" height="20"> </object>

您可以将其用作常规图像，如下所示：<img src="example.svg">或：<link rel="icon" href="example.svg">

非常简单，对于页面上的普通svg用途：

<img src="/path/to/svg" width="" height="">

站点图标用途：

<link rel="icon" href="/path/to/svg">

希望这有帮助！

因为svg通常都是很小的文件--尤其是一个小图标--所以我总是把它们存放在我的img文件夹里。我把一个favicon [浏览器标签]放在index.html的同一个文件夹里。它只会让你更容易把自己的svg存放在你的服务器空间里，也可以防止外部主机离线或取下那个文件时出现任何问题。希望这能有所帮助。