如何将SVG对象的面积值转换为m2 更新

问题描述

我正在使用数学公式来获取SVG对象的圆形或矩形区域。对于多边形区域，我使用此formula。

但是值在视图框比例中，我想将其转换为平方米。例如，矩形对象具有width和height属性。就是这样：

element.width x element.height = area

例如，考虑svg =“ 0 0 100 100”的视图框，并在svg中有一个线对象，像该图像样本中那样用作比例的参考：

如何将面积值转换为平方米？有必要使用视框或仅定义1m为对象线宽吗？我不想使用库d3.js。谢谢。

更新：

对于矩形，我们必须使用宽度和高度，对于圆必须使用半径。在这两种情况下，都可以轻松地将半径，高度和宽度转换为米。但是在多边形中，用于计算面积的是具有x和y轴值的顶点（点）。如何将“翻译”转换为米？

新更新

我仍然无法很好地计算多边形。我在这里发布了一个示例：running example

圆形和正方形/矩形没有问题。但是由于某种原因，它不适用于不规则多边形。有趣的是，如果我创建一个正方形的多边形，它将起作用。有什么建议可以解决这个问题吗？谢谢。

解决方法

首先，您需要知道svg元素中的仪表多长时间：

let meter = m.getTotalLength();

接下来，您将得到矩形的边界框。这将返回一个位置为（x，y）的宽度和高度的svg rect。您将只需要宽度和高度：

let rect = the_rect.getBBox();

现在您可以计算矩形的宽度和高度的等效值：

let w = rect.width / meter;
let h = rect.height / meter;

最后，您可以计算出矩形的面积

let area = w * h;

这是一个有效的示例：

// get the length of the line representing one meter
let meter = m.getTotalLength();
// get the bounding box of the rect. This is returning an svg rect with a position (x,y) a width and a height. 
let rect = the_rect.getBBox();

//calculate the equivalent in meters of the width and height
let w = rect.width / meter;
let h = rect.height / meter;
//calculate thge area in merers
let area = w * h;

console.log("area:",area)

svg{border:solid; width:300px}

<svg viewBox="0 0 100 100">
  <rect id="the_rect" x="10" y="10" width="30" height="50" stroke="black" fill="#cab" />

  <path id="m" d="M50,70H90" stroke="black" />
  <text text-anchor="middle" dy="-5">
    <textPath xlink:href="#m" startOffset="50%">1 m</textPath>
  </text>

</svg>

更新

有人在评论

请注意，getBBox“不考虑应用于元素或其父元素的任何变换”（以防万一有人需要它来变换形状）

在所应用的变换仅是转换的情况下，该变换是不相关的，因为仅使用了宽度和高度。如果转换意味着缩放，则需要将形状包装在一个组中并获取该组的边界框。如果转换意味着要倾斜，则您已经有一个菱形而不是一个矩形，因此您将需要另一种方法。

有关此答案的主要思想不是向您展示如何获取任何多边形之王的面积（您知道），而是如何将svg单位的尺寸变为米。

javascript scale svg