From f68057da9a4ae32475935c552bfa265df83fef4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Zr=C5=AFst?= Date: Thu, 5 Nov 2015 06:34:56 +0100 Subject: [PATCH] Add support for SVG marker element Including marker-specific attributes (markerUnits, refX, refY, markerWidth, markerHeight, orient) and an attribute applicaple on path and basic shapes (marker). --- docs/docs/ref-04-tags-and-attributes.it-IT.md | 20 ++++++++++--------- docs/docs/ref-04-tags-and-attributes.ko-KR.md | 20 ++++++++++--------- docs/docs/ref-04-tags-and-attributes.md | 20 ++++++++++--------- .../classic/element/ReactDOMFactories.js | 1 + .../dom/shared/SVGDOMPropertyConfig.js | 12 +++++++++++ 5 files changed, 46 insertions(+), 27 deletions(-) diff --git a/docs/docs/ref-04-tags-and-attributes.it-IT.md b/docs/docs/ref-04-tags-and-attributes.it-IT.md index 9bfe5657f06..774636cc848 100644 --- a/docs/docs/ref-04-tags-and-attributes.it-IT.md +++ b/docs/docs/ref-04-tags-and-attributes.it-IT.md @@ -30,8 +30,8 @@ thead time title tr track u ul var video wbr I seguenti elementi SVG sono supportati: ``` -circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline -radialGradient rect stop svg text tspan +circle clipPath defs ellipse g line linearGradient marker mask path pattern polygon +polyline radialGradient rect stop svg text tspan ``` Potresti trovare utile [react-art](https://github.com/facebook/react-art), una libreria di disegno per React che può disegnare su Canvas, SVG oppure VML (per IE8). @@ -80,11 +80,13 @@ Esiste anche l'attributo specifico di React `dangerouslySetInnerHTML` ([maggiori ``` clipPath 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 -strokeOpacity strokeWidth textAnchor transform version -viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole -xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y +fontSize fx fy gradientTransform gradientUnits marker +markerEnd markerHeight markerMid markerStart markerUnits +markerWidth offset opacity orient patternContentUnits +patternUnits points preserveAspectRatio r refX refY rx ry +spreadMethod stopColor stopOpacity stroke strokeDasharray +strokeLinecap strokeOpacity strokeWidth textAnchor transform +version viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref +xlinkRole xlinkShow xlinkTitle xlinkType xmlBase xmlLang +xmlSpace y1 y2 y ``` diff --git a/docs/docs/ref-04-tags-and-attributes.ko-KR.md b/docs/docs/ref-04-tags-and-attributes.ko-KR.md index 4b93ff3cb38..48ba24104d9 100644 --- a/docs/docs/ref-04-tags-and-attributes.ko-KR.md +++ b/docs/docs/ref-04-tags-and-attributes.ko-KR.md @@ -30,8 +30,8 @@ thead time title tr track u ul var video wbr 다음의 SVG 엘리먼트가 지원됩니다. ``` -circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline -radialGradient rect stop svg text tspan +circle clipPath defs ellipse g line linearGradient marker mask path pattern polygon +polyline radialGradient rect stop svg text tspan ``` 아마 Canvas, SVG, VML(IE8 전용)에 렌더할 때 쓰는 React의 드로잉 라이브러리인 [react-art](https://github.com/facebook/react-art)도 흥미 있으실 수 있습니다. @@ -80,11 +80,13 @@ type useMap value width wmode wrap ``` clipPath 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 -strokeOpacity strokeWidth textAnchor transform version -viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole -xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y +fontSize fx fy gradientTransform gradientUnits marker +markerEnd markerHeight markerMid markerStart markerUnits +markerWidth offset opacity orient patternContentUnits +patternUnits points preserveAspectRatio r refX refY rx ry +spreadMethod stopColor stopOpacity stroke strokeDasharray +strokeLinecap strokeOpacity strokeWidth textAnchor transform +version viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref +xlinkRole xlinkShow xlinkTitle xlinkType xmlBase xmlLang +xmlSpace y1 y2 y ``` diff --git a/docs/docs/ref-04-tags-and-attributes.md b/docs/docs/ref-04-tags-and-attributes.md index 488c5db0c61..a2baa8a2a40 100644 --- a/docs/docs/ref-04-tags-and-attributes.md +++ b/docs/docs/ref-04-tags-and-attributes.md @@ -30,8 +30,8 @@ thead time title tr track u ul var video wbr The following SVG elements are supported: ``` -circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline -radialGradient rect stop svg text tspan +circle clipPath defs ellipse g line linearGradient marker mask path pattern polygon +polyline radialGradient rect stop svg text tspan ``` You may also be interested in [react-art](https://github.com/facebook/react-art), a drawing library for React that can render to Canvas, SVG, or VML (for IE8). @@ -80,11 +80,13 @@ There is also the React-specific attribute `dangerouslySetInnerHTML` ([more here ``` clipPath 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 -strokeOpacity strokeWidth textAnchor transform version -viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole -xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y +fontSize fx fy gradientTransform gradientUnits marker +markerEnd markerHeight markerMid markerStart markerUnits +markerWidth offset opacity orient patternContentUnits +patternUnits points preserveAspectRatio r refX refY rx ry +spreadMethod stopColor stopOpacity stroke strokeDasharray +strokeLinecap strokeOpacity strokeWidth textAnchor transform +version viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref +xlinkRole xlinkShow xlinkTitle xlinkType xmlBase xmlLang +xmlSpace y1 y2 y ``` diff --git a/src/isomorphic/classic/element/ReactDOMFactories.js b/src/isomorphic/classic/element/ReactDOMFactories.js index eeb3234b43f..f1c0bcc02d4 100644 --- a/src/isomorphic/classic/element/ReactDOMFactories.js +++ b/src/isomorphic/classic/element/ReactDOMFactories.js @@ -160,6 +160,7 @@ var ReactDOMFactories = mapObject({ image: 'image', line: 'line', linearGradient: 'linearGradient', + marker: 'marker', mask: 'mask', path: 'path', pattern: 'pattern', diff --git a/src/renderers/dom/shared/SVGDOMPropertyConfig.js b/src/renderers/dom/shared/SVGDOMPropertyConfig.js index 8dad8b1e607..0b5697f173c 100644 --- a/src/renderers/dom/shared/SVGDOMPropertyConfig.js +++ b/src/renderers/dom/shared/SVGDOMPropertyConfig.js @@ -36,16 +36,23 @@ var SVGDOMPropertyConfig = { fy: MUST_USE_ATTRIBUTE, gradientTransform: MUST_USE_ATTRIBUTE, gradientUnits: MUST_USE_ATTRIBUTE, + marker: MUST_USE_ATTRIBUTE, markerEnd: MUST_USE_ATTRIBUTE, + markerHeight: MUST_USE_ATTRIBUTE, markerMid: MUST_USE_ATTRIBUTE, markerStart: MUST_USE_ATTRIBUTE, + markerUnits: MUST_USE_ATTRIBUTE, + markerWidth: MUST_USE_ATTRIBUTE, offset: MUST_USE_ATTRIBUTE, + orient: MUST_USE_ATTRIBUTE, opacity: MUST_USE_ATTRIBUTE, patternContentUnits: MUST_USE_ATTRIBUTE, patternUnits: MUST_USE_ATTRIBUTE, points: MUST_USE_ATTRIBUTE, preserveAspectRatio: MUST_USE_ATTRIBUTE, r: MUST_USE_ATTRIBUTE, + refX: MUST_USE_ATTRIBUTE, + refY: MUST_USE_ATTRIBUTE, rx: MUST_USE_ATTRIBUTE, ry: MUST_USE_ATTRIBUTE, spreadMethod: MUST_USE_ATTRIBUTE, @@ -97,11 +104,16 @@ var SVGDOMPropertyConfig = { gradientTransform: 'gradientTransform', gradientUnits: 'gradientUnits', markerEnd: 'marker-end', + markerHeight: 'markerHeight', markerMid: 'marker-mid', markerStart: 'marker-start', + markerUnits: 'markerUnits', + markerWidth: 'markerWidth', patternContentUnits: 'patternContentUnits', patternUnits: 'patternUnits', preserveAspectRatio: 'preserveAspectRatio', + refX: 'refX', + refY: 'refY', spreadMethod: 'spreadMethod', stopColor: 'stop-color', stopOpacity: 'stop-opacity',