svg - svg 中的自闭标签无效

Question

在使用 webpack (1.13.1) 和 vue-loader (8.5.3) 构建的 vue.js (1.0.26) 应用程序中，导入只是 svg 一部分的组件时出现问题。

这是一个有这个问题的回购

父组件：

<template>
    <svg viewBox="0 0 1280 512">
        <axis-x></axis-x>
    </svg>
</template>

<script>
import axisX from './axis-x.vue';

export default {
    components: {
        axisX
    }
}
</script>

子组件：

<template>
    <g>
        <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />
        <text x="16" y="414" fill="black">1990</text>
    </g>
</template>

<script>
export default {
};
</script>

当 webpack 运行时，它会出现以下错误：

ERROR in ./src/axis-x.vue
  2 |   <g>
  3 |   <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />
    |   ^
  4 |   <text x="16" y="414" fill="black">1990</text>

Invalid self-closing tag: <line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" />. 
This will be treated as the starting tag only in HTML5. Use <line></line> instead.

看起来加载器将 svg 部分解释为无效的 HTML。

我该如何解决这个问题？谢谢

Answer 1

此警告来自vue-template-validator. 不幸的是，它没有配置选项。

我不确定，但似乎您可以通过简单地向元素添加lang="html"属性来关闭它（仅在未指定属性时使用它）。在这种情况下，将不经验证使用。templatevue-loaderlangvue-loaderhtml-loader

Answer 2

克隆您的应用程序并运行它后，它给了我同样的错误，很明显，您可以在 html5 中自动关闭行标记，因此只需使用

<line x1="1" y1="400" x2="1" y2="416" style="stroke:black;stroke-width:1" ></line>

解决了问题