Whitespace kills SVG text

[fforw]

See this http://jsfiddle.net/XB98M/

Note the spaces around the {"bar"} entry that make it not being rendered as SVG text but as span after the SVG.

[syranide]

This is currently a flaw of sorts in React that is used to get around the issue of not being able to create separate textnodes with innerHMTL nor being able to provide them with any kind of identification.

There are a number of different levels at which this could be attacked, @spicyj sumitted PR #742 that I believe concatenated adjancent string children but was rejected because it broke the determinism of the children array, or something like that. So it seems to me that if someone finds this important enough to fix now, that the solution would be to concatenate adjacent strings during rendering, but it likely isn't as easy as it sounds.

In your case, you simply have to put everything inside the braces for now.

[fforw]

In this case it wasn't so much that I really wanted my output to be padded with space, I just got to the second case by trying to make the code more pretty :\ and promptly fell into that trap.

[zpao]

fwiw, putting {"bar"} onto a new line gets parsed how you would expect. It's an awkward balance and svg definitely makes this trickier :( - check http://jsfiddle.net/wVQr3/

[srcspider]

@zpao

The bug is actually not limited to just the text element. If you say have something simple like:

<g>
\t{pts}\t{lines}\t{xAxis}
</g>

the character escaping there is intentional since bug involves invisible characters

...everything will go boom as well.

Personally I'm not a fan of the magical span insertion. The way react did it previously where whitespace had to manually inserted was actually a nice "feature" since it removed the need for crappy font-size: 0 hacks and meant everything was always exactly as intended.

While its more or less harmless for html use cases for svg where text can only really be inserted with <text> tags I think React should just disable that magic altogheter; but I guess it's tricky to disable.

How about if the magic span insertion only happens for certain html tags, eg. span, p, h* and in all other cases react will strip out the whitespace and won't inject anything in the code. That should work out for all parties, people who want their whitespace just have to properly use html tags, people like me who, for the most part, don't want it ever can stick divs everywhere.

[natew]

Just want to comment here and say this is pretty tricky when going with flex box. Without spans your text will flow as it should, but once it's wrapped with a span, you no longer can preserve this at all.

Our default flexbox CSS reset uses flex-flow: column. Even when doing display: inline for spans, it will break text into lines once you use a variable. Not sure how to get around this, but is a pretty big "weirdness" of using React now.

[ghost]

For anyone searching about this (like i was). Works in 0.14.0 😄
https://jsbin.com/toluqu/3/edit?html,js,output

[skcalanderson2]

Thank you thelamdaparty! I have been trying to get this to work all day. The tspan did the trick.

[kfix]

@thelambdaparty @skcalanderson2 : I use that workaround too but its not a solution. I shouldn't have to template everything (ex: <tspan>{purely static string}</tspan>) to keep my SVG's from getting span'd and broken.

[sophiebits]

Should be better now due to #5753.