我的 Adobe Illustrator SVG 图像消失了，不会再出现在 chrome 上答案

【问题标题】：My Adobe Illustrator SVG image disappeared and will not show up on chrome anymore我的 Adobe Illustrator SVG 图像消失了，不会再出现在 chrome 上
【发布时间】：2016-10-02 22:13:35
【问题描述】：

我不知道发生了什么，我在 illustrator 中创建了一个 svg 图像，保存它，将它发布到我的 wordpress 网站，一切顺利。

((它应该显示在this page.的文本框下方

我调整了屏幕大小，图像消失了，现在无论我做什么，它都不会显示。

此外，问题似乎仅限于 Chrome，我尝试创建多个其他 svg 图像，但它们都不会在 chrome 上显示，而它们都可以在其他网络浏览器上运行。

我还在我的 htaccess 中添加了代码，但还是没有运气。我知道这行不通，因为我之前在我的 wordpress 网站上发布了 svg，没有任何问题...

我的插画设置如下：

svg 配置文件：svg 1.1
字体类型：转换为轮廓
图片位置：嵌入
高级选项 - css 属性：表示属性
小数位：5，unicode 8 - 已选中响应框

/////// 这是 svg 代码的 google 文档链接

SVG CODE - Google Docs

编辑** 现在图像没有显示在任何浏览器中，我没有更改任何内容。

【问题讨论】：

在这里工作正常。 win7下Chrome 52.0.2743.116 m（64位）。我将您的第二个链接中的文本复制到一个文本文件中，并在浏览器中看到一个 Course Trunk 徽标。它反应灵敏，占用 100% 的可用高度..

标签： html css google-chrome svg

【解决方案1】：

如果您在浏览器开发工具中检查 <img> 元素，您会发现问题所在。浏览器将 SVG 的 <img> 调整为 (0 x 0)。

以下是您网页中的相关 HTML：

<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
     class="mpc-transition attachment-full" alt="coursetrunksample1">

您尚未在此处指定 width 和 height。但是您拥有页面中包含的图像的 PNG 版本。通常，在 HTML 中，图像默认为位图的自然/固有大小。但是 SVG 并不总是具有这些值。而你的没有。检查 SVG 的内容。你会看到它没有宽度或高度。

如果你为<img> 标签添加宽度和高度，一切都会好起来的。

<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
     class="mpc-transition attachment-full" alt="coursetrunksample1" 
     width="300" height="250">

【讨论】：