Question

这是地图的一部分，我需要几个多边形，每个多边形中都有一些多行文字。无需手动定位每个文本元素是否可以实现？

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

Answer 1

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

您可以使用Javascript计算多边形的中心，然后以这种方式放置文本。另外，假设您使用的是浏览器，则可以使用<foreignObject>元素在SVG中嵌入一些HTML。但是，否则，确定每个文本的位置是您的全部责任。

Answer 2

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

我正在使用JavaScript计算每个<tspan>的位置。请阅读代码中的注释。希望对您有所帮助。

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>

在多个多边形SVG中放置文本

2 个答案: