Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IOS: Rendering Issue #1118

Closed
Ericky14 opened this issue Sep 26, 2019 · 7 comments
Closed

IOS: Rendering Issue #1118

Ericky14 opened this issue Sep 26, 2019 · 7 comments

Comments

@Ericky14
Copy link

Ericky14 commented Sep 26, 2019 •
edited
Loading

Bug

Environment info

React native info output:

System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 459.04 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.1 AI-173.4907809
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-log-ios: 1.0.1
    react-native-portal-library: 1.0.0
    react-native: 0.61.0

Library version: 9.9.5

Steps To Reproduce

Use this svg on an iOS Simulator device:

<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.9333 44C34.0468 44 43.8667 34.1503 43.8667 22C43.8667 9.84974 34.0468 0 21.9333 0C9.81989 0 0 9.84974 0 22C0 34.1503 9.81989 44 21.9333 44Z" fill="#F5F6F7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8C29.732 8 36 14.268 36 22C36 29.732 29.732 36 22 36C14.268 36 8 29.732 8 22C8 14.268 14.268 8 22 8ZM22 14C17.5817 14 14 17.5817 14 22C14 26.4183 17.5817 30 22 30C26.4183 30 30 26.4183 30 22C30 17.5817 26.4183 14 22 14Z" fill="url(#paint0_radial)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 28C24.8284 28 25.5 28.6716 25.5 29.5V35.5C25.5 36.3284 24.8284 37 24 37H20C19.1716 37 18.5 36.3284 18.5 35.5V29.5C18.5 28.6716 19.1716 28 20 28H24ZM35.5 18.5C36.3284 18.5 37 19.1716 37 20V24C37 24.8284 36.3284 25.5 35.5 25.5H29.5C28.6716 25.5 28 24.8284 28 24V20C28 19.1716 28.6716 18.5 29.5 18.5H35.5ZM14.5 18.5C15.3284 18.5 16 19.1716 16 20V24C16 24.8284 15.3284 25.5 14.5 25.5H8.5C7.67157 25.5 7 24.8284 7 24V20C7 19.1716 7.67157 18.5 8.5 18.5H14.5ZM24 7C24.8284 7 25.5 7.67157 25.5 8.5V14.5C25.5 15.3284 24.8284 16 24 16H20C19.1716 16 18.5 15.3284 18.5 14.5V8.5C18.5 7.67157 19.1716 7 20 7H24Z" fill="url(#paint1_radial)"/>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(9.691)">
<stop stop-color="#A5AAB2"/>
<stop offset="1" stop-color="#BEC2C9"/>
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(14.6165)">
<stop stop-color="#BEC2C9"/>
<stop offset="1" stop-color="#A5AAB2"/>
</radialGradient>
</defs>
</svg>

Describe what you expected to happen:

Correct render:
image

Wrong render:
image
@Ericky14 Ericky14 changed the title Rendering Issue IOS: Rendering Issue Sep 26, 2019
@msand
Copy link
Collaborator

msand commented Sep 27, 2019

Seems there's some strange issue, this seems to work (change r="1" to r="100%"):

<radialGradient id="paint0_radial" cx="0" cy="0" r="100%" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(9.691)">
<stop stop-color="#A5AAB2"/>
<stop offset="1" stop-color="#BEC2C9"/>
</radialGradient>

@Ericky14
Copy link
Author

That works, thank you.

@Ericky14
Copy link
Author

Well, It doesn't actually work as intended before, the gradient doesn't seem to appear

@Ericky14
Copy link
Author

Here is another example:
Web Rendering:
image

React Native rendering:
image

Svg:

