<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,500,900,700,800' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Oleo+Script|Lemon|Leckerli+One' rel='stylesheet' type='text/css'>
<img class="svg-clip" src="https://www.w3cplus.com/sites/default/files/blogs/2015/1504/green.jpg"/>
<svg height="0" width="0">
  <defs>
    <clippath id="svgPath">
      <text x="80" y="150" textLength="700"  lengthAdjust="spacing" font-family="Lemon" font-size="150px"> SVG Text </text>
    </clippath>
  </defs>
</svg>
@import "compass/css3";

.svg-clip {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    margin:0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js