CODEWITHSUNDEEP
htmlsvg
user1637281
user1637281

Reputation:

Elliptical path is cut off

I need all the text displayed in this elliptical, but it is not.

Code

<embed width="1000" height="1000" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   
    <defs>
        <path id="textPath" 
              d = "M 50 250
                   a 250 250 0 1 1 575 0"
       />
    </defs>
    <text fill="red">
      <textPath xlink:href="#textPath">Foobarcs. All your favorites in one place.     
      </textPath>
    </text>    
  </svg>
</embed>

Upvotes: 1

Views: 77

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Your fiddle is a bit broken, but when fixed, everything looks okay. All the text is visible.

http://jsfiddle.net/usVuq/1/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   
  <defs>
      <path id="textPath" 
            d = "M 50 250
                 a 250 250 0 1 1 575 0" />
  </defs>

  <use xlink:href="#textPath" stroke="blue" fill="none" />

  <text fill="red">
    <textPath xlink:href="#textPath">Foobarcs. All your favorites in one place.     
    </textPath>
  </text>    

</svg>

Or is there something else you need that I don't understand?

Upvotes: 2

Related Questions