Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
SVG foreignObject to render HTML
See original GitHub issueHi,
I’ve been using SVG foreignObject to render some HTML inside of an SVG chart. I’ve just upgraded to the “Diversity” versions to get the event bubbling fix for mouseenter / mouseleave, but now the foreignObject content no longer renders.
Any idea if this is a bug in @cycle/dom, or i’m doing something wrong?
svg.foreignObject({ attrs: { width: '100', height: '50' }}, [
body({ attrs: { xmlns: 'http://www.w3.org/1999/xhtml' }}, [
p('THIS IS A PARAGRAPH THAT CAN WRAP TEXT')
])
])
Any pointers much appreciated, thanks!
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
What can be rendered in foreignObject element when SVG is ...
The 'foreignObject' element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The ...
Read more >Rendering HTML to images with SVG foreignObject | semi/signal
<foreignObject> is a somewhat strange element. Essentially, it allows you to load and render arbitrary HTML content within SVG.
Read more ><foreignObject> - SVG: Scalable Vector Graphics | MDN
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
Read more >How to use HTML with CSS inside SVG - Amit Merchant
This can be solved by using the <foreignObject> SVG element in which you can add an HTML under a different namespace than the...
Read more >Exploring Recharts: using foreignObject to render custom HTML
As we have already seen here, Recharts allows you to render any svg element as a child element of a chart container and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed in cycle dom v10.0.5 thanks to Harry’s PR.
PR https://github.com/cyclejs/dom/pull/130