Hello world

background pattern for SVG

by chrisloughnane

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
      <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
    </pattern>
    <pattern id="p2" patternUnits="userSpaceOnUse" width="10" height="10">
      <image xlink:href="http://phrogz.net/tmp/grid.gif" width="10" height="10" />
    </pattern>
  </defs>
  <text x="20" y="170" fill="url(#p1)">
    Hello
    <tspan x="20" y="350" fill="url(#p2)">Wo<tspan fill="url(#p1)">r</tspan>ld</tspan>
  </text>
</svg>

CSS

svg {
    background:#ddd;
    position:absolute;
    top:0; left:0; 
    width:100%; height:100%;
}
text { font-family:Verdana; font-size:160pt; font-weight:bold; stroke:#000 }
/* svg:hover {opacity: 0.3;}*/

JavaScript

$(function(){
    
    $('svg').attr({fill: 'url(#p2)'});
    

});