blob: afe31c67f12de04e45bd23f3a23751cd8cb93f95 [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SVG clip-path CSS transform</title>
<style type="text/css" media="screen">
div {
-webkit-box-sizing: border-box;
}
.column {
margin: 10px;
display: inline-block;
vertical-align: top;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
background-color: silver;
border: 1px solid black;
}
.box {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 60px;
border: 1px dotted black;
-webkit-transform-origin: top left; /* to match SVG */
}
svg { width: 100%; height: 100% }
.final {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="column">
<h2>SVG CSS scale</h2>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="circle1" cx="10" cy="10" r="20" style="-webkit-transform:scale(5)"/>
<clipPath id="clip-circle1">
<use xlink:href="#circle1"/>
</clipPath>
</defs>
<rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle1)"/>
</svg>
</div>
<h2>SVG scale</h2>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="circle2" cx="10" cy="10" r="20" transform="scale(5)"/>
<clipPath id="clip-circle2">
<use xlink:href="#circle2"/>
</clipPath>
</defs>
<rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle2)"/>
</svg>
</div>
</div>
<div class="column">
<h2>SVG CSS compound</h2>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect1" x="1" y="1" width="40" height="40" style="-webkit-transform:rotate(45deg) scale(5)"/>
<clipPath id="clip-rect1">
<use xlink:href="#rect1"/>
</clipPath>
</defs>
<rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect1)"/>
</svg>
</div>
<h2>SVG compound</h2>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect2" x="1" y="1" width="40" height="40" transform="rotate(45) scale(5)"/>
<clipPath id="clip-rect2">
<use xlink:href="#rect2"/>
</clipPath>
</defs>
<rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect2)"/>
</svg>
</div>
</div>
</body>
</html>