Question

在我的网页中，有许多不规则的多边形形状。现在我已经在标签内设置了每一行x和y轴的值，但是我想在多边形中添加多个像段一样的行，它可以自动换行并正确对齐。现在我的代码是

<svg  width="640" height="300" style="margin-left:330px;">
    <polygon points="0.67,295.00 290.67,0.53 630.00,0.03 630.33,296.53" style="fill:#740054; stroke:#740054;stroke-width:1"/>
    <text x="210" y="120" style="font-size:24px;fill:#fff;font-family:Calibri;">Lend Lease </text>
    <text x="322" y="120" style="font-size:18px;fill:#fff;font-family:Calibri;">has  been awarded the contract to </text>
    <text x="210" y="140" style="font-size:18px;fill:#fff;font-family:Calibri;">design and construct two   additional  southbound</text>
    <text x="210" y="160" style="font-size:18px;fill:#fff;font-family:Calibri;">lanes on the Kwinana Freeway for 5km.The works </text>
    <text x="210" y="180" style="font-size:18px;fill:#fff;font-family:Calibri;">will commence in September and conclude in late </text>
</svg>

我想使用单段标签，它可以自动正确对齐。

Answer 1

你的意思是这样的？（仍然无法在IE中使用...）

<强> jsBin demo

<svg  width="640" height="300" style="margin-left:330px;">

   <polygon points="0.67,295.00 290.67,0.53 630.00,0.03 630.33,296.53" style="fill:#740054; stroke:#740054;stroke-width:1"/>

   <foreignObject x="240" y="90" width="350" height="200" style="font-size:18px;font-family:Calibri;color:#fff;">  
   <p xmlns="http://www.w3.org/1999/xhtml">
     <span style="font-size:24px;">Lend Lease</span>
     has  been awarded the contract to design and construct two additional lanes on the Kwinana Freeway for 5km.The works will commence in September and conclude in late
   </p>
  </foreignObject>   

</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

如何在多边形内添加像段落一样的多行

1 个答案: