background-clip-text-polyfill

by TimPietrusky

A SVG polyfill for -webkit-background-clip: text

132 Stars 30 Forks Last release: Not found 9 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

-webkit-background-clip: text polyfill

A SVG polyfill for

-webkit-brackground-clip: text

What?

If you want to use

background-clip: text
it's only available in WebKit based browser
h1 {
  background: url(http://timpietrusky.com/cdn/army.png) repeat;
  -webkit-background-clip: text;
}

This polyfill uses CSS feature detection and if

-webkit-background-clip: text
is not available, it replaces the specified dom element with a SVG like this:
  
    
  
  background-clip: text | Polyfill

How to use it?

1. Add the polyfill to your page:


2. Call the polyfill

Use it on any element, put keep in mind that the SVG

text
can't handle line breaks, so your content will be in one line.
var element = document.querySelector('.myelement'); 

/*

  • 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({ 'patternID' : 'mypattern', 'patternURL' : 'url/to/background/pattern', 'class' : 'myelement' });

Live example

You can see this in action on my CodePen: -webkit-background-clip: text Polyfill.


Handcrafted 2013 by Tim Pietrusky in Germany.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.