Text Clip Path

Using text as an svg <clipPath>. Doesn't work for Internet Explorer.

<html>
  <head>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var width = 960,
          height = 270;
      
      var clipPath = d3.select("body")
        .append("svg")
          .attr("width", 0)
          .attr("height", 0)
        .append("defs")
        .append("clipPath")
          .attr("id", "text")
        .append("text")
          .attr("y", height - 25)
          .attr("textLength", width - 40 + "px")
          .attr("lengthAdjust", "spacing")
          .attr("font-family", "Arial, Helvetica, sans-serif")
          .attr("font-weight", 700)
          .attr("font-size", 300 + "px")
          .attr("font-style", "italic")
          .text("Наклон");
       
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("clip-path", "url(#text)");
     
     var x = d3.scale.ordinal().rangeBands([-width/4, width]);
     
     var data = d3.range(0, 1, 0.1);
     
     x.domain(data.map(function(d) { return d; }));
     
     var rect = svg.selectAll("rect")
         .data(data)
       .enter().append("rect")
         .attr("x", x)
         .attr("y", 0)
         .attr("width", x.rangeBand() + 1)
         .attr("height", height)
         .attr("transform", "skewX(35)");
     
     var t0 = Date.now();
     setInterval(function() {
       var dt = (Date.now() - t0)/4000;
       
       hue = 300*Math.sin(dt);
       
       rect
        .style("fill", function(d) {
           var h = Math.round(hue * d),
               c = Math.round(100*d),
               l = Math.round(25 + 50 * d);
           return d3.hcl(h, c, l).toString();
         });
         
     }, 66);
    </script>
  </body>
</html>

https://d3js.org/d3.v3.min.js