时间戳

首页 > 解决方案 > 在多个多边形 SVG 中定位文本

html - 在多个多边形 SVG 中定位文本

问题描述

这是地图的一部分，我需要几个多边形，每个多边形都有一些多行文本。如果不手动定位每个文本元素，这可能吗？

<svg xmlns="http://www.w3.org/2000/svg" id="estate-masterplan" width="3010" height="1897">
  <g fill="#D8D8D8" fill-rule="evenodd" transform="translate(-0.000000, 0.000000)">
    <rect width="3010" height="1897"/>
    <polygon stroke="#000" points="339 1265.26 351.666 1240.334 390.334 1227.223 408.334 1278.111 365 1294.111 346.556 1286.778"/>
    <text font-size="15" dy="0">
      <tspan x="0" dy=".6em">tspan line 1</tspan>
      <tspan x="0" dy="1.2em">tspan line 2</tspan>
      <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
    <polygon stroke="#000" points="390.334 1227.223 445.444 1209.89 463.307 1265.26 408.334 1278.111"/>
    <text font-size="15" dy="0">
      <tspan x="0" dy=".6em">tspan line 1</tspan>
      <tspan x="0" dy="1.2em">tspan line 2</tspan>
      <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
    <polygon stroke="#000" points="445.444 1209.89 502.777 1199 509 1258.334 493.765 1258.334 463.307 1265.26"/>
    <text font-size="15" dy="0">
      <tspan x="0" dy=".6em">tspan line 1</tspan>
      <tspan x="0" dy="1.2em">tspan line 2</tspan>
      <tspan x="0" dy="1.2em">tspan line 3</tspan>
    </text>
  </g>
</svg>

标签： htmlsvgpathpolygon

解决方案

最简洁的答案是不。SVG 没有任何像 HTML 那样的自动布局。您必须自己定位文本。

您可以使用 Javascript 计算多边形的中心，并以这种方式定位文本。此外，假设您在浏览器中，您可以使用<foreignObject>元素在 SVG 中嵌入一些 HTML。但除此之外，决定每段文本的去向是你的全部责任。

推荐阅读