javascript - Vue SVG 组件未在 DOM 中加载
问题描述
嗨,我正在尝试制作一个在使用时加载 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>
解决方案
该<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
已弃用。
推荐阅读
- swift - 将开发快速包添加到应用程序的问题
- groovy - Geb 测试在 Eclipse 中启动时忽略 GebConfig.groovy 文件
- python - 发送消息到 dms discord.py
- javascript - 在 JS 生成的文本中旋转文本
- amazon-web-services - 如何在 AWS EC2 实例上安装 SSL 证书?
- weblogic - Weblogic活动线程在高负载下没有增加
- angular - 如何从数组对象传递 url 中的动态查询参数
- python - 在 Python 中使用类方法时是否可以解构“self”?
- javascript - 水平创建表格
- html - 输入范围滑块,用图像替换拇指不起作用