Question

我在Vue应用程序中有一个Here Map，在特定的经/纬度处显示标记。标记使用来自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中加载的相同代码可以正常工作。

我已经查看了有关Firefox和SVG的一些答案，但我所读的书似乎都没有帮助-例如确保CSS类已加载（来自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要求将用作图像然后转换为画布的SVG文档具有定义的宽度和高度。

在您的SVG文档的根元素中添加width =“ 576px” height =“ 512px”即可解决此问题。

Fontawesome Icon SVG在Firefox中未显示此地图标记

1 个答案: