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`
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
/* eslint-disable no-unused-vars */
|
|
import React from 'react';
|
|
|
|
import ColorTest from './src/ColorTest';
|
|
import PointerEventsBoxNone from './src/PointerEventsBoxNone';
|
|
import MountUnmount from './src/MountUnmount';
|
|
import Test1318 from './src/Test1318';
|
|
import Test1374 from './src/Test1374';
|
|
import Test1442 from './src/Test1442';
|
|
import Test1451 from './src/Test1451';
|
|
import Test1718 from './src/Test1718';
|
|
import Test1790 from './src/Test1790';
|
|
import Test1813 from './src/Test1813';
|
|
import Test1845 from './src/Test1845';
|
|
import Test1986 from './src/Test1986';
|
|
import Test2071 from './src/Test2071';
|
|
import Test2080 from './src/Test2080';
|
|
import Test2086 from './src/Test2086';
|
|
import Test2089 from './src/Test2089';
|
|
import Test2148 from './src/Test2148';
|
|
import Test2196 from './src/Test2196';
|
|
import Test2248 from './src/Test2248';
|
|
import Test2266 from './src/Test2266';
|
|
import Test2276 from './src/Test2276';
|
|
import Test2327 from './src/Test2327';
|
|
import Test2233 from './src/Test2233';
|
|
import Test2366 from './src/Test2366';
|
|
import Test2397 from './src/Test2397';
|
|
import Test2403 from './src/Test2403';
|
|
import Test2407 from './src/Test2407';
|
|
|
|
export default function App() {
|
|
return <ColorTest />;
|
|
}
|