Skip to content

Add full support for SVG 1.1 #938

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.

Sign up for GitHub

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

Closed
brycekahle wants to merge 3 commits into from
Closed

Add full support for SVG 1.1 #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccb6117
Add elements to complete SVG 1.1 support
brycekahle Jan 18, 2014
1103d6d
Add attributes to complete SVG 1.1 support
brycekahle Jan 19, 2014
4e4d60e
Remove attributes that can be set via CSS
brycekahle Jan 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions docs/docs/ref-04-tags-and-attributes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ 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
altGlyph altGlyphDef altGlyphItem animate animateColor animateMotion animateTransform circle clipPath color-profile cursor defs desc feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence filter font font-face font-face-format font-face-name font-face-src font-face-uri foreignObject g glyph glyphRef hkern image line linearGradient marker mask metadata missing-glyph mpath path pattern polygon polyline radialGradient rect set stop switch symbol svg text textPath tref tspan use view vkern

```

Expand Down Expand Up @@ -68,8 +67,10 @@ In addition, there is the React-specific attribute `dangerouslySetInnerHTML` ([m

### SVG Attributes

> Note:
>
> The `svgIn` attribute corresponds to the `in` attribute.

```
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
accentHeight accumulate additive alphabetic amplitude arabicForm ascent attributeName attributeType azimuth baseFrequency baseProfile bbox begin bias by calcMode capHeight clipPathUnits contentScriptType contentStyleType cursor cx cy d descent diffuseConstant divisor dur dx dy edgeMode elevation end exponent externalResourcesRequired filterRes filterUnits format from fx fy g1 g2 glyphName glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX horixOriginY ideographic in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength keyPoints keySplines keyTimes lengthAdjust limitingConeAngle local markerHeight markerUnits markerWidth maskContentUnits maskUnits mathematical media mode numOctaves offset operator order orient orientation origin overlinePosition overlineThcikness panose1 path pathLength patternContentUnits patternTransform patternUnits points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur repeatExtensions requiredExtensions requiredFeatures restart result rotate rx ry scale seed slope spacing specularConstant specularExponent spreadMethod startOffset stdDeviation stemh stemv stitchTiles strikethroughPosition strikethroughThickness string surfaceScale svgIn systemLanguage tableValues targetX targetY textLength to transform u1 u2 underlinePosition underlineThickness unicode unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values version vertAdvY vertOriginX vertOriginY viewBox viewTarget widths x1 x2 x xHeight xChannelSelector xlinkActuate xlinkArcrole xlinkHref xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y yChannelSelector z zoomAndPan
```
64 changes: 63 additions & 1 deletion src/core/ReactDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,19 +175,81 @@ var ReactDOM = objMapKeyVal({
wbr: false,

// SVG
altGlyph: false,
altGlyphDef: false,
altGlyphItem: false,
animate: false,
animateColor: false,
animateMotion: false,
animateTransform: false,
circle: false,
clipPath: false,
'color-profile': false,
cursor: false,
defs: false,
desc: false,
feBlend: false,
feColorMatrix: false,
feComponentTransfer: false,
feComposite: false,
feConvolveMatrix: false,
feDiffuseLighting: false,
feDisplacementMap: false,
feDistantLight: false,
feFlood: false,
feFuncA: false,
feFuncB: false,
feFuncG: false,
feFuncR: false,
feGaussianBlur: false,
feImage: false,
feMerge: false,
feMergeNode: false,
feMorphology: false,
feOffset: false,
fePointLight: false,
feSpecularLighting: false,
feSpotLight: false,
feTile: false,
feTurbulence: false,
filter: false,
font: false,
'font-face': false,
Copy link
Member

@zpao zpao Jan 20, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tested that this even works? I'm not sure if the transform actually will parse hyphenated tags.

Copy link
Member

@zpao zpao Jan 23, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And while it may work here, the transform step definitely doesn't allow hyphenated nodes - <font-face> gets transformed to React.DOM.font-face.

'font-face-format': false,
'font-face-name': false,
'font-face-src': false,
'font-face-uri': false,
foreignObject: false,
g: false,
glyph: false,
glyphRef: false,
hkern: false,
image: false,
line: false,
linearGradient: false,
marker: false,
mask: false,
metadata: false,
'missing-glyph': false,
mpath: false,
path: false,
pattern: false,
polygon: false,
polyline: false,
radialGradient: false,
rect: false,
set: false,
stop: false,
'switch': false,
svg: false,
text: false
symbol: false,
text: false,
textPath: false,
tref: false,
tspan: false,
use: false,
view: false,
vkern: false
}, createDOMComponentClass);

var injection = {
Expand Down
24 changes: 24 additions & 0 deletions src/dom/DOMProperty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ var DOMPropertyInjection = {
HAS_SIDE_EFFECTS: 0x4,
HAS_BOOLEAN_VALUE: 0x8,
HAS_POSITIVE_NUMERIC_VALUE: 0x10,
MUST_USE_NAMESPACED_ATTRIBUTE: 0x20,

/**
* Inject some specialized knowledge about the DOM. This takes a config object
Expand All @@ -57,13 +58,17 @@ var DOMPropertyInjection = {
* DOMMutationMethods: Properties that require special mutation methods. If
* `value` is undefined, the mutation method should unset the property.
*
* DOMAttributeNamespaces: attribute name to namespace mapping for attributes
* that require setAttributeNS()
*
* @param {object} domPropertyConfig the config as described above.
*/
injectDOMPropertyConfig: function(domPropertyConfig) {
var Properties = domPropertyConfig.Properties || {};
var DOMAttributeNames = domPropertyConfig.DOMAttributeNames || {};
var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
var DOMAttributeNamespaces = domPropertyConfig.DOMAttributeNamespaces || {};

if (domPropertyConfig.isCustomAttribute) {
DOMProperty._isCustomAttributeFunctions.push(
Expand Down Expand Up @@ -101,6 +106,11 @@ var DOMPropertyInjection = {
DOMProperty.getMutationMethod[propName] = mutationMethod;
}

var attributeNamespace = DOMAttributeNamespaces[propName];
if (attributeNamespace) {
DOMProperty.getAttributeNamespace[propName] = attributeNamespace;
}

var propConfig = Properties[propName];
DOMProperty.mustUseAttribute[propName] =
propConfig & DOMPropertyInjection.MUST_USE_ATTRIBUTE;
Expand All @@ -112,6 +122,8 @@ var DOMPropertyInjection = {
propConfig & DOMPropertyInjection.HAS_BOOLEAN_VALUE;
DOMProperty.hasPositiveNumericValue[propName] =
propConfig & DOMPropertyInjection.HAS_POSITIVE_NUMERIC_VALUE;
DOMProperty.mustUseNamespacedAttribute[propName] =
propConfig & DOMPropertyInjection.MUST_USE_NAMESPACED_ATTRIBUTE;

invariant(
!DOMProperty.mustUseAttribute[propName] ||
Expand All @@ -131,6 +143,18 @@ var DOMPropertyInjection = {
'DOMProperty: Cannot have both boolean and positive numeric value: %s',
propName
);
invariant(
!DOMProperty.mustUseAttribute[propName] ||
!DOMProperty.mustUseNamespacedAttribute[propName],
'DOMProperty: Cannot use both attribute and namespaced attribute: %s',
propName
);
invariant(
!DOMProperty.mustUseNamespacedAttribute[propName] ||
!DOMProperty.mustUseProperty[propName],
'DOMProperty: Cannot use both namespaced attribute and property: %s',
propName
);
}
}
};
Expand Down
3 changes: 3 additions & 0 deletions src/dom/DOMPropertyOperations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,9 @@ var DOMPropertyOperations = {
mutationMethod(node, value);
} else if (shouldIgnoreValue(name, value)) {
this.deleteValueForProperty(node, name);
} else if (DOMProperty.mustUseNamespacedAttribute[name]) {
var ns = DOMProperty.getAttributeNamespace[name];
node.setAttributeNS(ns, DOMProperty.getAttributeName[name], '' + value);
} else if (DOMProperty.mustUseAttribute[name]) {
node.setAttribute(DOMProperty.getAttributeName[name], '' + value);
} else {
Expand Down
Loading