Newly-inserted SVG elements do not render on component update #311
Comments
|
Adding them to markupWrap would seem to make sense to me. (I also hear that Facebook has React bindings for ART which looks to be a cross-browser drawing library. I've been nudging them to release the bindings.) |
|
@sklobovskaya thanks for pointing this out! I'm going to defer to @sebmarkbage here since he's done most of our SVG-related work. |
|
That makes sense. We should add some more markupWraps. |
sophiebits
added a commit
to sophiebits/react
that referenced
this issue
Oct 9, 2013
Forcing wrapping seems necessary here: I compared a <circle> created within a <div> with a <circle> created inside an <svg> and they appear to have exactly the same properties with the exception of .parentNode (and .parentElement), yet the former refuses to show up when appended to an <svg> element. As such, I can't find any useful way to write a unit test (testing getMarkupWrap's output doesn't seem particularly useful to me). Fixes facebook#311. Test Plan: With a component that adds a <circle> after mounting (such as http://jsfiddle.net/spicyj/hxFVe/), verify that the circle appears in both Chrome and IE9.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Components which try to render SVG elements, such as
<path>,<text>,<g>, etc. that must be inserted into a parent<svg>do not get rendered by the browser. I assume this is because the functionrenderMarkup()usesinnerHTML, and new SVG elements cannot be created this way -- the browser won't render them standalone.One quick fix is to add these SVG elements to
markupWrapand wrap them in an<svg>tag and then extract them, but there may be a more appropriate/elegant solution.I realize SVGs aren't React's focus, but I thought I'd point it out anyway, just in case. Thanks for the great work so far.
The text was updated successfully, but these errors were encountered: