svg 中的自闭标签无效答案

【问题标题】：Invalid self-closing tag in svgsvg 中的自闭标签无效
【发布时间】：2016-12-18 06:17:16
【问题描述】：

在使用 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。

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

【问题讨论】：

收盘行有效？
它确实有效……但它仍然是有效的 SVG 吗？
是的，你也可以放其他元素stackoverflow.com/a/2529032/4690316
好的，谢谢。我现在会这样做，但我仍然想找到一种使用自闭合 svg 元素的方法。

标签： svg webpack vue.js vue-loader

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

解决了问题

【讨论】：