Поместите ярлык в "центр" пути SVG

Я пытаюсь нарисовать метку на многоугольнике файла svg. Проблема, с которой я сталкиваюсь, состоит в том, чтобы найти примерно центр этого многоугольника, чтобы поместить метку, поскольку координаты пути находятся в формате svg и должны быть проанализированы. Есть ли более простой способ определить центр полигона svg (может быть, кто-то может указать библиотеку javascript или фрагмент)? Я использую библиотеку JavaScript Raphael для управления svg, но, похоже, он не выходит за рамки стандартных функций svg.

Ответы

Ответ 1

Вы можете попробовать следующее приближение для выполнения чего-то похожего на предложение многоугольника на основе методов SVG DOM:

var totalPathLength = pathelm.getTotalLength();
var step = totalPathLength / 100;
for(var dist=0; dist < totalPathLength; dist+=step)
{
  var pt = pathelm.getPointAtLength(dist);
  addToAverage(pt.x, pt.y);
}

Я думаю, что самый простой подход заключается в использовании центра элемента boundingbox (pathelm.getBBox()), который проще, чем предложение многоугольника.

Ответ 2

Простейшая вещь, которую вы могли бы попытаться сделать, - вычислить центр, взяв среднее значение всех точек в многоугольнике. Он должен работать для всех, кроме самых неправильных полигонов. Я использовал тот же алгоритм для хорошего эффекта в своих программах.

Удачи.

Ответ 3

Вставьте текстовый тег внутри svg и поместите его, вычислив ширину и высоту

 <svg width="447pt" height="559pt" viewBox="0 0 894 1118" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ............
    ............

   <text x="450" y="300" font-family="Verdana" font-size="15" fill="red" >
        Text To Show
   </text>
</svg>