-
Notifications
You must be signed in to change notification settings - Fork 46.5k
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
Missing SVG tags and attributes #1657
Comments
Anybody working on this? I'd be keen to implement the |
Should I create a PR for this or do you prefer to collect all the missing attributes/tags first and later create a single patch? [edit] preserveAspectRatio was added in commit 0f0328f |
Hi. marker* attributes have been added thanks to @cassus in #1738 as stated above. What about adding the related |
I just realized I need this too. Here's a good overview of it: http://tutorials.jenkov.com/svg/marker-element.html |
This "add a random element and attribute here and there as 1 person needs it" approach has gotten out of hand. So we either need to support everything or nothing (or alternatively add a reasonable set of things now and then freeze there). I scraped http://www.w3.org/TR/2003/REC-SVG11-20030114/attindex.html for almost everything (not counting namespaced attributes) and came up with this: https://github.com/zpao/react/compare/fuck-svg. However that adds ~2kb to our minified build (though it would crush well with closure compiler) and I don't want to take that size increase right now. We've talked about doing a separate SVG build. Or shipping that separately as an addon. |
@zpao you're right. Full SVG support could be an addon. To do so a depreciation warning will need to be set to inform for example than React.DOM.circle will become React.SVG.circle |
+1 for React.SVG.circle |
@zpao |
+1 |
#2069 requests support for image. |
+1 for image support |
+1 for image support as well |
+1 for |
Missing |
+1 for also want to use it for a progress bar . |
I am missing |
+1 for animateTransform |
+1 for dominate-baseline (#3199.) |
Like @zpao said, we're going to fix this for good soon so any attributes can be used. Locking this issue until then. |
This was fixed in #5714. |
#5714 was reverted in #6243, and thus we still require an attribute whitelist. The good news, however, is that #6243 contains attributes scraped for MDN so we expect it to cover 95% of the use cases. I read through this whole issue and linked issues and PRs and manually added two missing properties ( Interestingly, I’m not sure whether the tag whitelist is relevant anymore. So far I have been able to use I am unlocking this issue because the attribute whitelist is still relevant, but hopefully we will see a lot less requests now that most of the attributes that are both in the spec and are implemented by the browsers, are supported. If something still isn’t supported in the final v15, please let us know here. This note does not apply to v15 RC1 which passes all SVG attributes through. We reverted this behavior in #6243 so please use the upcoming RC2, the master, or the final v15 to tell whether the attributes you are interested in are currently supported. |
I noticed that there seems to be quite a lot of confusion about the <use xlinkHref="#shape" x="50" y="50" /> React will correctly turn that into |
For my use case I needed React to recognize some filter elements like // Needed to set correct xmlns on <svg> and to preserve attributes on feFunc*.
// Required for 0.14.x. May become unnecessary with 15.x
var SVGDOMPropertyConfig = require("react/lib/SVGDOMPropertyConfig");
var DOMProperty = require("react/lib/DOMProperty");
var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.in = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.intercept = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.slope = MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.Properties.xmlns = MUST_USE_ATTRIBUTE;
var React = require("react");
var render = require("react-dom").render; This is obviously a hack but I find it preferable to |
While this works it’s not an officially exposed API and may break in any minor or patch release. You can use it but on your own risk. If something is still missing please work with us so we add it. I’m glad to hear you don’t have issues with 15 RC2. |
Yep, absolutely. I'm only using that until 15 comes out of RC status. |
Pretty happy for the (almost) full SVG support in v15.0 but I'm realising that some namespaced attributes like In case you want to create an ReactDOMServer.renderToStaticMarkup(<MyCustomSVG />) So doing the code above, wont'n work. Probably is related on the fact that:
and not |
The blog post is a little too simplified, but |
Thank you @gaearon. I think it does happen when render the Here is a pen that shows the rendered If is the case I could file this issue separately. |
Yea, |
I still do not see |
All tags are supported now. The list only tells which tags are supported as
(emphasis mine) If you use JSX, you don’t need to worry about this at all—writing Even if you don’t use JSX, you can use |
+1 for adding support for // explicitly build the SVG to be rendered here so we don't lose the NS
const stringifiedSvg = `<svg xmlns="http://www.w3.org/2000/svg" class="svgClass">
<use xlink:href="#linkToSymbolId"></use>
<svg/>`
return <div dangerouslySetInnerHTML={{__html: stringifiedSvg}}/> |
Note from maintainers: Starting with React 15, we should have a complete support of the subset of SVG specifications that is actually implemented by browsers.
If you find a missing attribute, or if a tag does not work correctly, please write a comment below. Note that
React.DOM.*
factory functions might not provide all tags, but you should be able to useReact.createFactory
orReact.createElement()
directly for the missing ones. Or you can just use JSX which translates toReact.createElement()
and supports all tags inherently.The text was updated successfully, but these errors were encountered: