gpt4 book ai didi

css - 自动调整 SVG 大小?

转载 作者:技术小花猫 更新时间:2023-10-29 11:06:09 29 4
gpt4 key购买 nike

这是一个code demo

我有一个高度未知的 SVG。我可以在加载 json 并使用 javascript+math 后弄明白,但是是否有任何 css 可以用来动态调整它的大小?

CSS:

svg {
width: 500px;
height: 9000px;
}
.tabme {
border:3px solid red;
height: 200px;
overflow:scroll;
}

html:

<div class="tabme">
<div id="Chart">
<div class="chartbody" />
<svg>
<rect width="190" y="0" height="16" x="175" />
<rect width="190" y="20" height="16" x="175" />
<rect width="190" y="40" height="16" x="175" />
<rect width="190" y="60" height="16" x="175" />
<rect width="190" y="80" height="16" x="175" />
<rect width="190" y="100" height="16" x="175" />
<rect width="190" y="120" height="16" x="175" />
<rect width="190" y="140" height="16" x="175" />
<rect width="190" y="160" height="16" x="175" />
<rect width="190" y="180" height="16" x="175" />
<rect width="190" y="200" height="16" x="175" />
<rect width="190" y="220" height="16" x="175" />
<rect width="190" y="240" height="16" x="175" />
<rect width="190" y="260" height="16" x="175" />
<rect width="190" y="280" height="16" x="175" />
<rect width="190" y="300" height="16" x="175" />
</svg>
</div>
</div>

最佳答案

如果 SVG 元素没有任何宽度和高度属性,那么宽度/高度应该是 calculated according to the CSS specs ,正如罗​​伯特朗森所指出的那样。但是,这些值不会反射(reflect) SVG 内容的正确尺寸。您可以使用 getBBox() 找出合适的尺寸和位置:

// Javascript to run after document load
var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
svg.setAttribute("width", bbox.width + "px");
svg.setAttribute("height", bbox.height + "px");
svg.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: red">
<rect x="30" y="40" width="50" height="60"/>
</svg>

关于css - 自动调整 SVG 大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14362656/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com