SvgViewbox is not taking into account viewbox (x, y, width, height) values during coordinate calculation
See original GitHub issueHi @paulushub, thanks for amazing library. Now we are integrating SharpVectors into one of our projects and during the testing I have observed strange issue using SvgViewbox. Looks like drawings inside the viewbox is not taking into account viewbox (x, y, width, height) values during coordinate calculation, but take into account first drawing region. Here you can find test project thats reproduced this issue. SharpVectorsTest.zip
To breifly describe the issue with code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-800 -800 1600.00 1600.00" >
<g id="test-group">
<!-- Note Strange behaviour without rect that define same region as viewbox will not work! -->
<rect height="1600.00" width="1600.00" y="-800" x="-800" id="6137" style="fill:transparent;stroke:black;stroke-width=3;"/>
<circle cx="0" cy="0" r="20" fill="turquoise" />
</g>
</svg>
Expected: small circle in the center of the svg. Observed: circle stretched to fit the whole svg.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
How to use the <svg> viewBox attribute?
A good rule of thumb is to always look at the viewBox width and height first, and compare it to the SVG's width...
Read more >Coordinate Systems, Transformations and Units — SVG 2
This process converts the min-x, min-y, width and height values of a viewBox attribute, the position and size of the element on which...
Read more >Whats Behind the SVG viewBox?
We can fix that with our min-x and min-y settings by recalculating their values with the new values for width and height. This...
Read more >viewBox - SVG: Scalable Vector Graphics - MDN Web Docs
The value of the viewBox attribute is a list of four numbers: min-x , min-y ... The numbers width and height represent its...
Read more >SVG Viewport and View Box
You specify the size of the viewport using the width and height attributes of the ... The coordinates are x y width height...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
thank you paulushub but I do not know how to code.
thank you ohurskyi
<rect x="-800" y="-800" height="1600" width="1600" style="fill:transparent;stroke:black"/>
it is ugly but effective and it have a white background and a black border
Works. Thank you for helping me to find the solution!