SVG path for ellipse to fill with image - HTML CSS SVG

HTML CSS examples for SVG:Image

  1. HOME
  2. HTML CSS
  3. SVG
  4. Image

Description

SVG path for ellipse to fill with image

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

html,body,svg { height:100% }

      </style> 
 </head> <!--  w  w w .j  a  va2  s  . c om-->
 <body translate="no"> 
  <svg version="1.2" baseprofile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 177.5 175" xml:space="preserve"> 
   <defs> 
    <pattern id="image" x="0" y="0" patternunits="userSpaceOnUse" height="200" width="200"> 
     <image x="0" y="0" xlink:href="https://www.java2s.com/style/demo/Opera.png" width="200" height="200" /> 
    </pattern> 
   </defs> 
   <ellipse id="FillThisWithColorOrPattern" fill="url(#image)" stroke="#333333" stroke-miterlimit="10" cx="90" cy="87" rx="87.5" ry="82" /> 
   <circle id="Inner_1_" fill="#FF0000" cx="90" cy="87" r="35" /> 
   <path id="TextLine1_Path" fill="None" d="M90,137.5c-27.8,0-50.5-22.7-50.5-50.5S62.2,36.5,90,36.5s50.5,22.7,50.5,50.5S117.8,137.5,90,137.5z M90,37.5
      c-27.3,0-49.5,22.2-49.5,49.5s22.2,49.5,49.5,49.5c27.3,0,49.5-22.2,49.5-49.5S117.3,37.5,90,37.5z" /> 
   <text>
     test test test
    <textpath xlink:href="#TextLine1_Path">
      The quick brown fox jumps over the lazy dog.
    </textpath>
   </text> 
  </svg>  
 </body>
</html>

Related Tutorials