title: SVG <clipPath> fit container and use % unit
body: <p>So I've been trying to make a waving animation for some text in a different color, for that I'm using <code>&lt;clipPath&gt;</code> and <code>-webkit-clip-path</code>. The <code>.holder</code> div contains two elements on top of one another with the same text, one in white, one in grey, and the <code>clip-path</code> is applied to the later.</p>
  <p>The problem is that I need the <code>&lt;path&gt;</code> coordinates to be proportional to the text's size. Here is a <a href="http://jsfiddle.net/1bg8Luxe/" rel="nofollow noreferrer"><strong>fiddle demo</strong></a>.</p>
  <p><img src="https://i.stack.imgur.com/gnx89.jpg" alt="Graphic explaining my project" /></p>
  <ul>
  <li><p>I've tried setting a <code>viewBox=&quot;0 0 100 100&quot;</code>, it doesn't work.</p>
  </li>
  <li><p>I've also tried using <code>clipPathUnits=&quot;objectBoundingBox&quot;</code> but it doesnt't seem to work in this case, I'm guessing because the text is <code>display:inline</code>.</p>
  </li>
  </ul>
  <p>Now if these seems too complicated to analyze, and you understand the basic concept and are willing to do it your way, go for it, I'm <em>so</em> open to suggestions at this point.</p>
  <p>Also, I'm trying to avoid JavaScript to do this, but if you have to, go ahead, no problem :)</p>
  <p>Here is the raw code:</p>
  <h2>HTML</h2>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;holder&quot;&gt;
          &lt;div class=&quot;back&quot;&gt;Text&lt;/div&gt;
          &lt;div class=&quot;front&quot;&gt;Text&lt;/div&gt;
          &lt;svg viewBox=&quot;0 0 100 100&quot; preserveAspectRatio=&quot;none&quot;&gt;
              &lt;clipPath id=&quot;path&quot;&gt;
                  &lt;path fill=&quot;transparent&quot; stroke=&quot;black&quot; &gt;
                      &lt;animate 
                          attributeName=&quot;d&quot; 
                          attributeType=&quot;XML&quot; 
                          values=&quot;M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z&quot;
                          begin=&quot;0s&quot; 
                          dur=&quot;1s&quot; 
                          fill=&quot;freeze&quot; 
                          repeatCount=&quot;indefinite&quot; 
                          direction=&quot;alternate&quot; /&gt;
                  &lt;/path&gt;
              &lt;/clipPath&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The <code>&lt;animate&gt;</code> element simply alternates between the two paths, to make the &quot;wave&quot; effect.</p>
  <h2>CSS</h2>
  <pre><code>.container {
      display:inline-block;
      padding:2.5% 5%;
      background:lightcoral;
  }
  .holder {
      position:relative;
      text-align:center;
      font:6em impact;
      color:white;
      text-transform:uppercase;
  }
  .front {
      position:absolute;
      top:0;
      color:gray;
      opacity:.3;
      -webkit-clip-path:url(#path);
  }
  svg {
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
  }
  </code></pre>
  <p>This is my css, not nearly perfect, feel free to rip it apart!</p>
  <p>Thanks in advance!</p>