<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 25V2C22 0.89543 21.1046 0 20 0C18.8954 0 18 0.89543 18 2V25C18 26.1046 18.8954 27 20 27C21.1046 27 22 26.1046 22 25Z" fill="url(#paint0_linear)"/>
<path d="M14 25L14 2C14 0.89543 13.1046 0 12 0C10.8954 0 10 0.89543 10 2L10 25C10 26.1046 10.8954 27 12 27C13.1046 27 14 26.1046 14 25Z" fill="url(#paint1_linear)"/>
<path d="M6 25L6 2C6 0.89543 5.10457 0 4 0C2.89543 0 2 0.89543 2 2L2 25C2 26.1046 2.89543 27 4 27C5.10457 27 6 26.1046 6 25Z" fill="url(#paint2_linear)"/>
<path d="M16 16.35C16 18.5591 17.7909 20.35 20 20.35C22.2091 20.35 24 18.5591 24 16.35C24 14.1409 22.2091 12.35 20 12.35C17.7909 12.35 16 14.1409 16 16.35Z" fill="url(#paint3_radial)"/>
<path d="M8 8.35001C8 10.5591 9.79086 12.35 12 12.35C14.2091 12.35 16 10.5591 16 8.35001C16 6.14087 14.2091 4.35001 12 4.35001C9.79086 4.35001 8 6.14087 8 8.35001Z" fill="url(#paint4_radial)"/>
<path d="M0 18.35C0 20.5591 1.79086 22.35 4 22.35C6.20914 22.35 8 20.5591 8 18.35C8 16.1409 6.20914 14.35 4 14.35C1.79086 14.35 0 16.1409 0 18.35Z" fill="url(#paint5_radial)"/>
<defs>
<linearGradient id="paint0_linear" x1="20" y1="0" x2="20" y2="26.8974" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEB060"/>
<stop offset="0.461018" stop-color="#F4623D"/>
<stop offset="0.756418" stop-color="#F4623D"/>
<stop offset="1" stop-color="#FEB060"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="12" y1="27" x2="12" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEB060"/>
<stop offset="0.540262" stop-color="#F4623D"/>
<stop offset="0.835916" stop-color="#F4623D"/>
<stop offset="1" stop-color="#FEB060"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="4" y1="0" x2="4" y2="27" gradientUnits="userSpaceOnUse">
<stop stop-color="#FEB060"/>
<stop offset="0.539985" stop-color="#F4623D"/>
<stop offset="0.830654" stop-color="#F4623D"/>
<stop offset="1" stop-color="#FEB060"/>
</linearGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20 16.35) rotate(90) scale(4.79864)">
<stop stop-color="#F77445"/>
<stop offset="1" stop-color="#FEB060"/>
</radialGradient>
<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12 8.35001) rotate(90) scale(4.79864)">
<stop stop-color="#F77445"/>
<stop offset="1" stop-color="#FEB060"/>
</radialGradient>
<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 18.35) rotate(90) scale(4.79864)">
<stop stop-color="#F77445"/>
<stop offset="1" stop-color="#FEB060"/>
</radialGradient>
</defs>
</svg>

@msand
Copy link
Collaborator

msand commented Sep 27, 2019

Actually it seems like all gradientUnits="userSpaceOnUse" are behaving according to a mixture of that and gradientUnits="objectBoundingBox". Seems to work correctly when using percentages, so replace with e.g.

        <radialGradient id="paint3_radial" cx="50%" cy="50%" r="60%">
            <stop stop-color="#F77445"/>
            <stop offset="1" stop-color="#FEB060"/>
        </radialGradient>
        <radialGradient id="paint4_radial" cx="50%" cy="50%" r="60%">
            <stop stop-color="#F77445"/>
            <stop offset="1" stop-color="#FEB060"/>
        </radialGradient>
        <radialGradient id="paint5_radial" cx="50%" cy="50%" r="60%">
            <stop stop-color="#F77445"/>
            <stop offset="1" stop-color="#FEB060"/>
        </radialGradient>

In this case.

I would recommend using objectBoundingBox with percentages in all the gradient attributes for now until this get fixed properly.

@msand msand closed this as completed in 70c54e6 Sep 27, 2019
@msand
Copy link
Collaborator

msand commented Sep 27, 2019

Can you try with the latest commit from the master branch?

msand pushed a commit that referenced this issue Sep 28, 2019
@semantic-release-bot
chore(release): 9.9.7 [skip ci]
959614e 
## [9.9.7](v9.9.6...v9.9.7) (2019-09-28)

### Bug Fixes

* add gradientTransform to d.ts ([3f08c46](3f08c46)), closes [#1069](#1069)
* handling of gradients without stops ([18828c0](18828c0)), closes [#1099](#1099)
* handling of rounded rect ([c12d66e](c12d66e)), closes [#1112](#1112)
* units in linear and radial gradients ([70c54e6](70c54e6)), closes [#1110](#1110) [#1118](#1118)
@msand
Copy link
Collaborator

msand commented Sep 28, 2019

🎉 This issue has been resolved in version 9.9.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

@msand msand added the released label Sep 28, 2019
JackWillie added a commit to JackWillie/react-native-svg that referenced this issue Nov 27, 2022
@JackWillie
chore(release): 9.9.7 [skip ci]
cb3839b 
## [9.9.7](software-mansion/react-native-svg@v9.9.6...v9.9.7) (2019-09-28)

### Bug Fixes

* add gradientTransform to d.ts ([3f08c46](software-mansion/react-native-svg@3f08c46)), closes [#1069](software-mansion/react-native-svg#1069)
* handling of gradients without stops ([18828c0](software-mansion/react-native-svg@18828c0)), closes [#1099](software-mansion/react-native-svg#1099)
* handling of rounded rect ([c12d66e](software-mansion/react-native-svg@c12d66e)), closes [#1112](software-mansion/react-native-svg#1112)
* units in linear and radial gradients ([70c54e6](software-mansion/react-native-svg@70c54e6)), closes [#1110](software-mansion/react-native-svg#1110) [#1118](software-mansion/react-native-svg#1118)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@msand @Ericky14