如何使 svg <image> 元素显示在 safari/ios 中

Question

我的场景：我正在显示leaflet 地图。一张地图有多个图块，每个图块可能包含一个或多个图标。 以下是图块的外观：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="none" width="256" height="256" viewBox="0 0 256 256" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(455px, -4px, 0px); opacity: 1;">
    <g></g>
    <image x="213.9375" y="252.875" width="19px" height="19px" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA/1JREFUWIXll21olWUYx3/Py9nZc8523uZyW+Z8gVXK3Dw2iJx0ilGGKVOnOIp0RJjRhyDWSAgJI4R9mA2hpohGVKizpQZGG4MWM5ZntnK1mQutdQz3ctzOzs778zx9sJ1tsJdzju5DdH26r+u+r+v/4+J57hf4v5swMcjLy9sVDAarBUFQF1JQ13XJZDId8ng8Z6YBOByOKzU1NWudTudC6uN2u6mtrXV7vd4SAHnKXMzpdFJWVpZYJV0j0N1I+EYbtk11CJIhoTRVVRFFMd5lea7Fs1n4Zhu+1veIDvx6NyCI2DfXp1IqOYDoYC++1oOEb3w7LR785QtkWz6ZG95cGADVf5uxtloCV0+Drs24Zqy9Dsm2FFPhjvsHoEfG8Xd8iP+HBvRocN5ioxerkSx5GPPXJwwgziJNoOtTbjeUMtZ+OCFxAF2LcafpFWLD1+8RQFMJ9pxDGx9MuFA8NeRj+PRLCefOCDB2qR7LM+8jLypIGgBAHe3H21iFHgulBhAbusbIuX04yj9CylicEkTk7y7unH991o92TgBdU4kO9DDacgB7xUmEtIyUIEK/fY2v9WDyABPU4ZvfEXAfx7HtKIKY0p6F//Ixxq+cTBJAmAwHuhuJ/NmB9bnalAAARpsPEOprSRzAsqEa0ZgZ98cufQBqNKWdDkA0ZqAFvYkDyNkPY992fNoBM/LNftJyizEVVSauLEiYnbvJqjyFYDAnDgBgzH8C26Y64ie2FsP75auYi17AuMI1r7ZxWSmLXmzC8MAqQr1fYch+JDkAAGVVORbX23Ffj4wzfLYK69PvYMgpnDFHtuVj33oMc8legj3nkawPkbbcRfiP9uQBADIefw3zuqq4r40P4m3ai33LESTrknhcSMvA4tqPbetRord+RPMPYC6uJPLXZWIDPSiPbk4NAMBa9i7pBRvjfmy4j5GLb+GoOIGo2DGt2UX27gsIkoHw9WaUwu3oWoxAdxPpBRsRTXYCP51KHQBBxL7lCGkPPhYPRfo78LfXs3jf96SvfIpA12fIOcUYcosIdH2ObF2CcfmTBK6eQZAVzCUv3wMAIMjpOCpOIDtWxmPB3guoPg8A6au3E+5rnmy9x01s6BqZ698gveDZWa9sCQMAiIqdrJ2fIJqzJ8GMVlTfLcJ9LdNar6wux7xuD6Jim7tmMgAAkm0pWTs+Rki7+1/r0XHknLWTrbfnY3HVTOvUfQUAMOSswVHeAKKMrqqEf29GCwxhcdVgXFbKlNv+vJbaCQMYV7iwP38YSbFidu5BsuSmVCcOoOu67Ha7UdVkHkYK9Hf9O/45oYzOzk40TZMm/KlPs52hUKh66qNhIUzTNElRlEMej+fsQur8d+wfq09oFkuvTdQAAAAASUVORK5CYII=" class="" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA/1JREFUWIXll21olWUYx3/Py9nZc8523uZyW+Z8gVXK3Dw2iJx0ilGGKVOnOIp0RJjRhyDWSAgJI4R9mA2hpohGVKizpQZGG4MWM5ZntnK1mQutdQz3ctzOzs778zx9sJ1tsJdzju5DdH26r+u+r+v/4+J57hf4v5swMcjLy9sVDAarBUFQF1JQ13XJZDId8ng8Z6YBOByOKzU1NWudTudC6uN2u6mtrXV7vd4SAHnKXMzpdFJWVpZYJV0j0N1I+EYbtk11CJIhoTRVVRFFMd5lea7Fs1n4Zhu+1veIDvx6NyCI2DfXp1IqOYDoYC++1oOEb3w7LR785QtkWz6ZG95cGADVf5uxtloCV0+Drs24Zqy9Dsm2FFPhjvsHoEfG8Xd8iP+HBvRocN5ioxerkSx5GPPXJwwgziJNoOtTbjeUMtZ+OCFxAF2LcafpFWLD1+8RQFMJ9pxDGx9MuFA8NeRj+PRLCefOCDB2qR7LM+8jLypIGgBAHe3H21iFHgulBhAbusbIuX04yj9CylicEkTk7y7unH991o92TgBdU4kO9DDacgB7xUmEtIyUIEK/fY2v9WDyABPU4ZvfEXAfx7HtKIKY0p6F//Ixxq+cTBJAmAwHuhuJ/NmB9bnalAAARpsPEOprSRzAsqEa0ZgZ98cufQBqNKWdDkA0ZqAFvYkDyNkPY992fNoBM/LNftJyizEVVSauLEiYnbvJqjyFYDAnDgBgzH8C26Y64ie2FsP75auYi17AuMI1r7ZxWSmLXmzC8MAqQr1fYch+JDkAAGVVORbX23Ffj4wzfLYK69PvYMgpnDFHtuVj33oMc8legj3nkawPkbbcRfiP9uQBADIefw3zuqq4r40P4m3ai33LESTrknhcSMvA4tqPbetRord+RPMPYC6uJPLXZWIDPSiPbk4NAMBa9i7pBRvjfmy4j5GLb+GoOIGo2DGt2UX27gsIkoHw9WaUwu3oWoxAdxPpBRsRTXYCP51KHQBBxL7lCGkPPhYPRfo78LfXs3jf96SvfIpA12fIOcUYcosIdH2ObF2CcfmTBK6eQZAVzCUv3wMAIMjpOCpOIDtWxmPB3guoPg8A6au3E+5rnmy9x01s6BqZ698gveDZWa9sCQMAiIqdrJ2fIJqzJ8GMVlTfLcJ9LdNar6wux7xuD6Jim7tmMgAAkm0pWTs+Rki7+1/r0XHknLWTrbfnY3HVTOvUfQUAMOSswVHeAKKMrqqEf29GCwxhcdVgXFbKlNv+vJbaCQMYV7iwP38YSbFidu5BsuSmVCcOoOu67Ha7UdVkHkYK9Hf9O/45oYzOzk40TZMm/KlPs52hUKh66qNhIUzTNElRlEMej+fsQur8d+wfq09oFkuvTdQAAAAASUVORK5CYII=" style="pointer-events: auto;"></image>
