为什么 xlink 与 svg 一起使用，而不是仅使用图像标签？答案

【问题标题】：Why is xlink used with an svg instead of just using an image tag?为什么 xlink 与 svg 一起使用，而不是仅使用图像标签？
【发布时间】：2022-05-06 17:18:17
【问题描述】：

我刚刚被告知将带有 svg 图像的 img 标签替换为带有 use 标签的 svg 标签，它现在以错误的颜色显示图像并破坏了 css（它需要一个非常奇怪的相对位置）。为什么在 xlink 中使用 svg 标签？将 svg 标签与 xlink 一起使用，我们有什么收获？

<img class='my-image' src='blah.svg' />

是原始代码。

<svg class='my-image'>
    <use xlink:href='#blah'></use>
</svg>

是新代码。它改变了图像的颜色并破坏了 css，但它确实显示了图像。

【问题讨论】：

请向我们展示您用于两种变体的代码，以及至少 SVG 本身的骨架。 “x-path”和什么有什么关系？
@ccprog 抱歉，问题是 x-path，但我的意思是 xlink。它与代码示例一起更正。

标签： svg

【解决方案1】：

第一个 (<img>) 指的是外部文件。整个文件按原样显示，没有机会重新设置样式。

第二个变体允许您在页面中包含 SVG，然后在整个页面中使用它的各个部分。因此，您可以包含一个带有十几个图标定义的 SVG。然后在页面的不同部分使用这些图标。如果需要，您还可以使用 CSS 重新设置图标的样式。

【讨论】：

好吧，当它是图像时，CSS 至少可以调整大小和定位它，但是你的观点很好地说明了使用第二种方法并只获取其中的一部分。我已经看到图标是这样做的，现在我更好地理解了我在看什么。