1

In my web page, there are many irregular polygon shape .Now i have set each line x and y axis value within tag, but i would like add multiple line like paragraph within polygon and it can automatically line break and align correctly. Now my code is

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

i want to use single paragraph tag and it can align automatic correctly.

abdul
  • 57
  • 2
  • 12
  • You'll need to write code in javascript to do this. There's nothing native in SVG that will do it for you. Good luck. – Robert Longson Sep 01 '14 at 12:50
  • Thanks for your response Mr.Robert. Is there any example for javascript code. this is my demo site link www.altius.co.in/lend – abdul Sep 01 '14 at 12:54

1 Answers1

0

You mean something like this? (Still not usable in 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

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thanks Mr.Roko , but that foreign object does not supported in Internet Explorer. Is there any other options is available for that issue. – abdul Sep 01 '14 at 13:21
  • @abdul JS afaik... calculate the characters, split the string, create `text` elements, position them..... Or simply create a DIV element using `:before` pseudo to create the needed shape. Than you simply use HTML as it's meant to be used (waiting for all those new technologies to be crossbrowser-compatible). So yes, no need to SVG at all. – Roko C. Buljan Sep 01 '14 at 13:25
  • i don't know how to do that. This is my demo site [link](http://altius.co.in/lend/). That given paragraph text will update automatically. – abdul Sep 02 '14 at 06:27
  • @abdul the page I've seen is doable exclusively with overlaying DIVS and images. You've stuck with your idea on using SVG. – Roko C. Buljan Sep 02 '14 at 12:18