paper.js/examples/SVG Import/Symbols.html
2013-06-02 13:41:10 -07:00

25 lines
No EOL
1.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Paths Test 2</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595" height="841" xml:space="preserve">
<symbol id="circle" viewBox="0 0 48 48" overflow="visible">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)" overflow="visible"/>
</svg>
<canvas id="canvas" width="595" height="841"></canvas>
</body>
</html>