Question

有没有办法让SVG元素的宽度和高度等于其中text节点内文本的宽度？

这是一个演示：

这是SVG标记：

<span>I want </span>

<svg width="100%" height="80px">
  <text x="0" y="0" fill="white">
    THESE WORDS
  </text>
</svg>

<span>to be an SVG</span>

理想情况下，我希望将SVG视为内联元素（例如span节点）。

我希望它像这样呈现：

I want THESE WORDS to be an SVG

其中THESE WORDS是SVG。

如果我在width="auto" height="auto"节点上执行svg，则根本不会渲染。

如何让SVG元素自动适应文本元素的宽度？

Answer 1

我不知道任何SVG + CSS解决方案。

您可以使用一些JavaScript来调整大小：

// get the bounding box for the text element
var bbox = text.getBBox();

// set the svg width/height accordingly
svg.setAttribute( 'width', bbox.width );
svg.setAttribute( 'height', bbox.height );

// set the viewbox accordingly
svg.setAttribute( 'viewBox', bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height );

Modified Codepen

getBBox() in the SVG spec

您的一般问题是，SVG元素在其他图像中没有任何大小。你的画布（理论上）是无限大小的。因此，为了确定大小，浏览器必须使用所有包含的元素，渲染它们，抓取渲染的坐标并计算最大边界框。 Afaik没有浏览器这样做。

将SVG高度和宽度设置为其中<text>节点的高度和宽度</text>

1 个答案: