diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md index 8f2954e2bb..efae47d6a9 100644 --- a/docs/docs/ref-04-tags-and-attributes.md +++ b/docs/docs/ref-04-tags-and-attributes.md @@ -30,7 +30,7 @@ thead time title tr track u ul var video wbr The following SVG elements are supported: ``` -circle defs ellipse g line linearGradient mask path pattern polygon polyline +circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline radialGradient rect stop svg text tspan ``` @@ -77,7 +77,7 @@ There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here ### SVG Attributes ``` -cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform +clip-path cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform gradientUnits markerEnd markerMid markerStart offset opacity patternContentUnits patternUnits points preserveAspectRatio r rx ry spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap diff --git a/src/browser/ReactDOM.js b/src/browser/ReactDOM.js index c8747bdf2f..78ecc53fbf 100644 --- a/src/browser/ReactDOM.js +++ b/src/browser/ReactDOM.js @@ -153,6 +153,7 @@ var ReactDOM = mapObject({ // SVG circle: 'circle', + clipPath: 'clipPath', defs: 'defs', ellipse: 'ellipse', g: 'g', diff --git a/src/browser/ui/dom/SVGDOMPropertyConfig.js b/src/browser/ui/dom/SVGDOMPropertyConfig.js index 028263c52f..ef2f9c3ffc 100644 --- a/src/browser/ui/dom/SVGDOMPropertyConfig.js +++ b/src/browser/ui/dom/SVGDOMPropertyConfig.js @@ -19,6 +19,7 @@ var MUST_USE_ATTRIBUTE = DOMProperty.injection.MUST_USE_ATTRIBUTE; var SVGDOMPropertyConfig = { Properties: { + clipPath: MUST_USE_ATTRIBUTE, cx: MUST_USE_ATTRIBUTE, cy: MUST_USE_ATTRIBUTE, d: MUST_USE_ATTRIBUTE, @@ -64,6 +65,7 @@ var SVGDOMPropertyConfig = { y: MUST_USE_ATTRIBUTE }, DOMAttributeNames: { + clipPath: 'clip-path', fillOpacity: 'fill-opacity', fontFamily: 'font-family', fontSize: 'font-size', diff --git a/src/vendor/core/getMarkupWrap.js b/src/vendor/core/getMarkupWrap.js index 9db77ee42b..fefe4b027b 100644 --- a/src/vendor/core/getMarkupWrap.js +++ b/src/vendor/core/getMarkupWrap.js @@ -29,6 +29,7 @@ var shouldWrap = { // Force wrapping for SVG elements because if they get created inside a
, // they will be initialized in the wrong namespace (and will not display). 'circle': true, + 'clipPath': true, 'defs': true, 'ellipse': true, 'g': true,