html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Background Image in SVG Text</title>
</head>
<body>
<svg width="270" height="100" viewBox="0 0 270 10">
<defs>
<pattern id="bgimg" patternUnits="userSpaceOnUse" width="480" height="119">
<image xlink:href="http://www.labo-france.fr/sites/default/files/styles/bigbanner/public/BOIS%20PLANCHE%20LABO%20FRANCE_1.jpg" x="0" y="0" width="490" height="119"/>
</pattern>
<text id="txt" x="10" y="40"
style="font-family:sans serif; font-size:100; font-weight:900;"
fill="url(#bgimg)">TEXT</text>
</defs>
<use xlink:href="#txt"/>
</svg>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
body {
display:table-cell;
background: black;
vertical-align:middle;
}
svg {
border: red 1px solid;
/* display:block;
margin:auto;*/
width:80vw;
height:30vw;
margin:0 10vw;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run