forked from TimPietrusky/background-clip-text-polyfill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
background-clip-text-polyfill.js
109 lines (94 loc) · 2.42 KB
/
background-clip-text-polyfill.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* A SVG polyfill for "-webkit-brackground-clip: text;".
*
* How to use:
*
* 1. Add the polyfill to your page.
*
* 2. Call the polyfill
var element = document.querySelector('.myelement');
element.backgroundClipPolyfill({
'patternID' : 'mypattern',
'patternURL' : 'url/to/background/pattern',
'class' : 'myelement'
});
*
* Variables:
*
* patternID : the unique ID of the SVG pattern
* patternURL : the URL to the background-image
* class : the css-class applied to the SVG
*
*
* 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('http://www.w3.org/2000/svg', tagname);
}
function createSVG() {
var a = arguments[0],
svg = createSvgElement('svg'),
pattern = createSvgElement('pattern'),
image = createSvgElement('image'),
text = createSvgElement('text');
// Add attributes to elements
addAttributes(pattern, {
'id' : a.id,
'patternUnits' : 'userSpaceOnUse',
'width' : a.width,
'height' : a.height
});
addAttributes(image, {
'width' : a.width,
'height' : a.height
});
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', a.url);
addAttributes(text, {
'x' : 0,
'y' : 80,
'class' : a.class,
'style' : 'fill:url(#' + a.id + ');'
});
// 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({
'id' : a.patternID,
'url' : a.patternURL,
'class' : a.class,
'width' : this.width,
'height' : this.height,
'text' : el.textContent
});
el.parentNode.replaceChild(svg, el);
}
img.src = a.patternURL;
}
};