Fit svg to the size of object container
This is answered (with examples) in the svg primer.
tl;dr summary:
- remove 'width' and 'height' attributes on the svg root, and add a 'viewBox' attribute with the value "0 0 w h", where w and h are the absolute values usually found in the width and height attributes (note that percentages and other units aren't allowed in the viewBox attribute)
How can I make an svg scale with its parent container?
To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox
attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width
and height
attributes to define what the width or height are with respect to the containing page.
For instance, if you have the following:
<svg>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
It will render as a 10px by 20px triangle:
Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:
<svg width=100 height=50>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:
<svg width=100 height=50 viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you want to scale it up to the width of the HTML viewport:
<svg width="100%" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):
<svg width="100%" height="50px" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none
:
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)
Scale SVG to container without mask/crop
You absolutely must have a
viewBox
attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)To cause your SVG to fill an HTML element, put the CSS attribute
position:relative
(orposition:absolute
orposition:fixed
if appropriate) on your wrapper, and thenSet the CSS attribute
position:absolute
on your<svg>
element to cause it to sit inside and fill your div. (If necessary, also applyleft:0; top:0; width:100%; height:100%
.)
Once you have a viewBox
and your SVG sized correctly the default value of the preserveAspectRatio
attribute will do what you want. In particular, the default of xMidYMid meet
means that:
- The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value ofnone
would allow non-uniform scaling. - The viewBox will always
meet
either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value ofslice
ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG. - The viewBox will be kept vertically and horizontally centered within the SVG viewport.
By comparison, a value ofxMinYMax
would keep it in the bottom-left corner, with padding only to the right or top.
You can see this live here: http://jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatio
on the <svg>
element and press "Update" to see how they affect the rendering.
Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/
How to fit my SVG Image to the Parent wrapper div?
Update your svg file, so that text inside of it is centered, rather then translated.
<svg width="100%" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="1" fill="#ECEEF4" />
<rect y="112" width="100%" height="1" fill="#ECEEF4" />
<rect y="336" width="100%" height="1" fill="#ECEEF4" />
<rect y="56" width="100%" height="1" fill="#ECEEF4" />
<rect y="280" width="100%" height="1" fill="#ECEEF4" />
<rect y="224" width="100%" height="1" fill="#ECEEF4" />
<rect y="168" width="100%" height="1" fill="#ECEEF4" />
<rect y="392" width="100%" height="1" fill="#ECEEF4" />
<text fill="#8B90A0" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Drop it here or add a file</text>
</svg>
resize SVG in order to fit container size
Your fiddle markup is invalid (the object tag is superfluous and you've unclosed tags)
Once I fixed that, I changed the div to be a flexbox and orient vertically and it all displays in the box.
.slide{ display: flex; flex-flow: column; width: 500px; height : 370px; border: 1px solid #000; overflow: hidden;}
<div class="slide"><h1 id="preferredpizzas">Preferred pizzas</h1>
<h2 id="donutchart">Donut chart</h2><svg viewBox="0 0 800 600"><defs><clipPath id="c3-1485081006314-clip"><rect width="800" height="574"></rect></clipPath><clipPath id="c3-1485081006314-clip-xaxis"><rect x="-31" y="-20" width="862" height="42"></rect></clipPath><clipPath id="c3-1485081006314-clip-yaxis"><rect x="-29" y="-4" width="20" height="598"></rect></clipPath><clipPath id="c3-1485081006314-clip-grid"><rect width="800" height="574"></rect></clipPath><clipPath id="c3-1485081006314-clip-subchart"><rect width="800"></rect></clipPath></defs><g transform="translate(0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="400" y="287" style="opacity: 0.999437568;"></text><rect class="c3-zoom-rect" width="800" height="574" style="opacity: 0;"></rect><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-regions" style="visibility: hidden;"></g><g clip-path="url(file:///#c3-1485081006314-clip-grid)" class="c3-grid" style="visibility: hidden;"><g class="c3-ygrids"><line class="c3-ygrid" x1="0" x2="800" y1="570" y2="570"></line><line class="c3-ygrid" x1="0" x2="800" y1="498" y2="498"></line><line class="c3-ygrid" x1="0" x2="800" y1="425" y2="425"></line><line class="c3-ygrid" x1="0" x2="800" y1="353" y2="353"></line><line class="c3-ygrid" x1="0" x2="800" y1="281" y2="281"></line><line class="c3-ygrid" x1="0" x2="800" y1="208" y2="208"></line><line class="c3-ygrid" x1="0" x2="800" y1="136" y2="136"></line><line class="c3-ygrid" x1="0" x2="800" y1="64" y2="64"></line></g><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="574" style="visibility: hidden;"></line></g></g><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-chart"><g class="c3-event-rects" style="fill-opacity: 0;"></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-un c3-bars c3-bars-un" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-deux c3-bars c3-bars-deux" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-quatre c3-bars c3-bars-quatre" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-un c3-lines c3-lines-un"></g><g class=" c3-shapes c3-shapes-un c3-areas c3-areas-un"></g><g class=" c3-selected-circles c3-selected-circles-un"></g><g class=" c3-shapes c3-shapes-un c3-circles c3-circles-un" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-deux c3-lines c3-lines-deux"></g><g class=" c3-shapes c3-shapes-deux c3-areas c3-areas-deux"></g><g class=" c3-selected-circles c3-selected-circles-deux"></g><g class=" c3-shapes c3-shapes-deux c3-circles c3-circles-deux" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-quatre c3-lines c3-lines-quatre"></g><g class=" c3-shapes c3-shapes-quatre c3-areas c3-areas-quatre"></g><g class=" c3-selected-circles c3-selected-circles-quatre"></g><g class=" c3-shapes c3-shapes-quatre c3-circles c3-circles-quatre" style="cursor: pointer;"></g></g></g><g class="c3-chart-arcs" transform="translate(400,282)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 1;"></text><g class="c3-chart-arc c3-target c3-target-un"><g class=" c3-shapes c3-shapes-un c3-arcs c3-arcs-un"><path class=" c3-shape c3-shape c3-arc c3-arc-un" transform="" d="M-49.22649582305915,263.33849340531725A267.9,267.9 0 0,1 -73.31431504031106,-257.6730898059982L-43.98858902418663,-154.6038538835989A160.73999999999998,160.73999999999998 0 0,0 -29.535897493835492,158.00309604319037Z" style="fill: rgb(31, 119, 180); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-214.0913151596445,9.898038856955004)" style="opacity: 1; text-anchor: middle; pointer-events: none;">42.6%</text></g><g class="c3-chart-arc c3-target c3-target-deux"><g class=" c3-shapes c3-shapes-deux c3-arcs c3-arcs-deux"><path class=" c3-shape c3-shape c3-arc c3-arc-deux" transform="" d="M-73.31431504031106,-257.6730898059982A267.9,267.9 0 0,1 -4.921243162373638e-14,-267.9L-2.952745897424183e-14,-160.73999999999998A160.73999999999998,160.73999999999998 0 0,0 -43.98858902418663,-154.6038538835989Z" style="fill: rgb(255, 127, 14); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-29.60966999328745,-212.264763545174)" style="opacity: 1; text-anchor: middle; pointer-events: none;"></text></g><g class="c3-chart-arc c3-target c3-target-quatre"><g class=" c3-shapes c3-shapes-quatre c3-arcs c3-arcs-quatre"><path class=" c3-shape c3-shape c3-arc c3-arc-quatre" transform="" d="M1.6404143874578793e-14,-267.9A267.9,267.9 0 1,1 -49.22649582305915,263.33849340531725L-29.535897493835492,158.00309604319037A160.73999999999998,160.73999999999998 0 1,0 9.842486324747276e-15,-160.73999999999998Z" style="fill: rgb(44, 160, 44); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(213.4057486635518,19.77495480017487)" style="opacity: 1; text-anchor: middle; pointer-events: none;">52.9%</text></g></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-un"></g></g><g class="c3-chart-text c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-deux"></g></g><g class="c3-chart-text c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-quatre"></g></g></g></g><g clip-path="url(file:///#c3-1485081006314-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(file:///#c3-1485081006314-clip-xaxis)" transform="translate(0,574)" style="visibility: visible; opacity: 0;"><text class="c3-axis-x-label" transform="" x="800" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(400, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H800V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(file:///#c3-1485081006314-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"><text class="c3-axis-y-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="1.2em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,570)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,498)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,425)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,353)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,281)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,208)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,136)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,64)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><path class="domain" d="M-6,1H0V574H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(800,0)" style="visibility: hidden; opacity: 0;"><text class="c3-axis-y2-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,574)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,517)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,460)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,403)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,345)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,288)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,231)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,173)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,116)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,59)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V574H6"></path></g></g><g transform="translate(0.5,600.5)" style="visibility: hidden;"><g clip-path="url(file:///#c3-1485081006314-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-brush" style="pointer-events: all;"><rect class="background" x="0" width="800" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(file:///#c3-1485081006314-clip-xaxis)" style="visibility: hidden; opacity: 0;"><g class="tick" transform="translate(400, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H800V6"></path></g></g><g transform="translate(0,578)"><g class="c3-legend-item c3-legend-item-un" style="visibility: visible; cursor: pointer;"><text x="337.953125" y="9" style="pointer-events: none;">un</text><rect class="c3-legend-item-event" x="323.953125" y="-5" width="41" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="321.953125" y1="4" x2="331.953125" y2="4" stroke-width="10" style="stroke: rgb(31, 119, 180); pointer-events: none;"></line></g><g class="c3-legend-item c3-legend-item-deux" style="visibility: visible; cursor: pointer;"><text x="378.953125" y="9" style="pointer-events: none;">deux</text><rect class="c3-legend-item-event" x="364.953125" y="-5" width="56.109375" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="362.953125" y1="4" x2="372.953125" y2="4" stroke-width="10" style="stroke: rgb(255, 127, 14); pointer-events: none;"></line></g><g class="c3-legend-item c3-legend-item-quatre" style="visibility: visible; cursor: pointer;"><text x="435.0625" y="9" style="pointer-events: none;">quatre</text><rect class="c3-legend-item-event" x="421.0625" y="-5" width="54.984375" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="419.0625" y1="4" x2="429.0625" y2="4" stroke-width="10" style="stroke: rgb(44, 160, 44); pointer-events: none;"></line></g></g><text class="c3-title" x="400" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div><p>this text should be visible as well</p></div>
Resize SVG component to fit parent
What if you set the container to relative?
Otherwise, it will not act as referring container for any child dimensions.
.mapFrame {
position: relative; /* this */
width: 100%;
height: 100%;
object-fit: fill;
background-color:blue;
}
Related Topics
How to Use CSS to Reverse The Display Order of Two Elements
Split Page Vertically Using CSS
Freeze Keyframe Animation for Debugging
How to Make a Div Grow in Height While Having Floats Inside
5Px Extra Margin Getting Added to The Bottom of Each Div
How to Seamlessly Align Block Divs of Different Sizes
Insert Ruby in HTML Class=" " Property
How to Avoid Content of Span Break in Two Lines
Preventing Page Breaks in a Table When Printing
Calculate Sum Opacity from Layers
Styling Part of The Text in The Placeholder
How to Stop These Divs from Overlapping
How to Change a Div Padding Without Affecting The Width/Height
How to Make Same Layout for All Web Pages