如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸

Posted 2023-04-09

用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸的方法:
1、使用getElementById获取svg节点对象：
var el = document.getElementById("yourElement");
2、调用getBoundingClientRect获取path的边界矩形的位置：
var rect = el.getBoundingClientRect();
3、分别获取width和height属性就得到实际位置了。

console.log( rect.width );
console.log( rect.height); 参考技术A object.getBoundingClientRect()是你想要的
你的采纳是我前进的动力,记得好评和采纳，答题不易，互相帮助，
手机提问的朋友在客户端右上角评价点满意即可.
如果你认可我的回答，请及时点击采纳为满意回答按钮！本回答被提问者和网友采纳

如何用SVG制作面积图（没有JS）

我必须使用HTML，SVG和CSS制作面积图;我知道如何制作折线图，但我不知道如何填充线下方的区域。

我知道使用d3（或其他JS库）是正确的方法，但是现在我必须避免使用JS（这是大学的“家庭作业”）。

图表的结构是：在横轴上我有增量值（0,1,2，...），在纵轴上我有我的值。

答案

这是学习如何在JS中创建路径对象的一个​​很好的练习。路径对象在“d”属性中从一个点到另一个点行走。

查看w3学校页面 - https://www.w3schools.com/graphics/svg_path.asp和这个stackoverflow答案 - Scripting <path> data in SVG (reading and modifying)

填充下方要求您将路径一直延伸到轴，以便形成完整的形状。在线尝试一些例子来感受它。