1

在我的网页中，有许多不规则的多边形形状。现在我已经在标签内设置了每条线的 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>

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

4

1 回答 1

0

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

jsBin 演示

<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

于 2014-09-01T13:01:12.217 回答