malebranche
Version:
Converts clip path coordinates from absolute to fractional units between 0 and 1.
32 lines (30 loc) • 735 B
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#foo {
width : 1000px;
height : 600px;
background : red;
-webkit-clip-path : url(#svgPath);
clip-path : url(#svgPath);
background-image : url(http://cdn.theatlantic.com/assets/media/img/photo/2013/07/the-statue-of-liberty-127-years-at-americas-gatewa/l01_72621167/main_1200.jpg);
}
</style>
</head>
<body>
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<text x="100" y="500" font-size="400" font-family="helvetica" fill="black" >
USA
</text>
</clipPath>
</defs>
</svg>
<div id='foo'></div>
<a href='object-bounding-box.html'>clip path example with object bounding box space</a>
</body>
</html>