显示内的 SVG 文本元素高度/宽度：无容器答案

【问题标题】：SVG text element height/width inside of display:none container显示内的 SVG 文本元素高度/宽度：无容器
【发布时间】：2015-11-04 09:35:01
【问题描述】：

我有一个 SVG，它被绘制在一个具有 display:none 的 css 的 div 中。我需要将一些渲染的文本元素居中，为此，我需要高度和宽度。不幸的是，当包含的 html 元素设置为 display:none 时，我的高度和宽度总是为 0。 getBBox(), clientWidth, getComputedTextLength() 方法都返回零。我的问题是：在这些条件下如何计算文本宽度？

例如

<div style='display:none;'>
<svg><g><text>some text</text></g></svg>
</div>

【问题讨论】：

您可以使用文本元素的textLength 属性获取宽度。我不确定它是否也受到 div 显示属性的影响。
设置display为可见，获取边界框，然后立即再次设置显示为none。
@Lars 好建议！我也想到了它，但这是一个 hack，我希望有一个更永久的解决方案，这有助于分离关注点。 div 由模态对话框角度控制器控制，该控制器在用户单击按钮之前不显示任何内容，并且图表是通过另一个组件呈现的，如果图表组件参与操作父标记的业务，那就有点糟糕了不是它自己的。
@James 那么获取元素尺寸的唯一“安全”方法是让浏览器呈现它，所以这可能是您必须采用的方式。

标签： d3.js svg

【解决方案1】：

您是否尝试将<div> 设置为visibility: hidden;？

您可能还想将其设为position: absolute;，这样它就不会影响页面上其他项目的布局。

【讨论】：

最佳，绝对位置，上：-100000px，左：-100000px;