将圆圈放在svg路径中

时间:2017-04-05 06:48:13

标签: javascript svg

我有一个像这样定义的svg路径:

<path d="M8080.74 4905.89L8083.56 4909.45L8178.70 4833.53L8176.16 
4830.33L8181.41 4826.17L8181.38 4826.13L8185.02 4823.20L8185.02 
4817.61L8189.07 4817.61L8189.07 4695.89L8185.02 4695.89L8185.02
4286.40L8185.02 4239.07L7991.62 4239.07L7991.62 4286.40L7963.22
4286.40L7963.22 4358.08L7963.22 4513.61L7963.22 4686.72L7768.53
4843.60L7635.93 4843.60L6965.13 4843.60L6955.67 4843.60L6955.67
4839.54L6835.30 4839.54L6835.30 4843.60L6468.80 4843.60L6468.80
4839.54L6345.73 4839.54L6345.73 4843.60L5983.28 4843.60L5983.28
4839.54L5860.21 4839.54L5860.21 4843.60L5853.45 4843.60L5804.76
4843.60L5802.06 4843.60L5756.07 4843.60L5753.37 4843.60L5746.61
4843.60L5746.61 4839.54L5623.54 4839.54L5623.54 4843.60L5139.37
4843.60L5139.37 4867.94L5139.37 4874.71L5132.61 4874.71L5132.61
4997.78L5139.37 4997.78L5139.37 5032.94L5615.42 5032.94L5622.18
5032.94L5622.18 5037.00L5745.25 5037.00L5745.25 5032.94L5756.07
5032.94L5802.06 5032.94L5804.76 5032.94L5853.45 5032.94L6522.89
5032.94L6529.66 5032.94L6529.66 5037.00L6652.73 5037.00L6652.73
5032.94L7508.81 5032.94L7508.81 5037.00L7631.88 5037.00L7631.88
5032.94L7924.23 5032.94z" stroke="#ff0000" fill="none" id="622754" />

我通过使用getBBox()并计算路径的中心来完成此操作,但它返回路径周围的方形,因此我的圆圈在外面。

我必须动态计算圆的坐标,因为这是建筑计划。当然,我有许多建筑计划和路径,有这样的特殊形式。

如何在路径中绘制圆圈?

编辑:

svg看起来像这样: svg][Imgur

我需要在此路径中绘制一个svg圈。红色圆圈应位于下方。

以下是我计算点坐标的方法: let locPosition = (localisation as any).getBBox(); // This is the BBox of the path -> {x: 5132.60986328125, y: 4239.06982421875, width: 3056.4599609375, height: 797.93017578125}) let centerX = locPosition.x + locPosition.width / 2; let centerY = locPosition.y + locPosition.height / 2;

这是一个包含路径和圆圈的小提琴的链接: https://jsfiddle.net/etgyru5q/

我想要的是路径中的圆圈,在它的中间。

0 个答案:

没有答案