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

SVG rendered incorrectly #1152

Closed
DimitarNestorov opened this issue Oct 17, 2019 · 4 comments · Fixed by BlueWallet/BlueWallet#847 or mdfkbtc/veles-mobile-wallet-mdfkbtc#3 · May be fixed by GraoMelo/hathor-wallet-mobile#1
Closed

SVG rendered incorrectly #1152

DimitarNestorov opened this issue Oct 17, 2019 · 4 comments · Fixed by BlueWallet/BlueWallet#847 or mdfkbtc/veles-mobile-wallet-mdfkbtc#3 · May be fixed by GraoMelo/hathor-wallet-mobile#1

Comments

@DimitarNestorov
Copy link

Bug

Expected:
image
Result:
image

Environment info

React native info output:

System:
    OS: macOS 10.15
    CPU: (6) x64 Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz
    Memory: 423.59 MB / 32.00 GB
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2

Library version: 9.11.1

Steps To Reproduce

  1. Import mountains.svg and render

Reproducible sample code

/~https://github.com/dimitarnestorov/react-native-svg-mountains
@msand
Copy link
Collaborator

msand commented Oct 19, 2019

Seems to be an issue with the transform attribute on clipPath elements, if you move the transform in your clipPath with id="d" to the path inside of it, it seems to work:

    <clipPath id="d">
      <path transform="translate(-53.38 -18.83)" fill="none" d="M462.77 150.56c.6 8.33 8.26 15.12 16.62 15.12h30.19A16.34 16.34 0 0 1 525.9 182a16.33 16.33 0 0 1-16.33 16.33H439.4a16.33 16.33 0 0 0-16.33 16.33A16.33 16.33 0 0 0 439.39 231h78.53a16.33 16.33 0 0 1 16.33 16.33 16.33 16.33 0 0 1-16.33 16.33H281.45A14.43 14.43 0 0 0 267 278.07v3.78a14.43 14.43 0 0 1-14.43 14.43h-75.75a14.43 14.43 0 0 1-14.43-14.43v-3.78A14.43 14.43 0 0 0 148 263.64h-22.31a16.33 16.33 0 0 1-16.33-16.33A16.33 16.33 0 0 0 93 231H69.71a16.33 16.33 0 0 1-16.33-16.33 16.33 16.33 0 0 1 16.33-16.33h13.41A16.33 16.33 0 0 0 99.45 182a16.33 16.33 0 0 1 16.33-16.33h28a16.32 16.32 0 0 0 16.32-16.34v-1.2c-.6-8.33-8.26-15.12-16.62-15.12h-51a16.33 16.33 0 0 1-16.33-16.33 16.33 16.33 0 0 1 16.33-16.33h22.74A16.33 16.33 0 0 0 131.52 84a16.33 16.33 0 0 1 16.33-16.33h125.77A16.33 16.33 0 0 0 290 51.39a16.33 16.33 0 0 1 16.33-16.33h72a16.33 16.33 0 0 1 16.33 16.33A16.33 16.33 0 0 0 411 67.72h123.4A16.33 16.33 0 0 1 550.64 84a16.33 16.33 0 0 1-16.33 16.33h-19.2a16.33 16.33 0 0 0-16.33 16.33A16.33 16.33 0 0 1 482.46 133h-3.4a16.33 16.33 0 0 0-16.34 16.32c0 .42.02.83.05 1.24zM599.09 182a16.33 16.33 0 0 1-16.33 16.33h-27.4A16.33 16.33 0 0 1 539 182a16.33 16.33 0 0 1 16.33-16.33h27.41A16.33 16.33 0 0 1 599.09 182z"/>
    </clipPath>

msand added a commit that referenced this issue Oct 19, 2019
@msand
fix: handle setting transform attribute on clipPath, fixes #1152
73b21d1
@msand
Copy link
Collaborator

msand commented Oct 19, 2019

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

@DimitarNestorov
Copy link
Author

Works! Thank you!

msand added a commit that referenced this issue Oct 19, 2019
@msand
fix: improve handling of transform attribute on clipPath, fixes #1152
3aa126e
msand pushed a commit that referenced this issue Oct 19, 2019
@semantic-release-bot
chore(release): 9.12.0 [skip ci]
189df82 
# [9.12.0](v9.11.1...v9.12.0) (2019-10-19)

### Bug Fixes

