调整 SVG 大小以适应容器大小

Posted 2023-03-06

【中文标题】调整 SVG 大小以适应容器大小

【英文标题】：resize SVG in order to fit container size

【发布时间】：2017-06-06 23:16:10

【问题描述】：

您有一个 div 容器（具有固定的宽度和高度），其中包含各种内容（具有未定义的高度）。 此内容的一部分可以是 SVG 图表/图形，它具有定义的 viewBox 并包含在标签中。

我正在寻找一种解决方案，使 SVG 比例保持其纵横比，以使其在 div 容器中 100% 可见。

首选纯 CSS 解决方案（div 容器已经是弹性盒容器），但也可以选择 javascript

<div class="slide"> 
<h1 id="preferredpizzas">Preferred pizzas</h1>

<h2 id="donutchart">Donut chart</h2>
<object class="c3">
<svg viewBox="0 0 800 600">...</svg></object> 
<p>this text should be visible as well</p>
</div>

小提琴：https://jsfiddle.net/rzu23r4g/

【问题讨论】：

SVG 根元素上的 preserveAspectRatio 有多种选项。他们都不适合吗？您真的需要在这里给我们一个minimal reproducible example，并指出如果您需要更多帮助，它在哪些方面不起作用。

我添加了一个小提琴。谢谢

【参考方案1】：

你的小提琴标记无效（对象标签是多余的，你有未闭合的标签）

修复后，我将 div 更改为 flexbox 并垂直定向，它全部显示在框中。

.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  ></rect></clipPath><clipPath id="c3-1485081006314-clip-xaxis"><rect x="-31" y="-20"  ></rect></clipPath><clipPath id="c3-1485081006314-clip-yaxis"><rect x="-29" y="-4"  ></rect></clipPath><clipPath id="c3-1485081006314-clip-grid"><rect  ></rect></clipPath><clipPath id="c3-1485081006314-clip-subchart"><rect ></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"   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"  style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0"  style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3"   style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3"   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"   style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="321.953125" y1="4" x2="331.953125" y2="4" stroke- 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"   style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="362.953125" y1="4" x2="372.953125" y2="4" stroke- 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"   style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="419.0625" y1="4" x2="429.0625" y2="4" stroke- 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>

【讨论】：

太棒了！非常感谢。我尝试了很多复杂的东西。您的解决方案很简单，效果很好。

只是一个问题，为什么对象标签是多余的？是所有浏览器的 cas fin 吗？

你觉得object标签的作用是什么？