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.

Sign up for GitHub

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

Jump to bottom

SVG foreignObject not working in Vue 2.0 #4122

Closed
JollyGood1 opened this issue Nov 4, 2016 · 4 comments
Closed

SVG foreignObject not working in Vue 2.0 #4122

JollyGood1 opened this issue Nov 4, 2016 · 4 comments

Comments

@JollyGood1
Copy link

Vue.js version

2.0.3

Reproduction Link

https://jsfiddle.net/Linusborg/4j2v4fm9/

Steps to reproduce

  • Run it once as is.
  • Once without var vue = new Vue({ el: '#body'});
  • Once with version 1.0.26 instead of 2.0.3.

What is Expected?

  • In version 2.0.3 you will see no text inside the rectangle.
  • When you run it without Vue the text will work fine.
  • In version 1.0.26 the text will also be fine.

What is actually happening?

I don't know, but the resulting HTML stays the same whether the text is seen or not.
@LinusBorg
Copy link
Member

Its happening consistently across all browsers (Chrome/FF/Safari), really weird.

@LinusBorg LinusBorg added the 2.0 label Nov 4, 2016
@yyx990803
Copy link
Member

The reason:

  1. Vue 1.x parses the in-DOM template as-is, so everything is already having the correct namespace.
  2. Vue 2.0 parses the template as a string and re-generates the DOM based on the generated virtual DOM. It has special treatment for the SVG namespace, but not for embedded XHTML, so the elements inside the foreignObject is generated with SVG namespace instead of XHTML.

Should be fixable by adding xmlns detection in the parser.

@JollyGood1
Copy link
Author

Thanks for the fix.
It works now, and makes me very happy :)

@LinusBorg LinusBorg reopened this Dec 14, 2016
@LinusBorg
Copy link
Member

Please open another issue for this. This issue is too far down the list ^^

@anthonyjl anthonyjl mentioned this issue Dec 14, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @LinusBorg @JollyGood1