From 1e5c556ada7fcc51146dbf63116d93ac1728ac86 Mon Sep 17 00:00:00 2001
From: Eric Florenzano <floguy@gmail.com>
Date: Mon, 6 Jan 2014 17:53:39 -0800
Subject: [PATCH 1/2] Add support for SVG tspan and image elements, and the
 preserveAspectRatio attribute.

---
 docs/docs/ref-04-tags-and-attributes.md | 14 +++++++++-----
 src/core/ReactDOM.js                    |  4 +++-
 src/dom/DefaultDOMPropertyConfig.js     |  7 ++++++-
 src/vendor/core/getMarkupWrap.js        |  7 +++++--
 vendor/fbtransform/transforms/xjs.js    |  1 +
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md
index a32b2bd200f..5fa40d23151 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 defs g image line linearGradient path polygon polyline radialGradient
+rect stop svg text tspan
 
 ```
 
@@ -69,7 +69,11 @@ 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
-spreadMethod stopColor stopOpacity stroke strokeLinecap strokeWidth transform
-version viewBox x1 x2 x y1 y2 y
+cx cy d fill fx fy gradientTransform gradientUnits offset points
+preserveAspectRatio r rx ry spreadMethod stopColor stopOpacity stroke
+strokeLinecap strokeWidth transform version viewBox x1 x2 x y1 y2 y
 ```
+
+The non-standard `xlinkNamespace` and `xlinkHref` attributes are supported in
+order for SVGs to be able to include linked images, and they resolve into
+`xmlns:xlink` and `xlink:href`, respectively.
\ No newline at end of file
diff --git a/src/core/ReactDOM.js b/src/core/ReactDOM.js
index abe0630302a..d8abf5631de 100644
--- a/src/core/ReactDOM.js
+++ b/src/core/ReactDOM.js
@@ -187,7 +187,9 @@ var ReactDOM = objMapKeyVal({
   rect: false,
   stop: false,
   svg: false,
-  text: false
+  text: false,
+  tspan: false,
+  image: true
 }, createDOMComponentClass);
 
 var injection = {
diff --git a/src/dom/DefaultDOMPropertyConfig.js b/src/dom/DefaultDOMPropertyConfig.js
index c9ea8d67715..8e6a40db43e 100644
--- a/src/dom/DefaultDOMPropertyConfig.js
+++ b/src/dom/DefaultDOMPropertyConfig.js
@@ -132,6 +132,7 @@ var DefaultDOMPropertyConfig = {
     gradientUnits: MUST_USE_ATTRIBUTE,
     offset: MUST_USE_ATTRIBUTE,
     points: MUST_USE_ATTRIBUTE,
+    preserveAspectRatio: MUST_USE_ATTRIBUTE,
     r: MUST_USE_ATTRIBUTE,
     rx: MUST_USE_ATTRIBUTE,
     ry: MUST_USE_ATTRIBUTE,
@@ -144,6 +145,8 @@ var DefaultDOMPropertyConfig = {
     transform: MUST_USE_ATTRIBUTE,
     version: MUST_USE_ATTRIBUTE,
     viewBox: MUST_USE_ATTRIBUTE,
+    xlinkNamespace: MUST_USE_ATTRIBUTE,
+    xlinkHref: MUST_USE_ATTRIBUTE,
     x1: MUST_USE_ATTRIBUTE,
     x2: MUST_USE_ATTRIBUTE,
     x: MUST_USE_ATTRIBUTE,
@@ -161,7 +164,9 @@ var DefaultDOMPropertyConfig = {
     stopOpacity: 'stop-opacity',
     strokeLinecap: 'stroke-linecap',
     strokeWidth: 'stroke-width',
-    viewBox: 'viewBox'
+    viewBox: 'viewBox',
+    xlinkNamespace: 'xmlns:xlink',
+    xlinkHref: 'xlink:href'
   },
   DOMPropertyNames: {
     autoCapitalize: 'autocapitalize',
diff --git a/src/vendor/core/getMarkupWrap.js b/src/vendor/core/getMarkupWrap.js
index ece2b691df9..cb500a57227 100644
--- a/src/vendor/core/getMarkupWrap.js
+++ b/src/vendor/core/getMarkupWrap.js
@@ -46,7 +46,8 @@ var shouldWrap = {
   'radialGradient': true,
   'rect': true,
   'stop': true,
-  'text': true
+  'text': true,
+  'tspan': true
 };
 
 var selectWrap = [1, '<select multiple="true">', '</select>'];
@@ -79,6 +80,7 @@ var markupWrap = {
   'circle': svgWrap,
   'defs': svgWrap,
   'g': svgWrap,
+  'image': svgWrap,
   'line': svgWrap,
   'linearGradient': svgWrap,
   'path': svgWrap,
@@ -87,7 +89,8 @@ var markupWrap = {
   'radialGradient': svgWrap,
   'rect': svgWrap,
   'stop': svgWrap,
-  'text': svgWrap
+  'text': svgWrap,
+  'tspan': svgWrap
 };
 
 /**
diff --git a/vendor/fbtransform/transforms/xjs.js b/vendor/fbtransform/transforms/xjs.js
index faa9fb40f33..f098baa2e16 100644
--- a/vendor/fbtransform/transforms/xjs.js
+++ b/vendor/fbtransform/transforms/xjs.js
@@ -142,6 +142,7 @@ var knownTags = {
   title: true,
   tr: true,
   track: true,
+  tspan: true,
   u: true,
   ul: true,
   'var': true,

From c7009f849bf01fad6c8da4ed07694093a8d94e20 Mon Sep 17 00:00:00 2001
From: Eric Florenzano <floguy@gmail.com>
Date: Mon, 6 Jan 2014 18:36:28 -0800
Subject: [PATCH 2/2] Add missing image element to xjs knownTags

---
 vendor/fbtransform/transforms/xjs.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vendor/fbtransform/transforms/xjs.js b/vendor/fbtransform/transforms/xjs.js
index f098baa2e16..6c449093213 100644
--- a/vendor/fbtransform/transforms/xjs.js
+++ b/vendor/fbtransform/transforms/xjs.js
@@ -77,6 +77,7 @@ var knownTags = {
   html: true,
   i: true,
   iframe: true,
+  image: true,
   img: true,
   input: true,
   ins: true,