Posted in Uncategorized

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

   February 11, 2021  2 Comments on 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

Full dicussion on github.com

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.

 Posted in React Native SVG

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

   March 26, 2020  2 Comments on 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

Full dicussion on github.com

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.