Vue SVG 组件未在 DOM 中加载

Question

嗨，我正在尝试制作一个在使用时加载 svg 的组件。 但问题是它没有加载到 DOM 中。 当我检查元素时，它总是显示 shadow -root （关闭）。

但它在图像中使用时会显示。 我想使用 svg 而不是图像的原因是我希望能够更改颜色。

检查的元素显示为：

<svg aria-hidden="true">
    <use xlink:href="/img/apartment.908eb4d5.svg#apartment">
        #shadow -root (closed)
    </use>
</svg>

用法

<SvgIcon icon-name="apartment" />

零件

<template>
  <svg aria-hidden="true">
    <use :xlink:href="require(`@/icons/${iconName}.svg`)+ `#${iconName}`"></use>
  </svg>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SvgIcon",
  props: {
    iconName: {
      type: String,
      default: "book"
    }
  }
});
</script>

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M14 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M6 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M4 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 6h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 8h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 10h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 12h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 16h1v1h-1v-1z"></path>
<path fill="#000000" d="M8 14h1v1h-1v-1z"></path>
<path fill="#000000" d="M18.5 19h-0.5v-13.5c0-0.763-0.567-1.549-1.291-1.791l-4.709-1.57v-1.64c0-0.158-0.075-0.307-0.202-0.401s-0.291-0.123-0.442-0.078l-9.042 2.713c-0.737 0.221-1.314 0.997-1.314 1.766v14.5h-0.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h18c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5zM16.393 4.658c0.318 0.106 0.607 0.507 0.607 0.842v13.5h-5v-15.806l4.393 1.464zM2 4.5c0-0.329 0.287-0.714 0.602-0.808l8.398-2.52v17.828h-9v-14.5z"></path>
</svg>

Answer 1

<use>元素复制href属性中引用的节点。 如果您使用片段链接，则必须确保您加载的 svg 文件具有适当的id属性。

<svg id="apartment" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <path fill="#000000" d="M14 6h1v1h-1v-1z"></path>
    ...
</svg>

也不推荐使用xlink:href 。