* handle setting transform attribute on clipPath, fixes [#1152](#1152) ([73b21d1](73b21d1))
* improve handling of transform attribute on clipPath, fixes [#1152](#1152) ([3aa126e](3aa126e))
* **ios:** backwards compatible RCTImageLoader.h handling fixes [#1141](#1141) ([3c22c97](3c22c97))
* **ios:** clipPath rendering, fixes [#1131](#1131) ([2534537](2534537))
* **ios:** deprecation of RCTImageLoader fixes [#1141](#1141) ([5452144](5452144))
* **ios:** fix changes in color/currentColor/tintColor, fixes [#1151](#1151) ([0c7e94d](0c7e94d))
* **ios:** image viewBox opposite handling of y alignment, fixes [#1138](#1138) ([c69e9e2](c69e9e2))
* **js:** allow setting stopColor/Opacity/Offset using styles, fix [#1153](#1153) ([5984e06](5984e06))
* getPointAtLength signature ([2c57af2](2c57af2))
* getScreenCTM calculation ([5c5072d](5c5072d))
* improve native method spec conformance ([c63f9e2](c63f9e2))
* improve types for getBBox ([cecde7d](cecde7d))
* prepare script ([9a3dc4e](9a3dc4e))
* **ios:** memory leak in tspan, fixes [#1073](#1073) ([974f3a8](974f3a8))
* fix native methods spec conformance ([ecedb21](ecedb21))
* Make native methods synchronous ([8ce7611](8ce7611))
* refine types for matrix helpers ([409af91](409af91))
* refine types for matrix helpers ([7a3f867](7a3f867))
* **android:** defineMarker/getDefinedMarker storage ([e6eda84](e6eda84))
* **android:** native method scaling and getScreenCTM offset ([f3e0b19](f3e0b19))
* native method signatures web compatibility / spec conformance ([8687a3d](8687a3d))
* **ios:** optimize extractPathData, clear PathMeasure when no textPath ([df69c26](df69c26))

### Features

* **flow:** add flowgen to generate flow types from typescript, [#1125](#1125) ([fcd66fb](fcd66fb))
* implement getBBox, getCTM, getScreenCTM ([f13d54a](f13d54a))
* implement isPointInStroke ([2ba64df](2ba64df))
* initial implementation of isPointInFill ([203e53b](203e53b))
* support using native methods using promises instead of callbacks ([c28499b](c28499b))
* **android:** implement getTotalLength and getPointAtLength ([cd667d0](cd667d0))
* **ios:** implement getTotalLength and getPointAtLength ([78c4f20](78c4f20))
@msand
Copy link
Collaborator

msand commented Oct 19, 2019

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@msand msand added the released label Oct 19, 2019
@snyk-bot snyk-bot mentioned this issue Feb 29, 2020
Merged
This was referenced Apr 19, 2020
Merged
Open
JackWillie added a commit to JackWillie/react-native-svg that referenced this issue Nov 27, 2022
@JackWillie
chore(release): 9.12.0 [skip ci]
09be4c0 
# [9.12.0](software-mansion/react-native-svg@v9.11.1...v9.12.0) (2019-10-19)

### Bug Fixes

* handle setting transform attribute on clipPath, fixes [#1152](software-mansion/react-native-svg#1152) ([73b21d1](software-mansion/react-native-svg@73b21d1))
* improve handling of transform attribute on clipPath, fixes [#1152](software-mansion/react-native-svg#1152) ([3aa126e](software-mansion/react-native-svg@3aa126e))
* **ios:** backwards compatible RCTImageLoader.h handling fixes [#1141](software-mansion/react-native-svg#1141) ([3c22c97](software-mansion/react-native-svg@3c22c97))
* **ios:** clipPath rendering, fixes [#1131](software-mansion/react-native-svg#1131) ([2534537](software-mansion/react-native-svg@2534537))
* **ios:** deprecation of RCTImageLoader fixes [#1141](software-mansion/react-native-svg#1141) ([5452144](software-mansion/react-native-svg@5452144))
* **ios:** fix changes in color/currentColor/tintColor, fixes [#1151](software-mansion/react-native-svg#1151) ([0c7e94d](software-mansion/react-native-svg@0c7e94d))
* **ios:** image viewBox opposite handling of y alignment, fixes [#1138](software-mansion/react-native-svg#1138) ([c69e9e2](software-mansion/react-native-svg@c69e9e2))
* **js:** allow setting stopColor/Opacity/Offset using styles, fix [#1153](software-mansion/react-native-svg#1153) ([5984e06](software-mansion/react-native-svg@5984e06))
* getPointAtLength signature ([2c57af2](software-mansion/react-native-svg@2c57af2))
* getScreenCTM calculation ([5c5072d](software-mansion/react-native-svg@5c5072d))
* improve native method spec conformance ([c63f9e2](software-mansion/react-native-svg@c63f9e2))
* improve types for getBBox ([cecde7d](software-mansion/react-native-svg@cecde7d))
* prepare script ([9a3dc4e](software-mansion/react-native-svg@9a3dc4e))
* **ios:** memory leak in tspan, fixes [#1073](software-mansion/react-native-svg#1073) ([974f3a8](software-mansion/react-native-svg@974f3a8))
* fix native methods spec conformance ([ecedb21](software-mansion/react-native-svg@ecedb21))
* Make native methods synchronous ([8ce7611](software-mansion/react-native-svg@8ce7611))
* refine types for matrix helpers ([409af91](software-mansion/react-native-svg@409af91))
* refine types for matrix helpers ([7a3f867](software-mansion/react-native-svg@7a3f867))
* **android:** defineMarker/getDefinedMarker storage ([e6eda84](software-mansion/react-native-svg@e6eda84))
* **android:** native method scaling and getScreenCTM offset ([f3e0b19](software-mansion/react-native-svg@f3e0b19))
* native method signatures web compatibility / spec conformance ([8687a3d](software-mansion/react-native-svg@8687a3d))
* **ios:** optimize extractPathData, clear PathMeasure when no textPath ([df69c26](software-mansion/react-native-svg@df69c26))

### Features

* **flow:** add flowgen to generate flow types from typescript, [#1125](software-mansion/react-native-svg#1125) ([fcd66fb](software-mansion/react-native-svg@fcd66fb))
* implement getBBox, getCTM, getScreenCTM ([f13d54a](software-mansion/react-native-svg@f13d54a))
* implement isPointInStroke ([2ba64df](software-mansion/react-native-svg@2ba64df))
* initial implementation of isPointInFill ([203e53b](software-mansion/react-native-svg@203e53b))
* support using native methods using promises instead of callbacks ([c28499b](software-mansion/react-native-svg@c28499b))
* **android:** implement getTotalLength and getPointAtLength ([cd667d0](software-mansion/react-native-svg@cd667d0))
* **ios:** implement getTotalLength and getPointAtLength ([78c4f20](software-mansion/react-native-svg@78c4f20))
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
2 participants
@msand @DimitarNestorov