| <!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> |
