background-clip: text >> javascript

<script>
 /**
  -webkit-background-clip: text Polyfill

  # What? #
  A polyfill which replaces the specified element with a SVG
  in browser where &quot;-webkit-background-clip: text&quot;
  is not available.

  Fork it on GitHub
  https://github.com/TimPietrusky/background-clip-text-polyfill

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

Element.prototype.backgroundClipPolyfill = function () {
  var a = arguments[0],
      d = document,
      b = d.body,
      el = this;

  function hasBackgroundClip() {
    return b.style.webkitBackgroundClip != undefined;
  };

  function addAttributes(el, attributes) {
    for (var key in attributes) {
      el.setAttribute(key, attributes[key]);
    }
  }

  function createSvgElement(tagname) {
    return d.createElementNS(&#x27;http://www.w3.org/2000/svg&#x27;, tagname);
  }

  function createSVG() {
    var a = arguments[0],
        svg = createSvgElement(&#x27;svg&#x27;),
        pattern = createSvgElement(&#x27;pattern&#x27;),
        image = createSvgElement(&#x27;image&#x27;),
        text = createSvgElement(&#x27;text&#x27;);

    // Add attributes to elements
    addAttributes(pattern, {
      &#x27;id&#x27; : a.id,
      &#x27;patternUnits&#x27; : &#x27;userSpaceOnUse&#x27;,
      &#x27;width&#x27; : a.width,
      &#x27;height&#x27; : a.height
    });

    addAttributes(image, {
      &#x27;width&#x27; : a.width,
      &#x27;height&#x27; : a.height
    });
    image.setAttributeNS(&#x27;http://www.w3.org/1999/xlink&#x27;, &#x27;xlink:href&#x27;, a.url);

    addAttributes(text, {
      &#x27;x&#x27; : 0,
      &#x27;y&#x27; : 80,
      &#x27;class&#x27; : a[&#x27;class&#x27;],
      &#x27;style&#x27; : &#x27;fill:url(#&#x27; + a.id + &#x27;);&#x27;
    });

    // Set text
    text.textContent = a.text;

    // Add elements to pattern
    pattern.appendChild(image);

    // Add elements to SVG
    svg.appendChild(pattern);
    svg.appendChild(text);

    return svg;
  };

  /*
   * Replace the element if background-clip
   * is not available.
   */
  if (!hasBackgroundClip()) {
    var img = new Image();
    img.onload = function() {
      var svg = createSVG({
        &#x27;id&#x27; : a.patternID,
        &#x27;url&#x27; : a.patternURL,
        &#x27;class&#x27; : a[&#x27;class&#x27;],
        &#x27;width&#x27; : this.width,
        &#x27;height&#x27; : this.height,
        &#x27;text&#x27; : el.textContent
      });

      el.parentNode.replaceChild(svg, el);
    }
    img.src = a.patternURL;
  }
};

var element = document.querySelector(&#x27;.headline&#x27;);

/*
 * Call the polyfill
 *
 * patternID : the unique ID of the SVG pattern
 * patternURL : the URL to the background-image
 * class : the css-class applied to the SVG
 */
element.backgroundClipPolyfill({
  &#x27;patternID&#x27; : &#x27;mypattern&#x27;,
  &#x27;patternURL&#x27; : &#x27;http://timpietrusky.com/cdn/army.png&#x27;,
  &#x27;class&#x27; : &#x27;headline&#x27;
});
</script>