Javascript 如何标记svg多边形

我制作了如下svg多边形：

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="113px" viewBox="-9.25 6.98 209 196" enable-background="new -18.25 -18.75 200 180" xml:space="preserve">
      <g>
        {% for i in range (1,5) %}
        <polygon class="sl" index="{{i}}"  fill="{{colors[i].fill}}" points="{{colors[i].points }}" x="0px" y="0px" msg="{{ understand.msg }}"/>
        {% endfor %}
      </g>
    </svg> 

{i在（1,5）%范围内的百分比}
{%endfor%}

我想在每个多边形上显示一个值。到现在为止，我试过：

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="113px" viewBox="-9.25 6.98 209 196" enable-background="new -18.25 -18.75 200 180" xml:space="preserve">
      <g>
        {% for i in range (1,5) %}
        <polygon class="sl" index="{{i}}"  fill="{{colors[i].fill}}" points="{{colors[i].points }}" x="0px" y="0px" msg="{{ understand.msg }}">
          <text>{{value}}</text>
          </polygon>
        {% endfor %}
      </g>
    </svg> 

{i在（1,5）%范围内的百分比}
{{value}}
{%endfor%}

这不管用。有什么方法可以标记多边形吗

<svg xml:space="preserve" enable-background="new -18.25 -18.75 200 180" viewBox="-9.25 6.98 209 196" height="113px" width="180px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
          <g>
                        <polygon msg="" y="0px" x="0px" points="80.351,140.188 56.09,98.165 104.612,98.165" fill="#F9F8F9" index="1" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="108.143,92.084 83.882,50.061 132.405,50.061 " fill="#C0E7D2" index="2" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="52.752,92.084 28.491,50.061 77.014,50.061 " fill="#FCC3CD" index="4" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="104.65,94.235 56.128,94.235 80.39,52.212 " fill="#F0EDEE" index="3" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="136.041,44.023 111.78,2 160.303,2 " fill="#0E9935" index="5" class="sl">
              <text fill="red" y="" x="">1</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="80.651,44.023 56.39,2 104.914,2 " fill="#E2DEDE" index="7" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="132.549,46.177 84.028,46.177 108.289,4.155" fill="#A5DDBE" index="6" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="25.262,44.024 1,2.001 49.524,2.001 " fill="#FE364E" index="9" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                        <polygon msg="" y="0px" x="0px" points="77.161,46.177 28.636,46.177 52.898,4.153 " fill="#F9A8B6" index="8" class="sl">
              <text fill="red" y="" x="">0</text>
            </polygon>
                      </g>
        </svg>

0
0
0
0
1.
0
0
0
0

您需要明确定位文本

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="113px" viewBox="-9.25 6.98 209 196" enable-background="new -18.25 -18.75 200 180" xml:space="preserve">
  <g>
    {% for i in range (1,5) %}
    <polygon class="sl" index="{{i}}"  fill="{{colors[i].fill}}" points="{{colors[i].points }}" x="0px" y="0px" msg="{{ understand.msg }}"></polygon>
    <text x="{{x_center_of_poly}}" y="{{y_center_of_poly}}" fill="red">{{value}}</text>
    {% endfor %}
  </g>
</svg> 

{i在（1,5）%范围内的百分比}
{{value}}
{%endfor%}

多边形点必须更改，至少我们必须提及多边形的三个坐标点值，并提及文本的

x，y

坐标

---

实际上，上面提供的帮助是有效的，但多边形的中心如何成为问题

我学了一点几何；）用这个来计算多边形的中心

  $points = explode(' ', $understand['points']);
  foreach ($points as $point) {
    if ($point != '') {
      $poi = explode(',', $point);
      $xcordinates[] = $poi[0];
      $ycordinates[] = $poi[1];
    }
  }
  $understand['x'] = ($xcordinates[0] + $xcordinates[1] + $xcordinates[2])/3;
  $understand['y'] = ($ycordinates[0] + $ycordinates[1] + $ycordinates[2])/3;

在HTML中，我做到了这一点：

  <polygon class="sl" index="{{}}"  fill="{{}}" points="{{understanding[key].points }}"  msg="{{ understand.msg }}"/>
        <text  x="{{color[key].x}}" y="{{color[key].y}}" fill="black">{{value}}</text>

{{value}}

colors[i]。点有多个点或单个点…？多个..不同于您可能用于创建SVG的任何模板语言的difrent值，是吗？如果是这样，我建议在您的问题中只显示最终生成的代码。@Phrogz请参见编辑。我已经添加了生成的svg内容。目前文本没有坐标，因为我不知道应该放在那里什么！实际上所有的点都是不同的。也没有预定义的中心点，因此您必须决定文本相对于多边形中的点显示的位置，并计算适当的值，然后将它们传递到模板中