Svg filtering background image, google chrome - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

Svg filtering background image, google chrome

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from   w ww  .j  a va 2s.co m-->
 <body> 
  <svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <defs> 
    <filter id="blur" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%"> 
     <fegaussianblur result="blurOut" stdDeviation="2" /> 
    </filter> 
   </defs> 
   <g> 
    <text x="10" y="100" stroke="none" fill="red" fill-opacity="1" font-size="24" filter="url(#blur)">
      BACKGROUND 
    </text> 
    <text x="20" y="100" stroke="none" fill="black" fill-opacity="1" font-size="26">
      text 
    </text> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials