SVG Importer: Use importGroup to import defs.

This commit is contained in:
Jonathan Puckey 2012-11-07 17:21:02 +01:00
parent eb22e3bf95
commit c704d285f2
5 changed files with 151 additions and 115 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
examples/.DS_Store vendored Normal file

Binary file not shown.

View file

@ -5,97 +5,105 @@
<title>Clipping</title>
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('Layer_1'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:400px; height:1500px;" id="svg">
<g>
<g>
<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
S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<g>
<defs>
<clipPath id="SVGID_2_">
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
</clipPath>
</defs>
<circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
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
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
C332.4,446.403,295.509,409.512,250,409.512z"/>
<rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<g>
<defs>
<clipPath id="SVGID_4_">
<rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
</clipPath>
</defs>
<path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
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
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
C332.4,446.403,295.509,409.512,250,409.512z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
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
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
C332.4,740.314,295.509,703.423,250,703.423z"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113.001"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113.001"/>
</g>
<g>
<g>
<defs>
<clipPath id="SVGID_6_">
<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
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
c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
</clipPath>
</defs>
<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.001"/>
</g>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
<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>
<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>
<text transform="matrix(1 0 0 1 83.5002 941.5)" font-family="'Helvetica'" font-size="12">Clipping a group with a path:</text>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="400px" height="1500px" enable-background="new 0 0 500 1120.5" xml:space="preserve">
<g>
<g>
<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
S193.115,95,250,95C306.886,95,353,141.115,353,198z"/>
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<g>
<defs>
<clipPath id="SVGID_8_">
<rect id="SVGID_7_" x="153" y="969.998" width="113" height="113.001"/>
</clipPath>
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
</defs>
<g clip-path="url(#SVGID_8_)">
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072.001" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072.001" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072.001" r="21.5"/>
</g>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<circle clip-path="url(#SVGID_2_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="250" cy="198" r="103"/>
</g>
</svg>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
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
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
C332.4,446.403,295.509,409.512,250,409.512z"/>
<rect x="137" y="378.911" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
</g>
<g>
<g>
<defs>
<rect id="SVGID_3_" x="137" y="378.911" width="113" height="113"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" d="M353,491.911
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
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
C332.4,446.403,295.509,409.512,250,409.512z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,785.823c0,56.885-46.114,103-103,103
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
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
C332.4,740.314,295.509,703.423,250,703.423z"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113.001"/>
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113.001"/>
</g>
<g>
<g>
<defs>
<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
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
c45.509,0,82.399-36.893,82.399-82.399C332.4,740.314,295.509,703.423,250,703.423z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<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.001"/>
</g>
</g>
</g>
<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
<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>
<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>
<text transform="matrix(1 0 0 1 83.5002 941.5)" font-family="'Helvetica'" font-size="12">Clipping a group with a path:</text>
<g>
<defs>
<rect id="SVGID_7_" x="153" y="969.998" width="113" height="113.001"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="965.998" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1018.999" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072.001" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072.001" r="21.5"/>
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072.001" r="21.5"/>
</g>
</g>
</svg>
<canvas id="canvas" width="400px" height="1500px"></canvas>
</body>
</html>

View file

@ -11,31 +11,57 @@
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<g>
<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
<g>
<rect x="200" y="20" rx="20" ry="10" width="150px" height="150px" style="fill:green" id="round" />
<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
</g>
</g>
<g>
<rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="ellipse" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text" text-anchor="start">I love SVG</text>
<g style="fill: #000000">
<path d="M-73.8 -16.4C-73.8 -16.4 -73.4 -9.6 -71 -8C-68.6 -6.4 -69.8 -7.2 -73 -8.4C-76.2 -9.6 -75 -10.4 -75 -10.4C-75 -10.4 -77.8 -10 -75.4 -8C-73 -6 -69.4 -3.6 -71 -3.6C-72.6 -3.6 -80.2 -7.6 -80.2 -10.4C-80.2 -13.2 -81.2 -17.3 -81.2 -17.3C-81.2 -17.3 -80.1 -18.1 -75.3 -18C-75.3 -18 -73.9 -17.3 -73.8 -16.4z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M-74.6 2.2C-74.6 2.2 -83.12 -0.591 -101.6 2.8C-101.6 2.8 -92.569 0.722 -73.8 3C-63.5 4.25 -74.6 2.2 -74.6 2.2z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M-72.502 2.129C-72.502 2.129 -80.748 -1.389 -99.453 0.392C-99.453 0.392 -90.275 -0.897 -71.774 2.995C-61.62 5.131 -72.502 2.129 -72.502 2.129z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M-70.714 2.222C-70.714 2.222 -78.676 -1.899 -97.461 -1.514C-97.461 -1.514 -88.213 -2.118 -70.052 3.14C-60.086 6.025 -70.714 2.222 -70.714 2.222z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M-69.444 2.445C-69.444 2.445 -76.268 -1.862 -93.142 -2.96C-93.142 -2.96 -84.803 -2.79 -68.922 3.319C-60.206 6.672 -69.444 2.445 -69.444 2.445z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M45.84 12.961C45.84 12.961 44.91 13.605 45.124 12.424C45.339 11.243 73.547 -1.927 77.161 -1.677C77.161 -1.677 46.913 11.529 45.84 12.961z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M42.446 13.6C42.446 13.6 41.57 14.315 41.691 13.121C41.812 11.927 68.899 -3.418 72.521 -3.452C72.521 -3.452 43.404 12.089 42.446 13.6z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M39.16 14.975C39.16 14.975 38.332 15.747 38.374 14.547C38.416 13.348 58.233 -2.149 68.045 -4.023C68.045 -4.023 50.015 4.104 39.16 14.975z"/>
</g>
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.1">
<path d="M36.284 16.838C36.284 16.838 35.539 17.532 35.577 16.453C35.615 15.373 53.449 1.426 62.28 -0.26C62.28 -0.26 46.054 7.054 36.284 16.838z"/>
</g>
<g style="fill: #cccccc">
<path d="M4.6 164.801C4.6 164.801 -10.6 162.401 6.2 160.801C6.2 160.801 24.2 158.801 28.2 153.601C28.2 153.601 41.8 144.401 44.6 144.001C47.4 143.601 63.8 140.001 64.2 137.601C64.6 135.201 70.6 132.801 72.2 133.601C73.8 134.401 73.8 143.601 71 144.401C68.2 145.201 49.4 152.401 43 153.601C36.6 154.801 25 162.401 20.2 163.601C15.4 164.801 4.6 164.801 4.6 164.801z"/>
</g>
<g style="fill: #000000">
<path d="M77.6 127.401C77.6 127.401 74.6 129.001 73.4 131.601C73.4 131.601 67 142.201 52.8 145.401C52.8 145.401 29.8 154.401 22 156.401C22 156.401 8.6 161.401 1.2 160.601C1.2 160.601 -5.8 160.801 0.4 162.401C0.4 162.401 20.6 160.401 24 158.601C24 158.601 39.6 153.401 42.6 150.801C45.6 148.201 63.8 143.201 66 141.201C68.2 139.201 78 130.801 77.6 127.401z"/>
</g>
<g style="fill: #000000">
<path d="M18.882 158.911C18.882 158.911 24.111 158.685 22.958 160.234C21.805 161.784 19.357 160.91 19.357 160.91L18.882 158.911z"/>
</g>
<g style="fill: #000000">
<path d="M11.68 160.263C11.68 160.263 16.908 160.037 15.756 161.586C14.603 163.136 12.155 162.263 12.155 162.263L11.68 160.263z"/>
</g>
<g style="fill: #000000">
<path d="M1.251 161.511C1.251 161.511 6.48 161.284 5.327 162.834C4.174 164.383 1.726 163.51 1.726 163.51L1.251 161.511z"/>
</g>
<g style="fill: #000000">
<path d="M-6.383 162.055C-6.383 162.055 -1.154 161.829 -2.307 163.378C-3.46 164.928 -5.908 164.054 -5.908 164.054L-6.383 162.055z"/>
</g>
<g style="fill: #000000">
<path d="M35.415 151.513C35.415 151.513 42.375 151.212 40.84 153.274C39.306 155.336 36.047 154.174 36.047 154.174L35.415 151.513z"/>
</g>
<g style="fill: #000000">
<path d="M45.73 147.088C45.73 147.088 51.689 143.787 51.155 148.849C50.885 151.405 46.362 149.749 46.362 149.749L45.73 147.088z"/>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

View file

@ -61,6 +61,13 @@ new function() {
}
}
}
if (type == 'defs') {
// I don't think we need to add defs to the DOM. But we might want
// to use Symbols for them?
group.remove();
grourp = null;
}
return group;
}
@ -206,12 +213,7 @@ new function() {
},
// http://www.w3.org/TR/SVG/struct.html#DefsElement
defs: function(svg, type) {
var group = importGroup(svg, type);
group.remove();
// I don't think we need to add defs to the DOM. But we might want
// to use Symbols for them?
return null;
defs: importGroup,
},
// http://www.w3.org/TR/SVG/shapes.html#InterfaceSVGCircleElement