diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md index a32b2bd200f..23723495248 100644 --- a/docs/docs/ref-04-tags-and-attributes.md +++ b/docs/docs/ref-04-tags-and-attributes.md @@ -31,8 +31,8 @@ title tr track u ul var video wbr The following SVG elements are supported: ``` -circle defs g line linearGradient path polygon polyline radialGradient rect stop -svg text +circle clipPath defs g line linearGradient path polygon polyline radialGradient rect stop +svg symbol text use ``` @@ -69,7 +69,7 @@ In addition, there is the React-specific attribute `dangerouslySetInnerHTML` ([m ### SVG Attributes ``` -cx cy d fill fx fy gradientTransform gradientUnits offset points r rx ry +clipPath cx cy d fill fx fy gradientTransform gradientUnits offset points r rx ry spreadMethod stopColor stopOpacity stroke strokeLinecap strokeWidth transform -version viewBox x1 x2 x y1 y2 y +version viewBox x1 x2 x xlinkHref y1 y2 y ``` diff --git a/src/core/ReactDOM.js b/src/core/ReactDOM.js index abe0630302a..9956c10f1f5 100644 --- a/src/core/ReactDOM.js +++ b/src/core/ReactDOM.js @@ -187,7 +187,10 @@ var ReactDOM = objMapKeyVal({ rect: false, stop: false, svg: false, - text: false + text: false, + symbol: false, + use: false, + clipPath: false }, createDOMComponentClass); var injection = { diff --git a/src/dom/DefaultDOMPropertyConfig.js b/src/dom/DefaultDOMPropertyConfig.js index c9ea8d67715..495422c2d5f 100644 --- a/src/dom/DefaultDOMPropertyConfig.js +++ b/src/dom/DefaultDOMPropertyConfig.js @@ -122,6 +122,7 @@ var DefaultDOMPropertyConfig = { /** * SVG Properties */ + clipPath: MUST_USE_ATTRIBUTE, cx: MUST_USE_ATTRIBUTE, cy: MUST_USE_ATTRIBUTE, d: MUST_USE_ATTRIBUTE, @@ -147,12 +148,14 @@ var DefaultDOMPropertyConfig = { x1: MUST_USE_ATTRIBUTE, x2: MUST_USE_ATTRIBUTE, x: MUST_USE_ATTRIBUTE, + xlinkHref: MUST_USE_ATTRIBUTE, y1: MUST_USE_ATTRIBUTE, y2: MUST_USE_ATTRIBUTE, y: MUST_USE_ATTRIBUTE }, DOMAttributeNames: { className: 'class', + clipPath: 'clip-path', gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', htmlFor: 'for', @@ -161,7 +164,8 @@ var DefaultDOMPropertyConfig = { stopOpacity: 'stop-opacity', strokeLinecap: 'stroke-linecap', strokeWidth: 'stroke-width', - viewBox: 'viewBox' + viewBox: 'viewBox', + xlinkHref: 'xlink:href' }, DOMPropertyNames: { autoCapitalize: 'autocapitalize', diff --git a/src/vendor/core/getMarkupWrap.js b/src/vendor/core/getMarkupWrap.js index ece2b691df9..00168d4c91d 100644 --- a/src/vendor/core/getMarkupWrap.js +++ b/src/vendor/core/getMarkupWrap.js @@ -46,7 +46,10 @@ var shouldWrap = { 'radialGradient': true, 'rect': true, 'stop': true, - 'text': true + 'text': true, + 'symbol': true, + 'use': true, + 'clipPath': true }; var selectWrap = [1, '']; diff --git a/vendor/fbtransform/transforms/xjs.js b/vendor/fbtransform/transforms/xjs.js index faa9fb40f33..c4c90515308 100644 --- a/vendor/fbtransform/transforms/xjs.js +++ b/vendor/fbtransform/transforms/xjs.js @@ -40,6 +40,7 @@ var knownTags = { caption: true, circle: true, cite: true, + clipPath: true, code: true, col: true, colgroup: true, @@ -130,6 +131,7 @@ var knownTags = { summary: true, sup: true, svg: true, + symbol: true, table: true, tbody: true, td: true, @@ -144,6 +146,7 @@ var knownTags = { track: true, u: true, ul: true, + use: true, 'var': true, video: true, wbr: true