scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -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

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

@ -25,7 +25,6 @@
<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>

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

@ -16,7 +16,6 @@
</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" />
@ -24,7 +23,6 @@
<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>

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

@ -41,7 +41,6 @@
<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>

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

@ -16,14 +16,10 @@
</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" />
<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" />
@ -31,13 +27,11 @@
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g fill="black" stroke="none"
text-anchor="middle">
<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>

1
examples/SVG Import/Testing.html
View file

@ -39,7 +39,6 @@
<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>

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

@ -17,9 +17,7 @@
<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>