Недопустимый самозакрывающийся тег в svg

Question

В приложении vue.js (1.0.26), построенном с помощью webpack (1.13.1) и vue-loader (8.5.3), При импорте компонента, который это всего лишь часть svg.

here is a repo with this problem

родительский компонент:

<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.

Как исправить эту проблему? Thanks

Answer 1

Это предупреждение исходит от vue-template-validator. К сожалению, у него нет параметров конфигурации.

Я не уверен, но мне кажется, что вы можете отключить его, просто добавив lang="html" атрибут в template элемента (vue-loader использует его только тогда, когда не было указано lang атрибут). В этом случае vue-loader будет использовать html-loader без проверки.

Answer 2

После клонирования приложения и работает он дал мне ту же ошибку, и это было совершенно ясно, что вы можете закрывающиеся линии тег в html5 так просто с помощью

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

решена проблема