如何在没有构建步骤的Vue独立脚本中使用svg

我试图使用Vue作为一个独立的脚本在一个HTML文件，但它导致我的内联svg图标只是成为固体填充的正方形。我已经尝试过Vue 2和Vue 3作为独立脚本，两者都给出相同的行为。

虽然我已经找到了解决Vue的svg问题，涉及webpack加载器配置，我正在寻找一种方法来解决svg问题没有任何构建步骤，只使用Vue作为一个独立的脚本。

请注意，图标svg是直接从Carbon Design Icons

复制的

<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
{{message}}
<svg
id="icon"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-1 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="&lt;Transparent Rectangle&gt;"
class="cls-1"
width="32"
height="32"
/>
</svg>
</div>
<div>
Icon outside of Vue
<svg
id="icon2"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-2 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="&lt;Transparent Rectangle&gt;"
class="cls-2"
width="32"
height="32"
/>
</svg>
</div>
</body>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!"
};
}
}).mount("#app");
</script>
</html>

https://codesandbox.io/s/wonderful-albattani-dxkvdt?file=/index.html: 0 - 2221

change fill:none to fill:transparent

这最终不是Vue的问题，而是从图标库复制的SVG代码中的问题。Estus Flask发现SVG定义中的样式标签可能是问题所在，因为它可能在不同的场景中导致不一致的行为，例如内联SVG样式是否包含在由Vue管理的div中。解决方案是将该样式类移动到单独的样式表中。

相关内容

最新更新

热门标签：