Font Awesome Icon SVG 未在 Firefox 中显示 Here Map Marker

Question

我在 Vue 应用程序中有一个 Here Map，它在特定 lat/lng 处显示了一个标记。该标记使用来自 FontAwesome 的 SVG（具有适当显示的属性）在 Chrome、IE 和 Safari 中，标记显示完美。但是，在 Firefox（MacOS 上的 65.0.1（64 位））中它根本不显示。

没有抛出任何错误，它只是默默地拒绝显示。

代码如下所示：

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 的答案，但 none 我读过的内容似乎有帮助 - 例如确保 CSS class 已加载（来自 FA CDN）

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

有人知道这里发生了什么吗？

顺便说一句 - 使用 PNG 在所有浏览器中都可以正常工作，所以这看起来肯定与 SVG 相关。

Answer 1

Firefox 要求用作图像然后转换为 canvas 的 SVG 文档具有定义的宽度和高度。

将 width="576px" height="512px" 添加到您的 SVG 文档的根元素将修复它。

Font Awesome Icon SVG 未在 Firefox 中显示 Here Map Marker

Fontawesome Icon SVG Not shown in Firefox for Heremap Marker

javascript

svg

here-api