javascript - 如何访问 svg 文件的路径数据并将其用作谷歌地图标记？

Question

我想使用自定义 svg 图标作为谷歌地图标记。

我得到了这个文件:

<svg  xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510">
    <g
        stroke="black"
        stroke-width="10"
        fill="white"
    >
        <path d="M497.25,357v-51l-204-127.5V38.25C293.25,17.85,275.4,0,255,0c-20.4,0-38.25,17.85-38.25,38.25V178.5L12.75,306v51
        l204-63.75V433.5l-51,38.25V510L255,484.5l89.25,25.5v-38.25l-51-38.25V293.25L497.25,357z"/>
    </g>
</svg>

我对 svg 了解不多，但我设法将 svg 文件的路径属性 d 用作字符串并且它工作正常:

mounted() {
    new this.google.maps.Marker({
         position: this.flight.position,
         flight: this.flight,
         map: this.map,
         icon: {
             path: "M497.25,357v-51l-204-the-string-goes-on-and-on",
             scale: .04,
             fillColor: '#FFFFFF',
             fillOpacity: 1,
             strokeWeight: 1,
             rotation: this.flight.trueTrack,
             anchor: new this.google.maps.Point(250, 400)
         }
    })
 }

但我想避免对path 使用太长的字符串。例如，是否可以从 Assets 文件夹导入 svg 文件并将其路径属性 d 作为变量引用？

伪代码(我不知道我在做什么):

import svgFile from '../assets/file.svg';

const path = document.querySelector("path");
const d = path.getAttribute("d");

(...)

mounted() {
    new this.google.maps.Marker({
         position: this.flight.position,
         flight: this.flight,
         map: this.map,
         icon: {
             path: d,
             (...)
         }
    })
 }

或者我完全错了，还有另一种更好的方法来消除 path 中的硬编码字符串？提前致谢!

Answer 1

好吧，我终于明白了。

首先必须将文件导入为文本:

import svgPlane from '!raw-loader!../assets/airplane.svg';

为此，我必须安装 raw-loader:

npm install raw-loader --save-dev

然后我必须使用 DOMParser 解析它并像引用 DOM 元素一样引用数据:

  mounted() {
    const parser = new DOMParser();
    const svgPath = parser
      .parseFromString(svgPlane, "image/svg+xml")
      .querySelector('path')
      .getAttribute('d')

    new this.google.maps.Marker({
      position: this.flight.position,
      flight: this.flight,
      map: this.map,
      icon: {
        path: svgPath,
        (...)
      }
    })
  }

没有神奇的数字!这就是我一直在寻找的答案。