SVG foreignObject 元素的大小以适合 HTML 元素答案

【问题标题】：Sizing of SVG foreignObject element to fit HTML elementSVG foreignObject 元素的大小以适合 HTML 元素
【发布时间】：2013-08-20 14:57:00
【问题描述】：

我正在使用 D3 javascript 库进行可视化。我想为可视化的某些元素创建工具提示，并且我的客户希望它们看起来像“纸 sn-ps/post-its”。最初，我使用一些不错的 CSS 技巧为工具提示创建了普通的 DIV，以创建所需的外观。（灵感来自this tutorial）

我想使用将工具提示封装到 SVG foreignObject 元素中，以便它更适合可视化并且我可以轻松地操作它们。（例如缩放/平移）所以我的问题是：如何获得位于 foreignObject 元素内的 DIV 的正确大小，以便我可以准确设置 foreignObject 元素的大小？特别是在使用边距/填充/阴影时 ....

我通过使用 .getBoundingClientRect() 解决了这个问题，但我不知道这是否是最好的方法。

这是一个代码示例：

var body = d3.select("body");

var svg = body.append("svg");

var tooltipContainer = svg.append("svg:g");

var html = tooltipContainer.append("foreignObject")
var div = html.append("xhtml:div")
    .attr('class', 'paper-tooltip')
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum     dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet,     consectetur adipiscing elit. Donec eu enim quam. ");

var bcr = div[0][0].getBoundingClientRect();

html.attr('x', 50)
    .attr('y', 50)
    .attr('width', bcr.width)
    .attr('height', bcr.height);

svg.call(d3.behavior.zoom().on('zoom', redrawOnZoom));

 function redrawOnZoom(){
    tooltipContainer.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' +         d3.event.scale + ')');
};

这是一个有效的 jsFiddle 示例：http://jsfiddle.net/jhe8Y/1/

编辑：

我意识到，对于不同的阴影框设置，.getBoundingClientRect() 将不起作用。我还意识到，在我的第一个解决方案中，.getBoundingClientRect() 返回的尺寸太大，尤其是在正确的尺寸上。

所以我尝试了另一种方法，使用 jQuerys .outerWidth(true)/.outerHeight(true) 并手动计算阴影大小。这似乎工作正常，但做这样的事情感觉很糟糕。

还有其他方法可以获取 DIV 及其所有组件的确切大小吗？

更新的 jsFiddle 在这里：http://jsfiddle.net/jhe8Y/3/

【问题讨论】：

标签： html svg d3.js size

【解决方案1】：

您无需将其放大或缩小。它没有真正的用途，对吧？然后你可以将foreignObjectheight和width都设置为1，并通过CSS设置foreignObject { overflow: visible; }。

【讨论】：

【解决方案2】：

我以前曾为此苦苦挣扎，我发现最简单的方法就是依赖Bootstrap's Tooltip。

例如

// title: this is what gets shown as the title in the tooltip
d3.select('svg').attr('title','This is my tooltip title');

// content: this will show up as the content if you go for 
// popovers instead . 
d3.select('svg').attr('data-content','This is some content');

// set the options – read more on the Bootstrap page linked to above
$('svg').popover({
   'trigger':'hover'
   ,'container': 'body'
   ,'placement': 'top'
   ,'white-space': 'nowrap'
   ,'html':'true' // preserve html formatting
});

归结为，将title 和data-content 属性添加到您有兴趣添加工具提示的任何svg 元素。然后，将内容设置为您想要的任何内容。因此，在您的情况下，html 将是

<div class='paper-tooltip'>Lorem ipsum dolor sit amet, ... etc etc.</div>