如何使svg大小适合其内容？

Question

我正在使用svgs显示扑克牌。我不希望svgs扩展，我不知道会有多少张卡。卡虽然有固定的大小。

有没有办法让svg容器调整大小以适应内容？ 谢谢指点。

Answer 1

没有自动的方法。但最简单的方法是使用getBBox()使用SVG内容的边界框，然后从中更新width和height。

＆＃13;

＆＃13;

document.getElementById("btn").addEventListener("click", resizeSVG);


function resizeSVG() {
  var  svg = document.getElementById("card-table");
  // Get the bounds of the SVG content
  var  bbox = svg.getBBox();
  // Update the width and height using the size of the contents
  svg.setAttribute("width", bbox.x + bbox.width + bbox.x);
  svg.setAttribute("height", bbox.y + bbox.height + bbox.y);
}

＆＃13;

svg {
  background: green;
}

.card {
  fill: white;
  stroke: black;
  stroke-width: 2;
}

＆＃13;

<svg id="card-table" width="300" height="150">
  <rect x="10" y="10" width="35" height="50" class="card"/>
  <rect x="55" y="10" width="35" height="50" class="card"/>
  <rect x="100" y="10" width="35" height="50" class="card"/>
</svg>


<br>
<button id="btn">Resize SVG</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将viewBox属性设置为完整大小，并将坐标设置为图表。 完成后，viewBox会缩放以适合容器的width和height。

您可以使用JavaScript动态更改viewBox维度。 因此，在渲染图形后，当您知道尺寸时，可以将相应的边界设置为SVG元素。

<svg id="svgContainer" height="500" width="500" viewBox="0 0 200 200">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<hr/>
<button onclick="setImageSize(300)">Large</button>
<button onclick="setImageSize(100)">Small</button>
<br/>
<button onclick="setViewBox('0 0 100 100')">viewBox - half</button>
<button onclick="setViewBox('0 0 200 200')">viewBox - full</button>

使用JavaScript，

<script>
    function setImageSize(width){
        console.log(width);
        document.getElementById("svgContainer").setAttribute("width", width);
    }

    function setViewBox(viewBoxProperties){
        document.getElementById("svgContainer").setAttribute("viewBox", viewBoxProperties);
    }
</script>