SVG translate not working with react-native@0.30.0 react-native-svg@4.0.0-rc

I there..

I am using react-native-svg to render charts but there seems to be problem with the svg translate attribute.. as it doesn’t work.

Here is my package.json:

"react": "^15.2.0",
"react-native": "^0.29.0",
"react-native-svg": "^3.0.0"

Here is my render method:

render() {
  return (
      <View >
        <Svg height="640" width="360">
          <Circle transform="translate(200, 200)"
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
          />
          <Rect translate="rotate(45)"
              x="15"
              y="15"
              width="70"
              height="70"
              stroke="red"
              strokeWidth="2"
              fill="yellow"
            />
        </Svg>
      </View>
    );
  }

I made sure everything is in place for react-native@0.29.0 in line with #50 (comment)

And here is a screenshot:
screenshot_2016-07-27-09-11-06_com getease

2 thoughts on “SVG translate not working with react-native@0.30.0 react-native-svg@4.0.0-rc

  1. Thanks for reporting this.
    transform prop have been fixed in 4.0.0-rc.
    And we have changed transform prop to something like this

              <Circle
                  transform={{scale:0.5,translate:'200, 200'}}
                  cx="50"
                  cy="50"
                  r="45"
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"
              />
    
    or this can do the same
              <Circle
                  scale="0.5"
                  translate="200, 200"
                  cx="50"
                  cy="50"
                  r="45"
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"
              />
    
  2. I had this problem too, and using transform={{ translate:'200, 200' }} instead of transform="translate(200, 200)" fixed it 😄

Comments are closed.

SVG translate not working with react-native@0.30.0 react-native-svg@4.0.0-rc

I there..

I am using react-native-svg to render charts but there seems to be problem with the svg translate attribute.. as it doesn’t work.

Here is my package.json:

"react": "^15.2.0",
"react-native": "^0.29.0",
"react-native-svg": "^3.0.0"

Here is my render method:

render() {
  return (
      <View >
        <Svg height="640" width="360">
          <Circle transform="translate(200, 200)"
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
          />
          <Rect translate="rotate(45)"
              x="15"
              y="15"
              width="70"
              height="70"
              stroke="red"
              strokeWidth="2"
              fill="yellow"
            />
        </Svg>
      </View>
    );
  }

I made sure everything is in place for react-native@0.29.0 in line with #50 (comment)

And here is a screenshot:
screenshot_2016-07-27-09-11-06_com getease

2 thoughts on “SVG translate not working with react-native@0.30.0 react-native-svg@4.0.0-rc

  1. Thanks for reporting this.
    transform prop have been fixed in 4.0.0-rc.
    And we have changed transform prop to something like this

              <Circle
                  transform={{scale:0.5,translate:'200, 200'}}
                  cx="50"
                  cy="50"
                  r="45"
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"
              />
    
    or this can do the same
              <Circle
                  scale="0.5"
                  translate="200, 200"
                  cx="50"
                  cy="50"
                  r="45"
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"
              />
    
  2. I had this problem too, and using transform={{ translate:'200, 200' }} instead of transform="translate(200, 200)" fixed it 😄

Comments are closed.