为什么带有 SVG 图标的标记仅在 Safari 中不显示？答案

【问题标题】：Why are markers with SVG icons not showing up in Safari only?为什么带有 SVG 图标的标记仅在 Safari 中不显示？
【发布时间】：2021-09-16 19:13:03
【问题描述】：

带有 SVG 图标的此处地图标记仅在 Safari 上不会显示在地图中（适用于所有其他浏览器）。我也在使用地图外的图标，它们在那里显示得很好。实际的地图是画布，所以也许这与它有关？

尝试为图标的 SVG 标记添加高度、宽度和版本属性。

SVG 图标标记：

<svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" class="svg-inline--fa fa-map-marker-alt" focusable="false" viewBox="0 0 384 512">
  <path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" fill="#007bff"></path>
</svg>

标记创建：

const svgMarkup = ''; //The markup from above
const latitude = 47.6062;
const longitude = 122.3321;

const icon = new H.map.Icon(svgMarkup);
return new H.map.Marker({lat: latitude, lng: longitude}, { icon });

【问题讨论】：

见stackoverflow.com/questions/26091989/…

标签： svg here-api here-maps-rest

【解决方案1】：

这与 webkit 浏览器规范更相关，因此请查看此帖子 SVG viewbox height issue on ios Safari 并尝试以下解决方案，如果您的问题仍然存在，请告诉我们。

svg {
    width: 100%;
    height: 100%;
}

【讨论】：