时间戳

首页 > 解决方案 > 使 SVG 文本元素绝对定位（即不占用空间）？

html - 使 SVG 文本元素绝对定位（即不占用空间）？

问题描述

我有一个带有 <text> 和 <rect> 元素的简单 SVG 示例。我希望 <text> 元素表现得像一个绝对定位的 HTML 元素，这样它就不会占用空间（相对于相对或静态定位的元素）。理想情况下，这会导致“你好”这个词出现在蓝色方块内。这是我的代码：

<svg width="130" height="130" viewBox="0,-14,100,114">
    <rect width="100" height="100" style="fill:#0094ff;" />
    <text>hello</text>
</svg>

在此处输入图像描述

标签： htmlcsssvgcss-position

解决方案

这是您需要做的。

whereX和Y是位置的坐标，你可以填写你需要的任何位置。

来源：SVG

<svg class="svgIcon" width="130" height="130" viewBox="0,-14,100,114">
    <rect width="100" height="100" style="fill:#0094ff;" />
    <text x="0" y="12">hello</text>
</svg>

推荐阅读