SVG's group floating inside container instead of origin'd at 0,0
SOLVED: added preserveAspectRatio="xMinYMin" as an attribute to svg
I have an SVG that contains a group that holds all the paths that make up the image. When I open the SVG in an SVG editor (like inkscape or adobe illustrator) the canvas is tight against the paths/g. However when placed in the dom this weird floating behavior takes place. See screenshot. I would like the path to try and rest at 0,0 position (top left corner) instead of floating. Note: the SVG is wrapped within a div of declared with and height.
I can fix it by magic numbering the viewBox values but I am not entirely sure that's a good solution. Thoughts? I mostly want to understand whats happening here
edit: jsfiddle https://jsfiddle.net/fluffybacon/2myLrzj4/8/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
12 Replies
can you show the svg code
the size of the
g may be just that, but you can be doing a bazillion different things with html/css, which can cause the difference you see
so, no code, no answer
Sorry for the delay. Note I had to delete chunks of the path d to get it to fit in this post but the general structure is there.
posting html in sec posting codepen in a minute
that was your first mistake: make it fit in here
you should put it in a codepen or in a jsfiddle or something, alongside the css you have that may affect the svg
thinks like widht, height, display and stuff like that
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
The width of the wrapper is determined by the parent's grid but the height is implicitly declared. This will change depending on conditions.
It works as expected from height:100px down: The svg shrinks to scale while staying centered and at the top. When the height is large, I want those paths to always hung the top of bounding box, not drift to the center
Thanks in advance! and sorry for the delay I had to go AFK
i don't see anything wrong with the svg
the enormous list of useless
g has the correct size
you can remove most of the g and nothing will happenYea you can remove all the g and the svg is unchanged. The gs and paths are generated by the creative editor used, but that isn't important. what is important is achieving the behavior I want: SVG drawing floating at the top of its container as it does at height <= 100px instead of drifting towards center.
try adding
to the svg
have you tried to convert the paths to relative?
This was it! Thanks!
@ἔρως and thank you
i didnt do anything besides nudging you to give us the code, but you are welcome