如何获取 SVG 组元素的高度/宽度？

发布于 2024-12-07 20:00:53 字数 107 浏览 0 评论 0原文

我需要知道 SVG 元素的宽度和高度？我尝试使用以下内容：

$('g#myGroup').height()

...但结果始终为零？

原文

I need to know the width and height of a SVG element? Im trying to use the following:

$('g#myGroup').height()

...but the result is always zero?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情仇皆在手 2024-12-14 20:00:53

svg 元素没有显式的高度和宽度属性，它们会根据其包含的内容自动调整大小。你可以通过在元素上调用 getBBox 来获取它们的实际高度/宽度：

var height = document.getElementById("myGroup").getBBox().height;

如果你真的喜欢 jquery，你可以根据

$('g#myGroup').get(0).getBBox().height;

Reed Spool 来编写它

svg <g> elements don't have explicit height and width attributes, they auto size to whatever they contain. You can get their actual height/width by calling getBBox on the element though:

var height = document.getElementById("myGroup").getBBox().height;

If you're really into jquery you could write it as

$('g#myGroup').get(0).getBBox().height;

according to Reed Spool

回复收藏 0 原文

北斗星光 2024-12-14 20:00:53

我无法获得上述任何答案，但确实遇到了使用 d3 查找它的解决方案：

var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;

getBBox() 这里将找到组元素的实际宽度和高度。就这么简单。

I wasn't able to get any of the answers above to work, but did come across this solution for finding it with d3:

var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;

getBBox() here will find the actual width and height of the group element. Easy as that.

回复收藏 0 原文

妥活 2024-12-14 20:00:53

根据上面的答案，您可以创建 jQuery 函数 .widthSVG() 和 .heightSVG()

/*
 * .widthSVG(className)
 * Get the current computed width for the first element in the set of matched SVG elements.
 */

$.fn.widthSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};

/*
 * .heightSVG(className)
 * Get the current computed height for the first element in the set of matched SVG elements.
 */
$.fn.heightSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};

Based on the above answer, you can create jQuery functions .widthSVG() and .heightSVG()

/*
 * .widthSVG(className)
 * Get the current computed width for the first element in the set of matched SVG elements.
 */

$.fn.widthSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};

/*
 * .heightSVG(className)
 * Get the current computed height for the first element in the set of matched SVG elements.
 */
$.fn.heightSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};

回复收藏 0 原文

~没有更多了~