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

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

这种方法适用于我测试过的所有浏览器，即Safari，Chrome，Opera，Roccat，Vivaldi，webkit和Safari Technology Preview .

我无法在Windows浏览器中测试该页面，因为我的PC最近在我身上死了，但它曾经工作得很好，至少在Edge上 .

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

我不确定我的URI是什么无效，因为它们对其他浏览器似乎没问题 .

您可以在http://www.immersive-tours.ch查看此问题 . 只需首先使用Firefox以外的其他内容加载页面，然后使用Firefox .

下面你看到从json文件加载的一个图标 .

"search": "<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'> <g id='Layer_1' transform='translate(-150.523, -113.593)'> <g id='search.svg'> <g> <g> <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'/> <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'/> </g> </g> </g> </g> </svg> ",

这个和其他图标加载了这个功能：

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"]);
	};
}

那就是山雀 .