Как сделать так, чтобы элемент svg <image> отображался в Safari / ios

Мой сценарий: я показываю карту листовка. Карта состоит из нескольких плиток, каждая из которых может содержать один или несколько значков. Вот как может выглядеть плитка:

<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 значки не отображаются. Элемент есть, но изображение отсутствует. Скриншот из стек браузера для сафари, ios6. Выделенное синее поле - это элемент (снова проверенный с помощью инструментов разработчика), показывающий, что элемент находится в нужном положении, с правильными размерами, но изображение не отображается:

Как сделать так, чтобы элемент svg <image> отображался в Safari / ios

Что я имеют пробовал:

Использование абсолютных и относительных URL-адресов для ресурса изображения вместо встроенного base64. Делает нет разницы. Изображение также размещено в том же домене, нет применяются междоменные проблемы.
Используя различные комбинации xlink: href и href (просто xlink: href, просто href и т. д.).
- Изменение тега image / svg. Добавлены соответствующие пространства имен и тег xlink: href (в библиотеке по умолчанию используется только href) в соответствии с предложением это.

Что я нет пробовал:

Полная замена svg механизма листовки на другой (скажем ... холст). Большая часть приложения полагается на svg рендерер, поэтому я бы не стал туда идти.

Есть ли другие предложения, которые я мог бы попробовать, кроме замены модуля рендеринга svg?

Минимальный воспроизводимый пример: https://jsfiddle.net/tocxvxy3/3/

вы пробовали без transform: translate3d(455px, -4px, 0px);?

— 02.04.2018 12:37

@scraaappy Нет, потому что код перевода добавлен буклетом, чтобы правильно расположить карту, плитку и значок относительно друг друга. Однако я не думаю, что translate3d имеет какое-либо отношение, потому что элемент правильно расположен, как показано на 2-м рисунке.

— 02.04.2018 16:41

Jsfiddle работает / отображается для меня в Safari так же, как в Firefox и Chrome.

— 03.04.2018 19:45

@RobertLongson, вы используете Safari на iPhone? Я не вижу значок на iPhone.

— 04.04.2018 09:53

Нет, я использую Safari на Mac. Вы можете попробовать сообщить об этом в Apple как об ошибке.

— 04.04.2018 10:56

Не могли бы вы опубликовать код JavaScript с помощью библиотеки Leaflet, которая вам не подходит?

— 10.04.2018 22:06

Вы нашли решение? Спасибо

— 23.04.2019 15:53

svg safari leaflet

02.04.2018 12:14

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

1 283

Ответы 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/[email protected]/dist/leaflet.css" rel = "stylesheet"/>
<script src = "https://unpkg.com/[email protected]/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'
});

Как я сказал в вопросе, я уже пробовал это: «Использование абсолютных и относительных URL-адресов для ресурса изображения вместо встроенного base64. Без разницы».

— 09.04.2018 05:40

07.04.2018 06:54