从 HTML 加载时嵌入 <image> 的 SVG 中的相对路径 [重复]答案

【问题标题】：Relative path in SVG to embed <image> when loaded from HTML [duplicate]从 HTML 加载时嵌入 <image> 的 SVG 中的相对路径 [重复]
【发布时间】：2021-06-27 08:36:02
【问题描述】：

我创建了一个嵌入图像的 SVG。我这样做是因为我希望描述是可扩展的。问题是，当我仅在 chrome 中加载 SVG 时，会显示图像。但是，当 svg 嵌入到 html 中的 img 标签中时，我看不到图像。另一方面，当我在 html 文件中编写 svg 代码时，会显示图像。

我认为问题可能是路径问题，但我不确定，因为我没有显示任何错误。
SVG 和 IMG 在同一个文件夹中。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1189.851" 
height="539.932">
<image overflow="visible" width="1190" height="540" href="/pics/mashup/e-55211-10-piww-000.png" 
transform="translate(0 -.034) scale(.9999)"/>
<g stroke="#1D1D1B" stroke-width="4.693" stroke-miterlimit="10">
<path fill="#FFF" d="M998.689 395.155l-10.44 21.628-67.39-33.204 10.454-21.633z"/>
<path fill="#FFF" d="M911.808 448.549l-22.247-8.621 26.866-70.699 22.247 8.625zM889.081 
449.676h23.832v36.11h-23.832z"/>
<path fill="#FFF" d="M920.424 447.646c-2.273 10.825-12.828 17.741-23.553 15.44-10.729-2.301-17.576-12.942- 
15.299-23.79 2.283-10.839 12.828-17.75 23.563-15.45 10.715 2.305 17.572 12.952 15.289 23.8zM1012.159 
414.767c-4.812 9.959-16.71 14.093-26.559 9.24-9.863-4.854-13.955-16.857-9.148-26.825 4.804-9.959 16.696- 
14.089 26.555-9.239 9.858 4.857 13.951 16.861 9.152 26.824zM946.415 380.806c-3.928 10.345-15.413 15.514- 
25.66 11.55-10.229-3.969-15.34-15.577-11.417-25.917 3.933-10.34 15.422-15.514 25.656-11.545 10.248 3.968 
15.362 15.564 11.421 25.912z"/>
<path fill="none" stroke-linecap="round" d="M980.243 420.437c-6.976 7.153-6.77 18.754.453 25.931M1009.065 
446.372c6.972-7.159 6.774-18.75-.444-25.94"/>
</g>

我都试过了，当从 img 标签加载时它们不起作用，但在浏览器中打开或检查元素时起作用：

href="/pics/mashup/e-55211-10-piww-000.png"
href="e-55211-10-piww-000.png"

这就是我想要的工作方式。

<li class="c-linkedarea" data-content="img2 img" data-display="flex">
   <img src="/pics/mashup/e-55211-10-piww-000.svg" alt="Microwall VPN Funktionsgrafik">
</li>

提前致谢

【问题讨论】：

看看使用对象元素stackoverflow.com/a/4482962/13772586
非常感谢，这种方法有效！您可以将其发布为答案，如果您不自己回答，因为我看到很多人在没有答案的情况下搜索它。
好的，我会把它作为答案发布并自己详细说明一下

标签： html image svg

【解决方案1】：

Erik Dahlström 在他的帖子here 中完美解决了您的问题

以下是CSS tricks 对此的评价：

如果“内联”SVG 不适合您（请记住，它确实有一些合法的缺点，例如难以缓存），您可以链接到 SVG 文件并保留使用 CSS 影响其部分的能力。

基本上，您需要将 svg 源代码放入 html <object> 元素中，如下所示：

<object data="pathToYourSVG.svg" type="image/svg+xml">
  <img src="backUpImgFileIfSVGDoesNotWork.jpg" />
</object>

【讨论】：