CODEWITHSUNDEEP
svghere-apihere-maps-rest
OpusX_SRT
OpusX_SRT

Reputation: 21

Why are markers with SVG icons not showing up in Safari only?

Here-maps markers with an SVG icon do not show up in the map on Safari only (works on all other browsers). I am also using the icons outside of the map, and they display fine there. The actual map is a canvas though, so perhaps that has something to do with it?

Tried adding a height, width, and version attribute to the SVG markup for the icons.

SVG icon markup:

<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>

Marker creation:

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

Upvotes: 1

Views: 2542

Answers (1)

user3505695
user3505695

Reputation:

This is more related to webkit browser specification, so please check this post SVG viewbox height issue on ios Safari and try the below solution do let us know if still your issue persist.

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

Upvotes: 5

Related Questions