v-text cannot render in svg tspan
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.
@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/.