根据svg元素的内容调整svg元素的大小

Adjust size of an SVG-element to its content

本文关键字：元素 svg 调整 根据      更新时间：2023-09-26

我想调整svg元素的尺寸以适应其内容。

JSfiddle: http://jsfiddle.net/4pD9N/

这里我有一个例子。SVG应该"收缩"，以适应每边元素+ 10px的边距。换句话说:我想为未使用的空间裁剪svg…

我知道我必须使用getBBox。但是我如何计算总宽度和高度呢?

默认情况下，SVG绘图的原点与容器的原点相同。这意味着绘图的(0,0)位于SVG元素的左上角。要使内容居中，应该将绘图相对于容器进行平移。可以根据getBBox()方法的结果修改SVG元素的viewBox属性(期望的四个值:"minx miny width height")来实现。下面是一个实例:http://jsfiddle.net/3cp3c/。

svg.setAttribute("viewBox", (bbox.x-10)+" "+(bbox.y-10)+" "+(bbox.width+20)+" "+(bbox.height+20));
svg.setAttribute("width", (bbox.width+20)  + "px");
svg.setAttribute("height",(bbox.height+20) + "px");

var svg = document.getElementsByTagName("svg")[0];
var bb=svg.getBBox();
var bbx=bb.x;
var bby=bb.y;
var bbw=bb.width;
var bbh=bb.height;
var vb=[bbx,bby,bbw,bbh];
svg.setAttribute("viewBox", vb.join(" ") );
相关文章：