4

I've tried to append a line to a svg element but even though the line exists in DOM, it's not visible.

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

omidh
  • 2,526
  • 2
  • 20
  • 37

2 Answers2

3

Apparently only the script tag works, the reason is still unknown:

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

https://jsfiddle.net/tqg8b8zb/

UPDATE:

If you look inside vue.js you will find this

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);
}
...

This still doesn't explain why modifying the DOM doesn't result in a change of the SVG, but that is part of the browser logic.

gurghet
  • 7,591
  • 4
  • 36
  • 63
  • `template` is a standard tag: https://developer.mozilla.org/en/docs/Web/HTML/Element/template Still upvoted, as your solution works. – nils Apr 26 '16 at 09:54
  • You are right, I should investigate further why your solution didn't work then. – gurghet Apr 26 '16 at 10:00
  • Thanks for solution, Also Vuejs would throw "Unregistered Component" error if tag is used in template tag – omidh Apr 26 '16 at 10:13
  • It's another clue that points to the fact that vue tries to interpret standard HTML5 tags as components, but to be sincere, even `
    ` instead of `
     – gurghet Apr 26 '16 at 10:18
  • 1
    this might help: http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element – omidh Apr 26 '16 at 10:25
0

FYI, here's the Vue issue ticket on it.

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

Make sure that this is not just a Chrome issue you are encountering. The <script type="x/template"> is a valid workaround for the issue.

Michael Ryan Soileau
  • 1,763
  • 17
  • 28