paper.js/examples/SVG Export/Clipping.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:","fil
        document.body.appendChild(project.exportSVG());
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="1500"></canvas>
</body>
</html>
Include clipping example for SVG Export. 2013-06-11 18:00:18 -04:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<meta charset="UTF-8">`
			`<title>Clipping</title>`
Have IE9 display SVG inlined in SVG export examples. 2014-04-07 06:01:56 -04:00			`<!-- IE 9: display inline SVG -->`
			`<meta http-equiv="X-UA-Compatible" content="IE=9">`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<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:","fil
			`document.body.appendChild(project.exportSVG());`
			`</script>`
Include clipping example for SVG Export. 2013-06-11 18:00:18 -04:00			`</head>`
			`<body>`
Replace tabs with 4 white-spaces. 2014-08-16 13:24:54 -04:00			`<canvas id="canvas" width="400" height="1500"></canvas>`
Include clipping example for SVG Export. 2013-06-11 18:00:18 -04:00			`</body>`
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README. Closes #422. 2014-04-06 07:44:19 -04:00			`</html>`