html - 如何在 HTML 中精确获取 svg 路径的边界？

Question

我需要使 svg 路径的外部与路径区域内部的颜色不同。我找到的最佳解决方案是在 svg 标签内的路径之前添加一个矩形，然后用我想要的特定颜色为这个矩形着色。问题是我没有得到精确的尺寸（x，y，宽度，高度）来绘制这样的矩形。但是，当我将路径元素悬停在 html 代码中显示浏览器（检查）时，路径元素以精确的矩形突出显示，我怎样才能获得这种矩形的尺寸？

这是一个代码示例：

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" id="id49">
    <rect x="16.0" y="4.0" width="282.0" height="117.0" style="fill:rgba(255, 102, 0, 255);stroke-width:0; "></rect>
    <path fill="rgba(51, 51, 0, 255)" id="id49_path" d="M 216.0 4.0 L 282.0 22.0 L 183.0 35.0 L 215.0 103.0 C 110.0 -43.0 95.0 112.0 35.0 117.0 C 29.0 95.0 -14.0 91.0 16.0 50.0 C 58.0 -56.0 44.0 43.0 58.0 40.0 L 86.0 17.0 C 101.0 45.0 98.0 77.0 130.0 100.0 C 139.0 -4.0 147.0 93.0 155.0 90.0 C 175.0 61.0 293.0 55.0 216.0 4.0" style="pointer-events: visiblePainted; transform: rotate(0deg);"></path>
</svg>

仅供参考：形状是用java设计的，我需要用html编写它的代码。

标签： htmlsvgcolorspathclip