search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.37k stars 1.11k forks source link

Invalid percentage lengths when viewbox ratio is different from width/height #2330

Open jakex7 opened 2 weeks ago

jakex7 commented 2 weeks ago

Description

When the viewBox ratio differs from the width and height attributes (e.g., height="500" width="100" viewBox="0 0 200 200"), the lengths passed as percentage values are incorrect. This inconsistency leads to rendering issues where the expected size does not match the actual size.

Affected platforms

Platform is affected
iOS ✓
Android ✓
Web 𝙓

Example

These two rectangles are supposed to be the same size

<Svg height="500" width="100" viewBox="0 0 200 200">
  <Rect
    x="0"
    y="0"
    width="200"
    height="200"
    fill="none"
    stroke="blue"
    strokeWidth="10"
  />
  <Rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    fill="none"
    stroke="green"
    strokeWidth="10"
  />
</Svg>

Expected (from web)

image

Actual

image

Steps to reproduce

Run the code snippet from above / snack

Snack or a link to a repository

https://snack.expo.dev/medooIzWuqe50tTnkheiT

SVG version

15.3.0 and from main branch

github-actions[bot] commented 2 weeks ago

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete React Native version and Platforms sections.