Vue Js：不可见的 SVG答案

【问题标题】：Vue Js: Invisible SVGVue Js：不可见的 SVG
【发布时间】：2016-08-19 22:54:47
【问题描述】：

我尝试在 svg 元素上附加一行，但即使该行存在于 DOM 中，它也不可见。

    <svg id="app">
      <svg-line></svg-line>
    </svg>
    <template id="svg-lineTemp">
      <line x1="0" y1="0" x2="100" y2="100"></line>
    </template>
    <script>
    Vue.component('svg-line', {
      template: '#svg-lineTemp'
    });
    vm = new Vue({
      el: '#app'
    });
  </script>

https://jsfiddle.net/omidh/4xmha7om/1/

【问题讨论】：

标签： javascript html svg vue.js

【解决方案1】：

显然只有脚本标签有效，原因尚不清楚：

<script id="svg-lineTemp" type="text/x-template">
  <line x1="0" y1="0" x2="100" y2="100"></line>
</script>

https://jsfiddle.net/tqg8b8zb/

更新：

如果你查看 vue.js，你会发现这个

function nodeToFragment(node) {
// if its a template tag and the browser supports it,
// its content is already a document fragment.
if (isRealTemplate(node)) {
  trimNode(node.content);
  return node.content;
}
// script template
if (node.tagName === 'SCRIPT') {
  return stringToFragment(node.textContent);
}
...

这仍然不能解释为什么修改 DOM 不会导致 SVG 发生变化，但这是浏览器逻辑的一部分。

【讨论】：

template 是一个标准标签：developer.mozilla.org/en/docs/Web/HTML/Element/template 仍然赞成，因为您的解决方案有效。
你是对的，我应该进一步调查为什么你的解决方案当时不起作用。
感谢您的解决方案，如果在模板标签中使用标签，Vuejs 也会抛出“未注册的组件”错误
这是另一个线索，指出 vue 试图将标准 HTML5 标签解释为组件，但说实话，即使 <div> 而不是 <template> 也行不通。我还没有看代码，但我怀疑脚本标签有一些特殊的恳求。
这可能会有所帮助：stackoverflow.com/questions/3642035/…

【解决方案2】：

仅供参考，这是 Vue 问题单。

https://github.com/vuejs/vue/issues/2661

确保这不仅仅是您遇到的 Chrome 问题。 <script type="x/template"> 是该问题的有效解决方法。

【讨论】：