适用于 Mac 的 firefox 53 无法加载内联 SVG 图像答案

【问题标题】：firefox 53 for the Mac fails to load inline SVG images适用于 Mac 的 firefox 53 无法加载内联 SVG 图像
【发布时间】：2017-09-23 23:08:45
【问题描述】：

我正在开发一个使用 SVG 图标的网络应用程序。图标存储在 json 文件中，并使用 jQuery 动态加载。

这种方法在我测试过的所有浏览器中都能正常工作，即 Safari、Chrome、Opera、Roccat、Vivaldi、webkit 和 Safari Technology Preview。

我无法在 Windows 浏览器中测试该页面，因为我的电脑最近在我身上死机了，但它过去也可以正常工作，至少在 Edge 上是这样。

但是，Mac 版 Firefox 53（以及更早的版本）拒绝加载这些图像。在控制台中，我收到以下错误消息：“无效的 URI。媒体资源加载失败。”

我不确定我的 URI 有哪些无效之处，因为它们似乎适用于其他浏览器。

您可以在http://www.immersive-tours.ch 亲自查看此问题。只需先使用 Firefox 以外的其他工具加载页面，然后再使用 Firefox。

您会在下面看到从 json 文件加载的图标之一。

"search": "&lt;svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='48' height='48' viewBox='0, 0, 48, 48'&gt; &lt;g id='Layer_1' transform='translate(-150.523, -113.593)'&gt; &lt;g id='search.svg'&gt; &lt;g&gt; &lt;g&gt; &lt;path d='M171.376,124.593 C176.736,124.593 181.081,128.938 181.081,134.298 C181.03,136.306 180.488,138.26 179.293,139.898 L186.629,147.23 C187.349,147.95 187.699,149.453 186.979,150.174 C186.259,150.894 184.896,150.613 184.176,149.893 L176.629,142.449 C175.087,143.49 173.225,143.984 171.376,144.003 C166.017,144.003 161.672,139.658 161.672,134.298 C161.672,128.938 166.017,124.593 171.376,124.593 z M171.304,127.625 C167.714,127.625 164.804,130.535 164.804,134.125 C164.804,137.715 167.714,140.625 171.304,140.625 C174.893,140.625 177.804,137.715 177.804,134.125 C177.804,130.535 174.893,127.625 171.304,127.625 z' fill='#FFFFFF'/&gt; &lt;path d='M171.376,124.593 C176.736,124.593 181.081,128.938 181.081,134.298 C181.03,136.306 180.488,138.26 179.293,139.898 L186.629,147.23 C187.349,147.95 187.699,149.453 186.979,150.174 C186.259,150.894 184.896,150.613 184.176,149.893 L176.629,142.449 C175.087,143.49 173.225,143.984 171.376,144.003 C166.017,144.003 161.672,139.658 161.672,134.298 C161.672,128.938 166.017,124.593 171.376,124.593 z M171.376,125.593 C166.569,125.593 162.672,129.491 162.672,134.298 C162.672,139.106 166.569,143.003 171.366,143.003 C173.102,142.985 174.752,142.51 176.069,141.62 L176.748,141.162 L177.331,141.737 L184.883,149.186 C185.304,149.607 186.033,149.705 186.272,149.466 C186.495,149.243 186.358,148.374 185.922,147.937 L178.586,140.605 L177.98,139.999 L178.485,139.308 C179.502,137.916 180.033,136.194 180.081,134.298 C180.081,129.491 176.184,125.593 171.376,125.593 z M171.304,126.625 C175.446,126.625 178.804,129.983 178.804,134.125 C178.804,138.267 175.446,141.625 171.304,141.625 C167.162,141.625 163.804,138.267 163.804,134.125 C163.804,129.983 167.161,126.625 171.303,126.625 L171.304,126.625 z M171.304,127.625 L171.303,127.625 C167.714,127.625 164.804,130.535 164.804,134.125 C164.804,137.715 167.714,140.625 171.304,140.625 C174.893,140.625 177.804,137.715 177.804,134.125 C177.804,130.535 174.893,127.625 171.304,127.625 z' fill='#FFFFFF' fill-opacity='0.01'/&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/g&gt; &lt;/svg&gt; ",

这个和其他的图标是用这个函数加载的：

function loadIcons() {
	$.getJSON("/sys/icons/toursListing/listing.json", getIcons);
	function getIcons(icons) {
		$("#logo").attr("src", icons["logo"])
		$("#designImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['design']);
		$("#suggestionsImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['suggestions']);
		$("#swissToursMapImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['toursMap']);
		$("#searchImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['search']);
		$("#settingsImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['settings']);
		$("#onArrivalImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['onArrival']);
		$("#myToursImg").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['myTours']);
		$("#showCp img").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['showCp']);
		$("#hideCp img").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons['hideCp']);
		$("#closeSuggestionsIcon").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["closeButton"]);
		$("#hideToursMap img").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["hideTab"]);
		$("#hideSearchBtn").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["hideTab"]);
		$("#closeDesignIcon").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["closeButton"]);
		$("#liveScapes").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["liveScapes"]) 
		$("#contact img").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["contact"]);
		$(".arrow").attr("src", "data:image/svg+xml; charset=UTF-8, " + icons["rightArrow"]);
	};
}

这就是山雀的全部。

【问题讨论】：

那有点离题了，但在您网站的移动版本上，隐藏底部栏的箭头可能在左侧 90 度改变，动画向右隐藏 - 它看起来像回到顶部 Button but isnt - 对 UX/UI 建议感到抱歉，但现在这伤害了我。
直接放到你的HTML源码中。貌似是路径问题，“无效的URI”：
@Felix Häberle：很好，谢谢。我会让控制面板水平消失而不是垂直消失，但是那个图标必须保留在那里，在右边。定位这些图标并非易事，更改会破坏页面间的空间一致性。
@Robert：“它包含一个 # 字符......”不太清楚你的意思。 SVG 数据包含一个颜色规则 (fill='#FFFFFF')，但它不在 URL 中，它是 SVG 代码的一部分。
不，唯一需要的 URL 是 json 文件的 URL，在我的例子中是“/sys/icons/toursListing/listing.json”

标签： javascript jquery html firefox svg

【解决方案1】：

某些字符在 URI 中保留，必须按照 rfc3986 进行编码。 # 字符就是这样一个字符。 Firefox 正确地将您的 URI 报告为无效。

如果其他浏览器没有将此报告为错误，则它们没有正确实现 rfc3986 的要求。

调用encodeURI(URI) 来转换您的SVG 字符串相当简单。

【讨论】：

好的，有道理。谢谢你的解释。顺便说一句，URI 编码有另一种选择：使用 rgb(...) 或 rgba(...) 代替 #xxxxxx 声明颜色。效果一样好，并且可能更高效，至少在我的情况下。