Question

我制作了像这样的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>

我想要显示每个Polygon的值。直到现在我试过这个：

<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>

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

<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>

Answer 1

您需要明确定位文本

<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>

Answer 2

实际上上面提供的帮助有效但有些多边形的中心正在成为问题。

我去了一些几何体;）并用它来计算我的多边形的中心

  $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>

Answer 3

多边形点必须改变，至少我们必须提到多边形的三个坐标点值并提及文本的x,y坐标

<强> Fiddle

如何标记svg多边形

3 个答案: