source: main/trunk/model-sites-dev/von-sparql/js/paper/examples/SVG Import/Clipping.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 5.4 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Clipping</title>
6 <script type="text/javascript" src="../../dist/paper.js"></script>
7 <script type="text/paperscript" canvas="canvas">
8 project.importSVG(document.getElementById('Layer_1'));
9 </script>
10</head>
11<body>
12<?xml version="1.0" encoding="utf-8"?>
13<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
14<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
15<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
16 width="400px" height="1500px" enable-background="new 0 0 500 1120.5" xml:space="preserve">
17<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
18<g>
19 <g>
20 <path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,198c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103
21 S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
22 <rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
23 </g>
24 <g>
25 <defs>
26 <rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
27 </defs>
28 <clipPath id="SVGID_2_">
29 <use xlink:href="#SVGID_1_" overflow="visible"/>
30 </clipPath>
31 <circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
32 </g>
33</g>
34<text transform="matrix(1 0 0 1 83.5002 355.5)" font-family="'Helvetica'" font-size="12">Clipping a compound path with a path:</text>
35<g>
36 <g>
37 <path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
38 c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z M250,409.512
39 c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
40 C332.4,446.403,295.509,409.512,250,409.512z"/>
41 <rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
42 </g>
43 <g>
44 <defs>
45 <rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
46 </defs>
47 <clipPath id="SVGID_4_">
48 <use xlink:href="#SVGID_3_" overflow="visible"/>
49 </clipPath>
50 <path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
51 c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103s46.115-103,103-103C306.886,388.911,353,435.026,353,491.911z
52 M250,409.512c-45.508,0-82.4,36.892-82.4,82.399s36.893,82.4,82.4,82.4c45.509,0,82.399-36.894,82.399-82.4
53 C332.4,446.403,295.509,409.512,250,409.512z"/>
54 </g>
55</g>
56<text transform="matrix(1 0 0 1 83.5002 650.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a compound path:</text>
57<g>
58 <g>
59 <path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
60 c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103C306.886,682.823,353,728.938,353,785.823z M250,703.423
61 c-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.399
62 C332.4,740.314,295.509,703.423,250,703.423z"/>
63 <rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
64 </g>
65 <g>
66 <defs>
67 <path id="SVGID_5_" d="M353,785.823c0,56.885-46.114,103-103,103c-56.885,0-103-46.115-103-103c0-56.886,46.115-103,103-103
68 C306.886,682.823,353,728.938,353,785.823z M250,703.423c-45.508,0-82.4,36.892-82.4,82.4c0,45.508,36.893,82.399,82.4,82.399
69 c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
70 </defs>
71 <clipPath id="SVGID_6_">
72 <use xlink:href="#SVGID_5_" overflow="visible"/>
73 </clipPath>
74 <rect x="137" y="672.822" clip-path="url(#SVGID_6_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" width="113" height="113"/>
75 </g>
76</g>
77<text transform="matrix(1 0 0 1 83.5002 941.5)" font-family="'Helvetica'" font-size="12">Clipping a group with a path:</text>
78<g>
79 <!--
80 <rect x="137" y="970" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
81 -->
82 <defs>
83 <rect id="SVGID_7_" x="153" y="970" width="113" height="113"/>
84 </defs>
85 <clipPath id="SVGID_8_">
86 <use xlink:href="#SVGID_7_" overflow="visible"/>
87 </clipPath>
88 <g clip-path="url(#SVGID_8_)">
89 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="966" r="21.5"/>
90 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="966" r="21.5"/>
91 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="966" r="21.5"/>
92 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1019" r="21.5"/>
93 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1019" r="21.5"/>
94 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1019" r="21.5"/>
95 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072" r="21.5"/>
96 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072" r="21.5"/>
97 <circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072" r="21.5"/>
98 </g>
99</g>
100</svg>
101 <canvas id="canvas" width="400px" height="1500px"></canvas>
102</body>
103</html>
Note: See TracBrowser for help on using the repository browser.