Fontawesome Icon SVG Не отображается в Firefox для маркера Heremap - PullRequest
Новая
       8

Fontawesome Icon SVG Не отображается в Firefox для маркера Heremap

0 голосов
/ 28 февраля 2019

У меня есть Here Map, в приложении Vue, которая показывает маркер на определенном широте / долготе.Маркер использует SVG от FontAwesome (с соответствующим отображением атрибуции). В Chrome, IE и Safari маркер отображается отлично.Тем не менее, в Firefox (65.0.1 (64-разрядная версия) на MacOS) он не отображается вообще.

Не выдается никаких ошибок, он просто молча отказывается отображать.

Код выглядит так: 

let img = document.createElement('img');
img.src = require('../assets/img/home-solid.svg');
const icon = new H.map.Icon(img, {
  size: {
    w: 55,
    h: 55
  }
});
const actMarker = new H.map.Marker(
  { lat: newVal.latitude, lng: newVal.longitude },
  { icon: icon }
);
this.markerGroup.addObject(actMarker);
this.map.setViewBounds(this.markerGroup.getBounds());

SVG выглядит так: 

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
  </path>
</svg>

Как я уже говорил, тот же код, загруженный в Chrome, работает нормально.

Я посмотрел некоторые ответы на SO, касающиеся Firefox и SVG, но ничего из того, что я прочитал, похоже не помогло - например,обеспечение загрузки класса CSS (который поступает из CDN FA) 

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">

Кто-нибудь знает, что здесь происходит?

В качестве отступления - использование PNG прекрасно работает во всех браузерахтак что это определенно связано с SVG.

1 Ответ

0 голосов
/ 01 марта 2019

Firefox требует, чтобы документы SVG, используемые в качестве изображений и затем преобразованные в холст, имели определенную ширину и высоту.

Добавление width = "576px" height = "512px" к корневому элементу вашего документа SVG исправит это.

...