如何准确地在HTML中获取svg路径的边界?

时间:2018-07-12 15:43:26

标签: html svg colors path clip

我需要使svg路径的外部与路径区域的内部具有不同的颜色。 我发现最好的解决方案是在svg标记内的路径之前添加一个矩形,然后使用所需的特定颜色对该矩形进行着色。 问题是我没有获得绘制此类矩形的精确尺寸(x,y,宽度,高度)。但是,当我将悬停在html代码中的path元素显示浏览器(检查)时,该path元素使用精确的矩形突出显示时,如何获得该矩形的尺寸?

这是一个代码示例:

<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编写其代码。

0 个答案:

没有答案