</svg>

Chrome、Firefox 中的结果（通过 devtools 检查）：

然而，在 Safari 中，图标不会呈现。元素在那里，但图片不见了。来自browserstack 的屏幕截图，适用于 safari，ios6。突出显示的蓝色框是元素（再次通过 devtools 检查），显示元素就位，尺寸正确，但没有显示图像：

我已经尝试了什么：

• 对图像资源使用绝对和相对 url 路径，而不是内联 base64。使 没有不同。图像也托管在同一个域上，没有 跨域问题适用。
• 使用 xlink:href 和 href 的各种组合（仅 xlink：href，只是href等）。
  • 修改图像/svg 标签。根据this 的建议，添加了适当的命名空间和 xlink:href 标记（默认库仅使用 href）。

我没有尝试过的：

• 完全替换leaflet的svg机制 （比如说...canvas）。大部分应用程序都依赖于 svg 渲染器，所以我宁愿不去那里。

除了更换 svg 渲染器之外，我还有其他建议可以尝试吗？

最小可重现示例： https://jsfiddle.net/tocxvxy3/3/

Answer 1

您可以尝试直接输入 png 文件名，而不是将其嵌入到 svg 中，如传单示例 http://leafletjs.com/examples/custom-icons/ ，也许这种方式对 ios 的支持更好？

var map = L.map('map').setView([51.5, -0.09], 13);

	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	var LeafIcon = L.Icon.extend({
		options: {
			shadowUrl: 'leaf-shadow.png',
			iconSize:     [50, 50],
			shadowSize:   [50, 64],
			iconAnchor:   [22, 94],
			shadowAnchor: [4, 62],
			popupAnchor:  [-3, -76]
		}
	});

	var greenIcon = new LeafIcon({iconUrl: 'https://memegenerator.net/img/images/50x50/7452314.jpg', iconRetinaUrl: 'https://static01.nyt.com/images/2012/09/14/blogs/Fils-Aime/Fils-Aime-thumbLarge.jpg'});

	L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 600px;
  height: 400px;
}

<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<div id='map'></div>

如果你想尝试，还有一个 iconRetinaUrl 选项

var greenIcon = new LeafIcon({
  iconUrl: 'https://memegenerator.net/img/images/50x50/7452314.jpg',
  iconRetinaUrl: 'https://static01.nyt.com/images/2012/09/14/blogs/Fils-Aime/Fils-Aime-thumbLarge.jpg'
});