Question

我试图在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/

Answer 1

显然只有脚本标签有效，原因仍然未知：

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

https://jsfiddle.net/tqg8b8zb/

UPDATE：

如果查看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，但这是浏览器逻辑的一部分。

Answer 2

仅供参考，这是Vue发行票。

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

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

Vue Js：不可见的SVG

2 个答案:

UPDATE：