paper.js/examples/SVG Export/Clipping.html
2014-08-16 19:24:54 +02:00

17 lines
7.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipping</title>
<!-- IE 9: display inline SVG -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importJSON('[["Layer",{"children":[["Group",{"name":"Layer_1","children":[["Group",{"children":[["Group",{"children":[["Path",{"segments":[[[353,198],[0,-56.885],[0,56.885]],[[250,301],[56.886,0],[-56.885,0]],[[147,198],[0,56.885],[0,-56.885]],[[250,95],[-56.885,0],[56.886,0]]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,198],[137,85],[250,85],[250,198]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_2_","clipMask":true,"segments":[[137,198],[137,85],[250,85],[250,198]],"closed":true,"leading":14.4}],["Path",{"segments":[[[147,198],[0,56.88533],[0,-56.88533]],[[250,95],[-56.88533,0],[56.88533,0]],[[353,198],[0,-56.88533],[0,56.88533]],[[250,301],[56.88533,0],[-56.88533,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["Group",{"children":[["Group",{"children":[["CompoundPath",{"pathData":"M353,491.911c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.885 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,409.512c-45.508,0 -82.4,36.892 -82.4,82.399c0,45.507 36.893,82.4 82.4,82.4c45.509,0 82.399,-36.894 82.399,-82.4c0.001,-45.508 -36.89,-82.399 -82.399,-82.399z","strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,491.911],[137,378.911],[250,378.911],[250,491.911]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_4_","clipMask":true,"segments":[[137,491.911],[137,378.911],[250,378.911],[250,491.911]],"closed":true,"leading":14.4}],["CompoundPath",{"pathData":"M353,491.911c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.885 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,409.512c-45.508,0 -82.4,36.892 -82.4,82.399c0,45.507 36.893,82.4 82.4,82.4c45.509,0 82.399,-36.894 82.399,-82.4c0.001,-45.508 -36.89,-82.399 -82.399,-82.399z","fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["Group",{"children":[["Group",{"children":[["CompoundPath",{"pathData":"M353,785.823c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.886 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,703.423c-45.508,0 -82.4,36.892 -82.4,82.4c0,45.508 36.893,82.399 82.4,82.399c45.509,0 82.399,-36.893 82.399,-82.399c0.001,-45.509 -36.89,-82.4 -82.399,-82.4z","strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["CompoundPath",{"name":"SVGID_6_","clipMask":true,"pathData":"M353,785.823c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.886 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,703.423c-45.508,0 -82.4,36.892 -82.4,82.4c0,45.508 36.893,82.399 82.4,82.399c45.509,0 82.399,-36.893 82.399,-82.399c0.001,-45.509 -36.89,-82.4 -82.399,-82.4z","leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["PointText",{"matrix":[1,0,0,1,83.5002,68.5],"content":"Clipping a path with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,355.5],"content":"Clipping a compound path with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,650.5],"content":"Clipping a path with a compound path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,941.5],"content":"Clipping a group with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_8_","clipMask":true,"segments":[[153,1082.999],[153,969.998],[266,969.998],[266,1082.999]],"closed":true,"leading":14.4}],["Path",{"segments":[[[135,965.998],[0,11.87412],[0,-11.87412]],[[156.5,944.498],[-11.87412,0],[11.87412,0]],[[178,965.998],[0,-11.87412],[0,11.87412]],[[156.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,965.998],[0,11.87412],[0,-11.87412]],[[209.5,944.498],[-11.87412,0],[11.87412,0]],[[231,965.998],[0,-11.87412],[0,11.87412]],[[209.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,965.998],[0,11.87412],[0,-11.87412]],[[262.5,944.498],[-11.87412,0],[11.87412,0]],[[284,965.998],[0,-11.87412],[0,11.87412]],[[262.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[135,1018.999],[0,11.87412],[0,-11.87412]],[[156.5,997.499],[-11.87412,0],[11.87412,0]],[[178,1018.999],[0,-11.87412],[0,11.87412]],[[156.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,1018.999],[0,11.87412],[0,-11.87412]],[[209.5,997.499],[-11.87412,0],[11.87412,0]],[[231,1018.999],[0,-11.87412],[0,11.87412]],[[209.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,1018.999],[0,11.87412],[0,-11.87412]],[[262.5,997.499],[-11.87412,0],[11.87412,0]],[[284,1018.999],[0,-11.87412],[0,11.87412]],[[262.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[135,1072.001],[0,11.87412],[0,-11.87412]],[[156.5,1050.501],[-11.87412,0],[11.87412,0]],[[178,1072.001],[0,-11.87412],[0,11.87412]],[[156.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,1072.001],[0,11.87412],[0,-11.87412]],[[209.5,1050.501],[-11.87412,0],[11.87412,0]],[[231,1072.001],[0,-11.87412],[0,11.87412]],[[209.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,1072.001],[0,11.87412],[0,-11.87412]],[[262.5,1050.501],[-11.87412,0],[11.87412,0]],[[284,1072.001],[0,-11.87412],[0,11.87412]],[[262.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}]]');
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="400" height="1500"></canvas>
</body>
</html>