-
Notifications
You must be signed in to change notification settings - Fork 46.9k
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
Whitespace kills SVG text #1236
Comments
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. |
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. |
fwiw, putting |
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 While its more or less harmless for html use cases for svg where text can only really be inserted with 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. |
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 |
For anyone searching about this (like i was). Works in 0.14.0 😄 |
Thank you thelamdaparty! I have been trying to get this to work all day. The tspan did the trick. |
@thelambdaparty @skcalanderson2 : I use that workaround too but its not a solution. I shouldn't have to template everything (ex: |
Should be better now due to #5753. |
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.
The text was updated successfully, but these errors were encountered: