Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Why margin isn't working in SVG for path?
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" x="0px" y="0px"
width="442px" height="442px" viewBox="0 0 442 442" style="enable-background:new 0 0 442 442;" xml:space="preserve">
<rect width="442px" height="442px" style="fill:red;stroke:black;stroke-width:5;opacity:0.8" />
<g style="margin:50px">
<path d="M105.4,221c0,9.391-7.609,17-17,17h-34c-9.391,0-17-7.609-17-17l0,0c0-9.391,7.609-17,17-17h34
C97.792,204,105.4,211.609,105.4,221L105.4,221z M105.4,112.2c0-9.391-7.609-17-17-17h-34c-9.391,0-17,7.609-17,17l0,0
c0,9.391,7.609,17,17,17h34C97.792,129.2,105.4,121.591,105.4,112.2L105.4,112.2z M105.4,329.801c0-9.393-7.609-17-17-17h-34
c-9.391,0-17,7.607-17,17l0,0c0,9.391,7.609,17,17,17h34C97.792,346.801,105.4,339.191,105.4,329.801L105.4,329.801z M404.6,54.4
v333.2c0,30.043-24.357,54.4-54.398,54.4h-238c-30.042,0-54.4-24.357-54.4-54.4V360.4h30.6c16.871,0,30.6-13.73,30.6-30.6
c0-16.871-13.729-30.602-30.6-30.602H57.8v-47.6h30.6c16.871,0,30.6-13.729,30.6-30.6s-13.729-30.6-30.6-30.6H57.8v-47.6h30.6
c16.871,0,30.6-13.729,30.6-30.6c0-16.871-13.729-30.6-30.6-30.6H57.8V54.4c0-30.042,24.358-54.4,54.4-54.4h238
C380.242,0,404.6,24.357,404.6,54.4z M188.945,161.255c0,28.968,23.487,52.455,52.455,52.455c28.969,0,52.455-23.487,52.455-52.455
c0-28.968-23.486-52.456-52.455-52.456C212.433,108.8,188.945,132.287,188.945,161.255z M323,289.482
c0-32.184-26.098-58.283-58.283-58.283H218.09c-32.191,0-58.29,26.1-58.29,58.283v23.318H323V289.482z"/>
</g>
</svg>
I had used (style="margin:50px;") margin in g. But I noticed the margin isn't working.
Why it's happening? I have tried by increasing margin. But nothing happens.
1 answer
SVG has very limited »layout« capabilities
Element positioning is mainly based on explicit absolute or relative positioning of geometry elements such as <path>, <circle>, <rect> etc.
SVG has no element distribution concepts like flex, grid or even margin
In other words all elements are stacked on top of each other – we can't »push« any sibling elements based on a margin – we don't have something like a HTML content flow concept for adjacent elements.
Apply CSS to parent SVG
However, the outmost/root svg also responds to CSS rules that are ignored by child elements.
From your example, you probably expect your SVG to get some »padding«
Provided, your SVG is appended to your DOM you apply a padding and the background color to the root SVG like so:
style="padding:50px; background:rgba(255,0,0,0.8); border:5px solid #000"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 442 442" style="padding:50px; background:rgba(255,0,0,0.8); border:5px solid #000">
<path d="M105.4 221c0 9.39-7.61 17-17 17h-34c-9.39 0-17-7.61-17-17l0 0c0-9.39 7.61-17 17-17h34c9.39 0 17 7.61 17 17l0 0zm0-108.8c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm0 217.6c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm299.2-275.4v333.2c0 30.04-24.36 54.4-54.4 54.4h-238c-30.04 0-54.4-24.36-54.4-54.4v-27.2h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-27.2c0-30.04 24.36-54.4 54.4-54.4h238c30.04 0 54.4 24.36 54.4 54.4zm-215.66 106.85c0 28.97 23.49 52.46 52.46 52.46s52.45-23.49 52.45-52.46-23.48-52.45-52.45-52.45-52.46 23.49-52.46 52.45zm134.06 128.23c0-32.18-26.1-58.28-58.28-58.28h-46.63c-32.19 0-58.29 26.1-58.29 58.28v23.32h163.2v-23.32z"/>
</svg>
ViewBox adjustments
If your SVG should be self contained e.g for usage in an <img> element you should prefer to adjust the viewBox itself.
Simplified explanation: think of the viewBox as your document or artboard area (the latter term is more common in graphic applications)
The last 2 values define width and height while the first ones x/y offsets. If you've ever worked with graphic applications like Adobe Illustrator you might be familiar with the idea of a theoretically infinite design area where you can move elements »off-canvas« so outside the visible document area.
We adjust the viewBox values like so:
viewBox="-50 -50 542 542"
- add 2x50 units to width and height - the equivalent to a 50px padding/margin
-
-50for x/y to move the viewBox 50 to the left and 50 to bottom respectively
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 542 542" style="background:rgba(255,0,0,0.8); border:5px solid #000" >
<path d="M105.4 221c0 9.39-7.61 17-17 17h-34c-9.39 0-17-7.61-17-17l0 0c0-9.39 7.61-17 17-17h34c9.39 0 17 7.61 17 17l0 0zm0-108.8c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm0 217.6c0-9.39-7.61-17-17-17h-34c-9.39 0-17 7.61-17 17l0 0c0 9.39 7.61 17 17 17h34c9.39 0 17-7.61 17-17l0 0zm299.2-275.4v333.2c0 30.04-24.36 54.4-54.4 54.4h-238c-30.04 0-54.4-24.36-54.4-54.4v-27.2h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-47.6h30.6c16.87 0 30.6-13.73 30.6-30.6s-13.73-30.6-30.6-30.6h-30.6v-27.2c0-30.04 24.36-54.4 54.4-54.4h238c30.04 0 54.4 24.36 54.4 54.4zm-215.66 106.85c0 28.97 23.49 52.46 52.46 52.46s52.45-23.49 52.45-52.46-23.48-52.45-52.45-52.45-52.46 23.49-52.46 52.45zm134.06 128.23c0-32.18-26.1-58.28-58.28-58.28h-46.63c-32.19 0-58.29 26.1-58.29 58.28v23.32h163.2v-23.32z"/>
</svg>
See codepen example
0 comment threads
1 comment thread