SvgAnimatedLinearGradient rotating children

phpc91 commented 5 years ago

Hi there

I was testing your component to implement a skeleton in my React Native app. I wanted a simple 3x3 grid loading, something like this:

Here is the relevant part of my code:

      <SvgAnimatedLinearGradient
        height={500}
        width={500}
        primaryColor="#f6f8f9"
        secondaryColor="#dddee1"
      >
        <Rect x="0" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="0" rx="5" ry="5" width="75" height="75" />
        <Rect x="0" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="95" rx="5" ry="5" width="75" height="75" />
        <Rect x="0" y="190" rx="5" ry="5" width="75" height="75" />
        <Rect x="95" y="190" rx="5" ry="5" width="75" height="75" />
        <Rect x="190" y="190" rx="5" ry="5" width="75" height="75" />
      </SvgAnimatedLinearGradient >

The result I got was odd, my svg came out rotated:

rotated-svg

After some digging, I found out this piece of code, in react-native-svg-animated-linear-gradient/src/index.js , line 122:

<ClipPath id="clip">
  <G rotation="50"
  origin="100, 50">
    {this.props.children}
  </G>
</ClipPath>

I tested removing this rotation prop, and my SVG came out on the right direction, only with a horizontal offset. Look at the result with this <G/> component without any prop:

react-svg-1

Is this supposed to be like this? Why would the children be rotated/moved horizontally? With the code as is, none of the examples provided at the Readme.md work, they all come out with positioning issues. Could you expose this rotation/origin prop so we can edit it in the main component? Or remove it, I'm not sure if it should be there in the first place. Thanks

virusvn commented 5 years ago

Thanks for your report. The issue was resolved by @musamaahmad with this commit: https://github.com/virusvn/react-native-svg-animated-linear-gradient/commit/3a2ebc56b6f63cff0089f8055c8f1c57d8e85775#diff-1fdf421c05c1140f6d71444ea2b27638

I released new version 0.3, please let me know if still have any errors in your project.

phpc91 commented 5 years ago

Thanks a lot for your quick response! I did ran yarn upgrade react-native-svg-animated-linear-gradient --latest, and my package.json shows ^0.3.0 but that <G/> component is still with the rotation and origin props. Can you check what happened?

virusvn commented 5 years ago

@phpc91 Sorry so much! I published 0.3.2, please check it.

phpc91 commented 5 years ago

@virusvn it's all right now. Thanks!

FullstackStation / react-native-svg-animated-linear-gradient

SvgAnimatedLinearGradient rotating children #21