当我将 SVG 图像放入 html 时，它变得一团糟答案

【问题标题】：SVG image get's messed up when I put it into html当我将 SVG 图像放入 html 时，它变得一团糟
【发布时间】：2018-12-05 17:01:37
【问题描述】：

我最近开始使用 SVG，我喜欢它。那里很干净，很酷，很容易设计。

好吧，当我尝试将我的一个 svg 转换为 html 时，我偶然发现了一个问题（适用于我的每个 svg，除了这个）。如果我将其称为图像（<img src="hill.svg"></img>），它完全可以正常工作，但是当我尝试使用它时无论是使用 PHP(include 'hill.svg';) 还是直接在索引文件中传递它，它都会搞砸。 Here's an image. Messed up svg top left and the working on the full screen. Same file just that the working one is imbedded with "background-image"

背景看起来像是变成了“缺失的图像图标”之一

任何帮助将不胜感激。 SVG：https://pastebin.com/RsSAGv8M

【问题讨论】：

标签： php html svg

【解决方案1】：

您的 SVG 中链接了一些光栅图像：

它们可能在您的网络服务器上不可用。如果 SVG 链接为 <img>，则永远不会尝试检索它们，因为出于安全原因，所有图像都必须是独立的。但是当 SVG 嵌入到 HTML 页面中时，请求会失败。并且某些浏览器会显示“缺少图像”图标。

要么删除 SVG 文件中的 <image> 标记（看起来你没有错过它们的内容？），要么将它们作为数据 URL 嵌入。（我不知道 Adobe illustrator 是否足够好，不知道是否有实用程序可以做到这一点。）

【讨论】：