Subscribe on changes!

v-text cannot render in svg tspan

avatar
Aug 10th 2021

Version

3.2.1

Reproduction link

https://jsfiddle.net/robedgenius/oky8r140/19/

Steps to reproduce

This piece code render differently for <tspan> and <div> code:

<svg>
<text x="0" y="0">
<tspan v-text="mytext"></tspan>
</text>
<foreignObject>
<div v-text="mytext"></div>
</foreignObject>
</svg>

The <tspan> becomes <tspan textContent="hello"></tspan> and second div is working as expected: <div>hello</div>

However, it works in these scenarios for tspan:

  • Mustache format {{mytext}} in tspan
  • if remove <svg> tag
  • In Vue 2, it also works, even it has svg tag.
  • if use vanillaJS set document.getEelement('tspan-id'). textContent.

What is expected?

<tspan> should render variable text to tag textContent. same with <div>

What is actually happening?

<tspan> cannot render v-text to textContent, but a textContent attribute.

avatar
Aug 10th 2021

BTW don't use this in templates

avatar
Aug 10th 2021

@posva thanks. I found I posted a debug jsfiddle for our real use case that use $parent data, here is simplified version https://jsfiddle.net/robedgenius/oky8r140/26/.