mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
d11d892496
# Summary
Currently, when applying transforms depending on the type (RN style vs
SVG style) transforms behave differently giving wrong results.
Example component
```tsx
<Svg
height="200"
viewBox="0 0 200 200"
width="200"
// transform={[{scale: 2}]}
// transform="scale(2)"
// transform={[{rotate: '45deg'}]}
// transform="rotate(45)"
// transform={[{translateX: 100}, {translateY: 100}]}
// transform="translate(100 100)"
>
<Mask id="myMask">
<Rect fill="white" height="100" width="100" x="0" y="0" />
<Path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
</Mask>
<Rect fill="pink" height="200" width="300" x="0" y="0" />
<Circle cx="50" cy="50" fill="purple" mask="url(#myMask)" r="50" />
<Rect fill="green" x="50" y="100" width="100" height="100" />
</Svg>
```
| Attribute | Before | After |
| --- | --- | --- |
| `transform={[{scale: 2}]}` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/c04d7e11-e039-4d1a-b804-e993f3877b6a">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/bb717ae4-7c8f-410a-942d-1bd6feab273c">
|
| `transform="scale(2)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/85717613-ede0-44a8-8524-c9af4b37c09d">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/f4e23bc6-8cfb-4509-a2f5-45c4f642c197">
|
| `transform={[{rotate: '45deg'}]}` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/90131401-2c52-4e8a-81ab-6cd449625953">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/bab46300-4794-4322-bd95-d6e7e7abd30e">
|
| `transform="rotate(45)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/6d308022-4844-451a-b767-1c3e94e7a295">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/553bbad5-9e37-4a52-b4e0-fa0c7b6b558e">
|
| `transform={[{translateX: 100}, {translateY: 100}]}` | <img
width="250" alt="image"
src="https://github.com/user-attachments/assets/91508d75-2b0a-4be6-9280-2ace017d9271">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/36fb5cad-1ccf-4c99-8ffd-70ea56ba589f">
|
| `transform="translate(100 100)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/28fa66f2-b2f2-4b86-bb41-47bd507d6018">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/36fb5cad-1ccf-4c99-8ffd-70ea56ba589f">
|
## Test Plan
Test example app -> `Test2403`
129 lines
3.9 KiB
JSON
129 lines
3.9 KiB
JSON
{
|
|
"version": "15.5.0",
|
|
"name": "react-native-svg",
|
|
"description": "SVG library for react-native",
|
|
"homepage": "https://github.com/react-native-community/react-native-svg",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/react-native-community/react-native-svg"
|
|
},
|
|
"license": "MIT",
|
|
"main": "lib/commonjs/index.js",
|
|
"module": "lib/module/index.js",
|
|
"types": "lib/typescript/index.d.ts",
|
|
"react-native": "src/index.ts",
|
|
"files": [
|
|
"android",
|
|
"apple",
|
|
"common",
|
|
"lib",
|
|
"src",
|
|
"css",
|
|
"filter-image",
|
|
"RNSVG.podspec",
|
|
"!android/build",
|
|
"windows",
|
|
"react-native.config.js"
|
|
],
|
|
"react-native-builder-bob": {
|
|
"source": "src",
|
|
"output": "lib",
|
|
"targets": [
|
|
"commonjs",
|
|
"module",
|
|
"typescript"
|
|
]
|
|
},
|
|
"keywords": [
|
|
"react-component",
|
|
"react-native",
|
|
"ios",
|
|
"android",
|
|
"windows",
|
|
"SVG",
|
|
"ART",
|
|
"VML",
|
|
"gradient"
|
|
],
|
|
"scripts": {
|
|
"bob": "bob build",
|
|
"format": "yarn format-js && yarn format-ios && yarn format-java",
|
|
"format-ios": "find apple/ common/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
|
|
"format-java": "node ./scripts/format-java.js",
|
|
"format-js": "prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md USAGE.md ./src/**/*.{ts,tsx} ./apps/**/*.tsx ./example/**/*.tsx ./*-example/**/*.tsx",
|
|
"jest": "jest",
|
|
"lint": "eslint --ext .ts,.tsx src",
|
|
"peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg && peggy -o src/filter-image/extract/extractFiltersString.js src/filter-image/extract/extractFiltersString.pegjs && peggy -o src/lib/extract/transformToRn.js src/lib/extract/transformToRn.pegjs",
|
|
"prepare": "npm run bob && husky install",
|
|
"release": "npm login && release-it",
|
|
"test": "npm run lint && npm run tsc",
|
|
"tsc": "tsc --noEmit",
|
|
"check-archs-consistency": "node ./scripts/codegen-check-consistency.js",
|
|
"sync-archs": "node ./scripts/codegen-sync-archs.js"
|
|
},
|
|
"peerDependencies": {
|
|
"react": "*",
|
|
"react-native": "*"
|
|
},
|
|
"dependencies": {
|
|
"css-select": "^5.1.0",
|
|
"css-tree": "^1.1.3",
|
|
"warn-once": "0.1.1"
|
|
},
|
|
"devDependencies": {
|
|
"@react-native-community/eslint-config": "^3.0.2",
|
|
"@react-native-community/eslint-plugin": "^1.2.0",
|
|
"@react-native/babel-plugin-codegen": "^0.71.0",
|
|
"@react-native/eslint-config": "^0.72.2",
|
|
"@types/css-tree": "^1.0.3",
|
|
"@types/jest": "^27.5.2",
|
|
"@types/node": "*",
|
|
"@types/react": "^18.2.18",
|
|
"@typescript-eslint/eslint-plugin": "^5.11.0",
|
|
"@typescript-eslint/parser": "^5.11.0",
|
|
"babel-eslint": "^10.1.0",
|
|
"babel-jest": "^28.1.0",
|
|
"babel-plugin-module-resolver": "^5.0.0",
|
|
"clang-format": "^1.8.0",
|
|
"eslint": "^8.44.0",
|
|
"eslint-config-prettier": "^8.3.0",
|
|
"eslint-config-standard": "^17.0.0",
|
|
"eslint-import-resolver-babel-module": "^5.3.2",
|
|
"eslint-plugin-import": "^2.25.4",
|
|
"eslint-plugin-n": "^16.0.0",
|
|
"eslint-plugin-promise": "^6.1.1",
|
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
"eslint-plugin-standard": "^5.0.0",
|
|
"husky": "^8.0.1",
|
|
"jest": "^28.1.0",
|
|
"lint-staged": "^13.0.3",
|
|
"peggy": "4.0.3",
|
|
"pegjs": "^0.10.0",
|
|
"prettier": "3.0.1",
|
|
"react": "^18.2.0",
|
|
"react-native": "^0.72.3",
|
|
"react-native-builder-bob": "^0.20.4",
|
|
"react-native-windows": "^0.72.4",
|
|
"react-test-renderer": "^18.2.0",
|
|
"release-it": "^14.12.5",
|
|
"ts-node": "^10.8.0",
|
|
"typescript": "^5.1.6"
|
|
},
|
|
"lint-staged": {
|
|
"{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",
|
|
"src/**/*.{js,ts,tsx}": "yarn lint",
|
|
"apple/**/*.{h,m,mm,cpp}": "yarn format-ios",
|
|
"android/src/**/*.java": "yarn format-java",
|
|
"src/fabric/*.ts": "yarn sync-archs"
|
|
},
|
|
"nativePackage": true,
|
|
"codegenConfig": {
|
|
"name": "rnsvg",
|
|
"type": "all",
|
|
"jsSrcsDir": "./src/fabric",
|
|
"android": {
|
|
"javaPackageName": "com.horcrux.svg"
|
|
}
|
|
}
|
|
}
|