mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Clean up clipping example.
This commit is contained in:
Jürg Lehni
parent
2263afea59
commit
041d88c89c
1 changed files with 43 additions and 49 deletions
|
|
@ -14,6 +14,7 @@
|
|||
<!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">
|
||||
<text transform="matrix(1 0 0 1 83.5002 68.5)" font-family="'Helvetica'" font-size="12">Clipping a path with a path:</text>
|
||||
<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
|
||||
|
|
@ -21,18 +22,16 @@
|
|||
<rect x="137" y="85" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
|
||||
</defs>
|
||||
<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>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="137" y="85" width="113" height="113"/>
|
||||
</defs>
|
||||
<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>
|
||||
</g>
|
||||
<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>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="none" stroke="#CECECE" stroke-miterlimit="10" d="M353,491.911c0,56.885-46.114,103-103,103
|
||||
|
|
@ -42,65 +41,60 @@
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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"/>
|
||||
<rect x="137" y="672.822" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
|
||||
</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>
|
||||
<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"/>
|
||||
</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>
|
||||
<!--
|
||||
<rect x="137" y="970" fill="none" stroke="#CECECE" stroke-miterlimit="10" width="113" height="113"/>
|
||||
-->
|
||||
<defs>
|
||||
<rect id="SVGID_7_" x="153" y="969.998" width="113" height="113.001"/>
|
||||
<rect id="SVGID_7_" x="153" y="970" width="113" height="113"/>
|
||||
</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"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="966" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="966" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="966" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1019" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1019" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1019" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="156.5" cy="1072" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="209.5" cy="1072" r="21.5"/>
|
||||
<circle fill="#00FF1E" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" cx="262.5" cy="1072" r="21.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
Loading…
Reference in a new issue