scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup SVG Markup.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-02 17:44:57 -07:00
parent 1ce332756e
commit bfcc4d52b5
9 changed files with 72 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
examples/SVG Import/Circle and Oval Testing.html
View file

@ -16,16 +16,15 @@
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="oval1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="oval2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="oval3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="oval4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="oval5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="oval6"/>
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="oval1"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="oval2"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="oval3"/>
<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="oval4"/>
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="oval5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="oval6"/>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

16
examples/SVG Import/Line Testing.html
View file

@ -16,15 +16,13 @@
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

37
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -18,30 +18,29 @@
<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>
<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="oval" />
</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">I love SVG</text>
<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">I love SVG</text>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

38
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -16,28 +16,22 @@
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red"
stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0"
stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none"
text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3px" fill="none" />
<path id="lineBC" d="M 175 200 l 150 0" stroke="red" stroke-width="3px" fill="none" />
<path id="quadcurveABC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5px" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none" text-anchor="middle">
<text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
<text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

1
examples/SVG Import/Nested Groups Test.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html>
<html>
<head>

14
examples/SVG Import/Rect Testing.html
View file

@ -16,13 +16,13 @@
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" />
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-widthpx:5" id="rect1" />
<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" />
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-widthpx:5" id="rect1" />
<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

29
examples/SVG Import/Testing.html
View file

@ -25,21 +25,20 @@
<rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="oval" />
</g>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" 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="4" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" 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="4" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>

4
examples/SVG Import/Text Testing.html
View file

@ -14,12 +14,10 @@
SvgImporter.importSvg(document.getElementById('svg'));
</script>
</head>
<body>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">Plain SVG Text</text>
<text x="20" y="50" fill="red" transform="rotate(30 20,40)">Rotated SVG Text</text>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>

1
examples/SVG Import/Transform Testing.html
View file

@ -21,7 +21,6 @@
<circle r="10" fill="seagreen" stroke="blue"/>
<rect x="5" y="5" width="12" height="2" fill="gray" stroke="silver"/>
</g>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>