From e8628cb058c4ecadef4b329c0a1c7f6afc7a1f61 Mon Sep 17 00:00:00 2001 From: yzg Date: Thu, 6 Sep 2018 20:36:18 +0800 Subject: [PATCH 01/15] fix trim --- index.js | 343 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 209 insertions(+), 134 deletions(-) diff --git a/index.js b/index.js index ee69ec70..816a7a8a 100644 --- a/index.js +++ b/index.js @@ -1,24 +1,24 @@ -import React, {Component} from "react"; -import {View} from 'react-native'; -import PropTypes from 'prop-types' +import React, { Component } from 'react'; +import { View } from 'react-native'; +import PropTypes from 'prop-types'; import xmldom from 'xmldom'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; -import Svg,{ - Circle, - Ellipse, - G , - LinearGradient, - RadialGradient, - Line, - Path, - Polygon, - Polyline, - Rect, - Text, - TSpan, - Defs, - Stop +import Svg, { + Circle, + Ellipse, + G, + LinearGradient, + RadialGradient, + Line, + Path, + Polygon, + Polyline, + Rect, + Text, + TSpan, + Defs, + Stop } from 'react-native-svg'; import * as utils from './utils'; @@ -54,20 +54,38 @@ const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']); const STOP_ATTS = ['offset']; const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry']; -const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight'] +const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight']; const POLYGON_ATTS = ['points']; const POLYLINE_ATTS = ['points']; -const COMMON_ATTS = ['fill', 'fillOpacity', 'stroke', 'strokeWidth', 'strokeOpacity', 'opacity', - 'strokeLinecap', 'strokeLinejoin', - 'strokeDasharray', 'strokeDashoffset', 'x', 'y', 'rotate', 'scale', 'origin', 'originX', 'originY']; +const COMMON_ATTS = [ + 'fill', + 'fillOpacity', + 'stroke', + 'strokeWidth', + 'strokeOpacity', + 'opacity', + 'strokeLinecap', + 'strokeLinejoin', + 'strokeDasharray', + 'strokeDashoffset', + 'x', + 'y', + 'rotate', + 'scale', + 'origin', + 'originX', + 'originY' +]; let ind = 0; -function fixYPosition (y, node) { +function fixYPosition(y, node) { if (node.attributes) { - const fontSizeAttr = Object.keys(node.attributes).find(a => node.attributes[a].name === 'font-size'); + const fontSizeAttr = Object.keys(node.attributes).find( + a => node.attributes[a].name === 'font-size' + ); if (fontSizeAttr) { return '' + (parseFloat(y) - parseFloat(node.attributes[fontSizeAttr].value)); } @@ -75,22 +93,21 @@ function fixYPosition (y, node) { if (!node.parentNode) { return y; } - return fixYPosition(y, node.parentNode) + return fixYPosition(y, node.parentNode); } -class SvgUri extends Component{ - - constructor(props){ +class SvgUri extends Component { + constructor(props) { super(props); - this.state = {fill: props.fill, svgXmlData: props.svgXmlData}; + this.state = { fill: props.fill, svgXmlData: props.svgXmlData }; - this.createSVGElement = this.createSVGElement.bind(this); - this.obtainComponentAtts = this.obtainComponentAtts.bind(this); - this.inspectNode = this.inspectNode.bind(this); - this.fetchSVGData = this.fetchSVGData.bind(this); + this.createSVGElement = this.createSVGElement.bind(this); + this.obtainComponentAtts = this.obtainComponentAtts.bind(this); + this.inspectNode = this.inspectNode.bind(this); + this.fetchSVGData = this.fetchSVGData.bind(this); - this.isComponentMounted = false; + this.isComponentMounted = false; // Gets the image data from an URL or a static file if (props.source) { @@ -103,11 +120,11 @@ class SvgUri extends Component{ this.isComponentMounted = true; } - componentWillReceiveProps (nextProps){ + componentWillReceiveProps(nextProps) { if (nextProps.source) { const source = resolveAssetSource(nextProps.source) || {}; const oldSource = resolveAssetSource(this.props.source) || {}; - if(source.uri !== oldSource.uri){ + if (source.uri !== oldSource.uri) { this.fetchSVGData(source.uri); } } @@ -122,17 +139,18 @@ class SvgUri extends Component{ } componentWillUnmount() { - this.isComponentMounted = false + this.isComponentMounted = false; } async fetchSVGData(uri) { - let responseXML = null, error = null; + let responseXML = null, + error = null; try { const response = await fetch(uri); responseXML = await response.text(); - } catch(e) { + } catch (e) { error = e; - console.error("ERROR SVG", e); + console.error('ERROR SVG', e); } finally { if (this.isComponentMounted) { this.setState({ svgXmlData: responseXML }, () => { @@ -151,108 +169,169 @@ class SvgUri extends Component{ trimElementChilden(children) { for (child of children) { if (typeof child === 'string') { - if (child.trim.length === 0) - children.splice(children.indexOf(child), 1); + if (child.trim().length === 0) children.splice(children.indexOf(child), 1); } } } - createSVGElement(node, childs){ + createSVGElement(node, childs) { this.trimElementChilden(childs); let componentAtts = {}; const i = ind++; switch (node.nodeName) { - case 'svg': - componentAtts = this.obtainComponentAtts(node, SVG_ATTS); - if (this.props.width) { - componentAtts.width = this.props.width; - } - if (this.props.height) { - componentAtts.height = this.props.height; - } + case 'svg': + componentAtts = this.obtainComponentAtts(node, SVG_ATTS); + if (this.props.width) { + componentAtts.width = this.props.width; + } + if (this.props.height) { + componentAtts.height = this.props.height; + } - return {childs}; - case 'g': - componentAtts = this.obtainComponentAtts(node, G_ATTS); - return {childs}; - case 'path': - componentAtts = this.obtainComponentAtts(node, PATH_ATTS); - return {childs}; - case 'circle': - componentAtts = this.obtainComponentAtts(node, CIRCLE_ATTS); - return {childs}; - case 'rect': - componentAtts = this.obtainComponentAtts(node, RECT_ATTS); - return {childs}; - case 'line': - componentAtts = this.obtainComponentAtts(node, LINE_ATTS); - return {childs}; - case 'defs': - return {childs}; - case 'linearGradient': - componentAtts = this.obtainComponentAtts(node, LINEARG_ATTS); - return {childs}; - case 'radialGradient': - componentAtts = this.obtainComponentAtts(node, RADIALG_ATTS); - return {childs}; - case 'stop': - componentAtts = this.obtainComponentAtts(node, STOP_ATTS); - return {childs}; - case 'ellipse': - componentAtts = this.obtainComponentAtts(node, ELLIPSE_ATTS); - return {childs}; - case 'polygon': - componentAtts = this.obtainComponentAtts(node, POLYGON_ATTS); - return {childs}; - case 'polyline': - componentAtts = this.obtainComponentAtts(node, POLYLINE_ATTS); - return {childs}; - case 'text': - componentAtts = this.obtainComponentAtts(node, TEXT_ATTS); - if (componentAtts.y) { - componentAtts.y = fixYPosition(componentAtts.y, node) - } - return {childs}; - case 'tspan': - componentAtts = this.obtainComponentAtts(node, TEXT_ATTS); - if (componentAtts.y) { - componentAtts.y = fixYPosition(componentAtts.y, node) - } - return {childs}; - default: - return null; + return ( + + {childs} + + ); + case 'g': + componentAtts = this.obtainComponentAtts(node, G_ATTS); + return ( + + {childs} + + ); + case 'path': + componentAtts = this.obtainComponentAtts(node, PATH_ATTS); + return ( + + {childs} + + ); + case 'circle': + componentAtts = this.obtainComponentAtts(node, CIRCLE_ATTS); + return ( + + {childs} + + ); + case 'rect': + componentAtts = this.obtainComponentAtts(node, RECT_ATTS); + return ( + + {childs} + + ); + case 'line': + componentAtts = this.obtainComponentAtts(node, LINE_ATTS); + return ( + + {childs} + + ); + case 'defs': + return {childs}; + case 'linearGradient': + componentAtts = this.obtainComponentAtts(node, LINEARG_ATTS); + return ( + + {childs} + + ); + case 'radialGradient': + componentAtts = this.obtainComponentAtts(node, RADIALG_ATTS); + return ( + + {childs} + + ); + case 'stop': + componentAtts = this.obtainComponentAtts(node, STOP_ATTS); + return ( + + {childs} + + ); + case 'ellipse': + componentAtts = this.obtainComponentAtts(node, ELLIPSE_ATTS); + return ( + + {childs} + + ); + case 'polygon': + componentAtts = this.obtainComponentAtts(node, POLYGON_ATTS); + return ( + + {childs} + + ); + case 'polyline': + componentAtts = this.obtainComponentAtts(node, POLYLINE_ATTS); + return ( + + {childs} + + ); + case 'text': + componentAtts = this.obtainComponentAtts(node, TEXT_ATTS); + if (componentAtts.y) { + componentAtts.y = fixYPosition(componentAtts.y, node); + } + return ( + + {childs} + + ); + case 'tspan': + componentAtts = this.obtainComponentAtts(node, TEXT_ATTS); + if (componentAtts.y) { + componentAtts.y = fixYPosition(componentAtts.y, node); + } + return ( + + {childs} + + ); + default: + return null; } } - obtainComponentAtts({attributes}, enabledAttributes) { + obtainComponentAtts({ attributes }, enabledAttributes) { const styleAtts = {}; if (this.state.fill && this.props.fillAll) { styleAtts.fill = this.state.fill; } - Array.from(attributes).forEach(({nodeName, nodeValue}) => { - Object.assign(styleAtts, utils.transformStyle({ - nodeName, - nodeValue, - fillProp: this.state.fill - })); + Array.from(attributes).forEach(({ nodeName, nodeValue }) => { + Object.assign( + styleAtts, + utils.transformStyle({ + nodeName, + nodeValue, + fillProp: this.state.fill + }) + ); }); - const componentAtts = Array.from(attributes) + const componentAtts = Array.from(attributes) .map(utils.camelCaseNodeName) .map(utils.removePixelsFromNodeValue) .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS))) - .reduce((acc, {nodeName, nodeValue}) => { - acc[nodeName] = (this.state.fill && nodeName === 'fill' && nodeValue !== 'none') ? this.state.fill : nodeValue - return acc + .reduce((acc, { nodeName, nodeValue }) => { + acc[nodeName] = + this.state.fill && nodeName === 'fill' && nodeValue !== 'none' + ? this.state.fill + : nodeValue; + return acc; }, {}); Object.assign(componentAtts, styleAtts); return componentAtts; } - inspectNode(node){ + inspectNode(node) { // Only process accepted elements if (!ACCEPTED_SVG_ELEMENTS.includes(node.nodeName)) { return null; @@ -263,45 +342,41 @@ class SvgUri extends Component{ // if have children process them. // Recursive function. - if (node.childNodes && node.childNodes.length > 0){ - for (let i = 0; i < node.childNodes.length; i++){ - const isTextValue = node.childNodes[i].nodeValue - if (isTextValue) { - arrayElements.push(node.childNodes[i].nodeValue) - } else { - const nodo = this.inspectNode(node.childNodes[i]); - if (nodo != null) { - arrayElements.push(nodo); - } + if (node.childNodes && node.childNodes.length > 0) { + for (let i = 0; i < node.childNodes.length; i++) { + const isTextValue = node.childNodes[i].nodeValue; + if (isTextValue) { + arrayElements.push(node.childNodes[i].nodeValue); + } else { + const nodo = this.inspectNode(node.childNodes[i]); + if (nodo != null) { + arrayElements.push(nodo); } } + } } return this.createSVGElement(node, arrayElements); } - render () { + render() { try { if (this.state.svgXmlData == null) { return null; } const inputSVG = this.state.svgXmlData.substring( - this.state.svgXmlData.indexOf("") + 6) + this.state.svgXmlData.indexOf('') + 6 ); const doc = new xmldom.DOMParser().parseFromString(inputSVG); const rootSVG = this.inspectNode(doc.childNodes[0]); - return( - - {rootSVG} - - ); - } catch(e){ - console.error("ERROR SVG", e); + return {rootSVG}; + } catch (e) { + console.error('ERROR SVG', e); return null; } } @@ -316,6 +391,6 @@ SvgUri.propTypes = { fill: PropTypes.string, onLoad: PropTypes.func, fillAll: PropTypes.bool -} +}; module.exports = SvgUri; From 3ed05a3f881460e48c217f00c96e34b3142cc808 Mon Sep 17 00:00:00 2001 From: ethany <651992456@qq.com> Date: Thu, 6 Sep 2018 21:15:03 +0800 Subject: [PATCH 02/15] add transform, fix --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 816a7a8a..dfbc2137 100644 --- a/index.js +++ b/index.js @@ -76,7 +76,8 @@ const COMMON_ATTS = [ 'scale', 'origin', 'originX', - 'originY' + 'originY', + 'transform' ]; let ind = 0; From 2d0a8b8f74fff5c6d220acda4f9c50aff3660bb9 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Wed, 12 Sep 2018 16:43:58 +0800 Subject: [PATCH 03/15] fix RECT_ATTS --- index.js | 10 +++------- package.json | 6 +++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index dfbc2137..3b5ae3aa 100644 --- a/index.js +++ b/index.js @@ -47,7 +47,7 @@ const G_ATTS = ['id']; const CIRCLE_ATTS = ['cx', 'cy', 'r']; const PATH_ATTS = ['d']; -const RECT_ATTS = ['width', 'height']; +const RECT_ATTS = ['width', 'height', 'rx']; const LINE_ATTS = ['x1', 'y1', 'x2', 'y2']; const LINEARG_ATTS = LINE_ATTS.concat(['id', 'gradientUnits']); const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']); @@ -84,9 +84,7 @@ let ind = 0; function fixYPosition(y, node) { if (node.attributes) { - const fontSizeAttr = Object.keys(node.attributes).find( - a => node.attributes[a].name === 'font-size' - ); + const fontSizeAttr = Object.keys(node.attributes).find(a => node.attributes[a].name === 'font-size'); if (fontSizeAttr) { return '' + (parseFloat(y) - parseFloat(node.attributes[fontSizeAttr].value)); } @@ -322,9 +320,7 @@ class SvgUri extends Component { .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS))) .reduce((acc, { nodeName, nodeValue }) => { acc[nodeName] = - this.state.fill && nodeName === 'fill' && nodeValue !== 'none' - ? this.state.fill - : nodeValue; + this.state.fill && nodeName === 'fill' && nodeValue !== 'none' ? this.state.fill : nodeValue; return acc; }, {}); Object.assign(componentAtts, styleAtts); diff --git a/package.json b/package.json index 76f6db58..2c045987 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-native-svg-uri", - "version": "1.2.3", + "name": "react-native-svg-uri-sh", + "version": "0.0.4", "description": "Render an SVG Image from an URL", "main": "index.js", "scripts": { @@ -8,7 +8,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/matiascba/react-native-svg-uri.git" + "url": "git+https://github.com/Youzhigang/react-native-svg-uri.git" }, "keywords": [ "react-native", From d0ba020635a0685882ce04c2d1662850e5af2996 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 08:44:24 +0800 Subject: [PATCH 04/15] pr #149 --- index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 3b5ae3aa..fb7cde1d 100644 --- a/index.js +++ b/index.js @@ -331,7 +331,7 @@ class SvgUri extends Component { inspectNode(node) { // Only process accepted elements if (!ACCEPTED_SVG_ELEMENTS.includes(node.nodeName)) { - return null; + return ; } // Process the xml node @@ -362,10 +362,9 @@ class SvgUri extends Component { return null; } - const inputSVG = this.state.svgXmlData.substring( - this.state.svgXmlData.indexOf('') + 6 - ); + const inputSVG = this.state.svgXmlData + .substring(this.state.svgXmlData.indexOf('') + 6) + .replace(//g, ''); const doc = new xmldom.DOMParser().parseFromString(inputSVG); From 9faac03c3266096d02a453e38ac579a5c5ee2dba Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 08:45:33 +0800 Subject: [PATCH 05/15] pr #141 --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index fb7cde1d..b7a082cf 100644 --- a/index.js +++ b/index.js @@ -51,7 +51,7 @@ const RECT_ATTS = ['width', 'height', 'rx']; const LINE_ATTS = ['x1', 'y1', 'x2', 'y2']; const LINEARG_ATTS = LINE_ATTS.concat(['id', 'gradientUnits']); const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']); -const STOP_ATTS = ['offset']; +const STOP_ATTS = ['offset', 'stopColor']; const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry']; const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight']; From 38806c216a44b6f29d225387ea860dcf3cbb2b87 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:05:36 +0800 Subject: [PATCH 06/15] pr #140 stroke prop support --- index.d.ts | 5 +++++ index.js | 19 ++++++++++++++++--- utils.js | 5 +++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/index.d.ts b/index.d.ts index 3fd7685f..b9e5171d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -35,6 +35,11 @@ interface SvgUriProps { */ fill?: string + /** + * Stroke color for the svg object + */ + stroke?: string + /** * Invoked when load completes successfully. */ diff --git a/index.js b/index.js index b7a082cf..26981ef9 100644 --- a/index.js +++ b/index.js @@ -99,7 +99,8 @@ class SvgUri extends Component { constructor(props) { super(props); - this.state = { fill: props.fill, svgXmlData: props.svgXmlData }; + this.state = { fill: props.fill, svgXmlData: props.svgXmlData, stroke: props.stroke }; + // this.state = { fill: props.fill, svgXmlData: props.svgXmlData }; this.createSVGElement = this.createSVGElement.bind(this); this.obtainComponentAtts = this.obtainComponentAtts.bind(this); @@ -135,6 +136,10 @@ class SvgUri extends Component { if (nextProps.fill !== this.props.fill) { this.setState({ fill: nextProps.fill }); } + + if (nextProps.stroke !== this.props.stroke) { + this.setState({ stroke: nextProps.stroke }); + } } componentWillUnmount() { @@ -309,7 +314,8 @@ class SvgUri extends Component { utils.transformStyle({ nodeName, nodeValue, - fillProp: this.state.fill + fillProp: this.state.fill, + strokeProp: this.state.stroke }) ); }); @@ -320,7 +326,13 @@ class SvgUri extends Component { .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS))) .reduce((acc, { nodeName, nodeValue }) => { acc[nodeName] = - this.state.fill && nodeName === 'fill' && nodeValue !== 'none' ? this.state.fill : nodeValue; + this.state.fill && nodeName === 'fill' && nodeValue !== 'none' + ? this.state.fill + : this.state.stroke && nodeName === 'stroke' && nodeValue !== 'none' + ? this.state.stroke + : nodeValue; + // acc[nodeName] = + // this.state.fill && nodeName === 'fill' && nodeValue !== 'none' ? this.state.fill : nodeValue; return acc; }, {}); Object.assign(componentAtts, styleAtts); @@ -384,6 +396,7 @@ SvgUri.propTypes = { height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), svgXmlData: PropTypes.string, source: PropTypes.any, + strokeProp: this.state.stroke, fill: PropTypes.string, onLoad: PropTypes.func, fillAll: PropTypes.bool diff --git a/utils.js b/utils.js index 38c3dd9d..c129400e 100644 --- a/utils.js +++ b/utils.js @@ -10,9 +10,10 @@ export const transformStyle = ({nodeName, nodeValue, fillProp}) => { .reduce((acc, attribute) => { const [property, value] = attribute.split(':'); if (property == "") - return acc; + return acc; else - return {...acc, [camelCase(property)]: fillProp && property === 'fill' ? fillProp : value}; + return { ...acc, [camelCase(property)]: fillProp && property === 'fill' ? fillProp : (strokeProp && property === 'stroke' ? strokeProp : value) }; + // return {...acc, [camelCase(property)]: fillProp && property === 'fill' ? fillProp : value}; }, {}); } return null; From d347dfa872afc9412593d74e4e12725f8a2764f4 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:06:59 +0800 Subject: [PATCH 07/15] fix spell --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 26981ef9..78775240 100644 --- a/index.js +++ b/index.js @@ -170,8 +170,8 @@ class SvgUri extends Component { } // Remove empty strings from children array - trimElementChilden(children) { - for (child of children) { + trimElementChildren(children) { + for (let child of children) { if (typeof child === 'string') { if (child.trim().length === 0) children.splice(children.indexOf(child), 1); } @@ -179,7 +179,7 @@ class SvgUri extends Component { } createSVGElement(node, childs) { - this.trimElementChilden(childs); + this.trimElementChildren(childs); let componentAtts = {}; const i = ind++; switch (node.nodeName) { From 645cce5790c673cbf08f6f1b56e15c4a1f373653 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:08:19 +0800 Subject: [PATCH 08/15] pr #133 --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 78775240..092a8746 100644 --- a/index.js +++ b/index.js @@ -207,7 +207,7 @@ class SvgUri extends Component { case 'path': componentAtts = this.obtainComponentAtts(node, PATH_ATTS); return ( - + {childs} ); From e38aea2913b280850f00799acd05679b99048804 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:10:26 +0800 Subject: [PATCH 09/15] add rx to RECT_ATTS --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 092a8746..02a37dd5 100644 --- a/index.js +++ b/index.js @@ -47,7 +47,7 @@ const G_ATTS = ['id']; const CIRCLE_ATTS = ['cx', 'cy', 'r']; const PATH_ATTS = ['d']; -const RECT_ATTS = ['width', 'height', 'rx']; +const RECT_ATTS = ['width', 'height', 'rx', 'ry']; const LINE_ATTS = ['x1', 'y1', 'x2', 'y2']; const LINEARG_ATTS = LINE_ATTS.concat(['id', 'gradientUnits']); const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']); From 6b1352f0c2f9aa3203b88d18c96f413f1c3f1a0b Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:17:59 +0800 Subject: [PATCH 10/15] image support --- index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.js b/index.js index 02a37dd5..88641571 100644 --- a/index.js +++ b/index.js @@ -56,6 +56,8 @@ const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry']; const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight']; +const IMAGE_ATTS = ['width', 'height', 'preserveAspectRatio', 'href', 'clipPath']; + const POLYGON_ATTS = ['points']; const POLYLINE_ATTS = ['points']; @@ -296,6 +298,12 @@ class SvgUri extends Component { {childs} ); + case 'image': + componentAtts = this.obtainComponentAtts(node, IMAGE_ATTS); + if (componentAtts.y) { + componentAtts.y = fixYPosition(componentAtts.y, node) + } + return {childs}; default: return null; } From a1f0ba0fae9fc4150411a80c71a8f96bd4a37c69 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:19:31 +0800 Subject: [PATCH 11/15] pr #100 --- index.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 88641571..568813eb 100644 --- a/index.js +++ b/index.js @@ -54,7 +54,7 @@ const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']); const STOP_ATTS = ['offset', 'stopColor']; const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry']; -const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight']; +const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight', 'textAnchor']; const IMAGE_ATTS = ['width', 'height', 'preserveAspectRatio', 'href', 'clipPath']; @@ -79,7 +79,8 @@ const COMMON_ATTS = [ 'origin', 'originX', 'originY', - 'transform' + 'transform', + 'clipPath' ]; let ind = 0; @@ -301,9 +302,13 @@ class SvgUri extends Component { case 'image': componentAtts = this.obtainComponentAtts(node, IMAGE_ATTS); if (componentAtts.y) { - componentAtts.y = fixYPosition(componentAtts.y, node) + componentAtts.y = fixYPosition(componentAtts.y, node); } - return {childs}; + return ( + + {childs} + + ); default: return null; } From 4bf3da33f2585ef68e8df8d2cbe4e001ca7dc87d Mon Sep 17 00:00:00 2001 From: youzhigang Date: Thu, 13 Sep 2018 09:20:50 +0800 Subject: [PATCH 12/15] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c045987..8983104d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-svg-uri-sh", - "version": "0.0.4", + "version": "0.0.5", "description": "Render an SVG Image from an URL", "main": "index.js", "scripts": { From 27e00fcbdc6d4e187c5c99b29033865d353c5aa4 Mon Sep 17 00:00:00 2001 From: youzhigang Date: Mon, 17 Sep 2018 10:29:49 +0800 Subject: [PATCH 13/15] style props --- index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index b9e5171d..c3d21ccb 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,7 +4,7 @@ // TypeScript Version: 2.2.2 import React, { Component } from 'react' -import { ImageURISource } from 'react-native' +import { ImageURISource, StyleProp } from 'react-native' interface SvgUriProps { /** @@ -49,6 +49,8 @@ interface SvgUriProps { * Fill the entire svg element with same color */ fillAll?: boolean + + style: StyleProp } export default class SvgUri extends Component { } From 2a4d5c36a67ba070ad8098f18843f29502d4c16c Mon Sep 17 00:00:00 2001 From: youzhigang Date: Mon, 17 Sep 2018 10:43:30 +0800 Subject: [PATCH 14/15] version 0.0.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8983104d..64fd8f12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-svg-uri-sh", - "version": "0.0.5", + "version": "0.0.6", "description": "Render an SVG Image from an URL", "main": "index.js", "scripts": { From ed528d0ba57556797840a74b235a354a8a091bed Mon Sep 17 00:00:00 2001 From: youzhigang Date: Mon, 17 Sep 2018 13:55:02 +0800 Subject: [PATCH 15/15] update gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index eb79dd5f..6ef54e0c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ node_modules .idea +.yarnrc +.npmrc \ No newline at end of file