在多个多边形 SVG 中定位文本答案

【问题标题】：Position text inside multiple polygons SVG在多个多边形 SVG 中定位文本
【发布时间】：2019-07-10 04:36:18
【问题描述】：

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

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

【问题讨论】：

标签： html svg path polygon

【解决方案1】：

简短的回答是否定的。 SVG 没有任何像 HTML 那样的自动布局。您必须自己定位文本。

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

【讨论】：

【解决方案2】：

我已经更改了您的 svg，主要是重新组织元素。 Estate_masterplan 的大小不同，但您可以将其更改为您想要的大小。

我正在使用 javascript 来计算每个 <tspan> 的位置。请阅读代码中的 cmets。希望对你有帮助。

let estate_masterplan = document.querySelector("#estate_masterplan")
// all the groups
let gs = Array.from(estate_masterplan.querySelectorAll("g"));
// all the polygons
let ps = Array.from(estate_masterplan.querySelectorAll("polygon"));

// for each group
gs.forEach((g,i) =>{
  let bb = ps[i].getBBox();// calculate the bounding box
 
  // the center
  let c = {x: bb.x + bb.width/2,
           y: bb.y + bb.height/2}
  
  let t = g.querySelector("text");// the text
  t.setAttributeNS(null, "x", c.x )
  t.setAttributeNS(null, "y", c.y )
  let ts = t.querySelectorAll("tspan")// the tspan-s
  let ts1l = ts[0].getComputedTextLength();// the first span length
 
  ts[1].setAttributeNS(null, "dx", -ts1l )
  ts[2].setAttributeNS(null, "dx", -ts1l )
})

svg{border:1px solid}
text{font-size:9px;dominant-baseline:middle; text-anchor:middle;}

polygon{ fill:#D8D8D8;stroke:black;}

<svg id="estate_masterplan" viewBox="300 1190 270 120">
  <g>
    <polygon points="339 1265.26 351.666 1240.334 390.334 1227.223 408.334 1278.111 365 1294.111 346.556 1286.778"/>
    <text><tspan dy="-9">tspan line 1</tspan><tspan dy="11">tspan line 2</tspan><tspan dy="11">tspan line 3</tspan>
    </text>
  </g>
  
  <g>
    <polygon  points="390.334 1227.223 445.444 1209.89 463.307 1265.26 408.334 1278.111"/>
    <text><tspan dy="-9">tspan line 1</tspan><tspan  dy="11">tspan line 2</tspan><tspan dy="11">tspan line 3</tspan>
    </text>
  </g>
  
  <g>  
    <polygon points="445.444 1209.89 502.777 1199 509 1258.334 493.765 1258.334 463.307 1265.26"/>
    <text><tspan dy="-9">tspan line 1</tspan><tspan  dy="11">tspan line 2</tspan><tspan dy="11">tspan line 3</tspan>
    </text>
   </g>

</svg>

【讨论】：