104 lines
2.9 KiB
HTML
104 lines
2.9 KiB
HTML
<!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>
|