Need help with background-clip-text-polyfill?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
TimPietrusky

Description

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

132 Stars 30 Forks 9 Commits 2 Opened issues

Services available

Need anything else?

-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.