-
Notifications
You must be signed in to change notification settings - Fork 14
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.
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
Documentation? #7
Comments
Regarding the vb{Width,Height} and meetOrSlice they are the default viewbox width and height values, and the preserveAspectRatio value respectively. Line 212 in 0f756a1
If you want to provide a complete viewBox, then you can give a {left, top, width,height} object to the vbRect property: Lines 43 to 47 in 0f756a1
To learn how the viewbox preserveAspectRatio attributes affect the appearance I can recommend these: Regarding the constraints, e.g. these values: constrain={{
scaleExtent: [0.5, 5],
translateExtent: [[-10, -10], [110, 110]],
}} Means that the zoom is constrained to 0.5 i.e., half size, and 5 i.e., 5 times larger than original. const constraintCombinations = [
'none', // Demonstrates no constraints
'dynamic', // Adjusts translate extent according to zoom level and extent (Default and backwards compatible option)
'static', // Statically translate if scale extent allows zooming beyond a translate extent (same behaviour as d3.zoom)
'union', // Take the union of the zoom and translate extent
'intersect', // Take the intersection of zoom and translate extent
]; If the provided viewBox, preserveAspectRatio and constraints in combination with some interaction / touch event makes one of the constraints fail but not the other, then the constraintCombinations property decides how to handle it. None ignores all constraints. dynamic gives the best ux in my experience, it allows moving the object within the natural free space, when zoomed out beyond its viewBox in one dimension. Static forces the viewBox into the top left corner when zooming out beyond either dimension constraint. Union allowing moving as long as at least one constraint doesn't forbid it. Intersection requires that all constraints are satisfied. Hope this helps! Any help in simplifying this description would be a very useful PR 😄 |
Just what I wanted, thanks for the information! |
Hi
I'm trying to use your library but some properties are not clear for me what they do.
I did read software-mansion/react-native-svg#374 where some properties are explained but I don't understand them all.
Could you elaborate a bit more on what the above properties do?
Thanks in advance!
The text was updated successfully, but these errors were encountered: