Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-text cannot render in svg tspan #4296

Closed
GeniusWiki opened this issue Aug 10, 2021 · 2 comments · Fixed by #4301
Closed

v-text cannot render in svg tspan #4296

GeniusWiki opened this issue Aug 10, 2021 · 2 comments · Fixed by #4301
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@GeniusWiki
Copy link

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 posva added 🐞 bug Something isn't working 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem labels Aug 10, 2021
@posva
Copy link
Member

posva commented Aug 10, 2021

BTW don't use this in templates

@GeniusWiki
Copy link
Author

GeniusWiki commented Aug 10, 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/.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants