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

Fix SVG example sizes.

Browse source
This commit is contained in:
Jürg Lehni 2013-02-25 23:49:56 -08:00
parent 65a9795a8a
commit 21ee2edb60
13 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/SVG Import/Circle and Ellipse Testing.html
View file

@ -21,6 +21,6 @@
<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="ellipse5"/>
<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="ellipse6"/>
</svg>
<canvas id="canvas" width="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

4
examples/SVG Import/Gradients.html
View file

@ -10,7 +10,7 @@
</head>
<body>
<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="500" height="1000px" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
<stop offset="0" style="stop-color:#231F20"/>
<stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
@ -102,6 +102,6 @@
</radialGradient>
<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
</svg>
<canvas id="canvas" width="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="1000"></canvas>
</body>
</html>

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

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" 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" />
@ -19,6 +19,6 @@
<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="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
<g>
@ -37,6 +37,6 @@
<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>
</svg>
<canvas id="canvas" width="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" 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" />
@ -28,6 +28,6 @@
<text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
</g>
</svg>
<canvas id="canvas" width="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
<g>
@ -73,6 +73,6 @@
</g>
</svg>
<canvas id="canvas" width="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" 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" />
@ -19,6 +19,6 @@
<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="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

4
examples/SVG Import/Symbols.html
View file

@ -11,7 +11,7 @@
</head>
<body>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595px" height="841px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
width="595" height="841" xml:space="preserve">
<symbol id="circle" viewBox="-24 -24 48 48">
<path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
</symbol>
@ -20,6 +20,6 @@
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)" overflow="visible"/>
<use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)" overflow="visible"/>
</svg>
<canvas id="canvas" width="595px" height="841px"></canvas>
<canvas id="canvas" width="595" height="841"></canvas>
</body>
</html>

4
examples/SVG Import/Testing.html
View file

@ -10,7 +10,7 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g>
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10;stroke-dasharray: 10, 4;stroke-linecap: butt" id="line" />
<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
@ -35,6 +35,6 @@
<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>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

@ -10,10 +10,10 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" 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)" style="font:12px helvetica;">Rotated SVG Text</text>
</svg>
<canvas id="canvas" width="500" height="1000"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

4
examples/SVG Import/Tiger.html
View file

@ -14,7 +14,7 @@
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="800" width="600" id="svg">
height="600" width="600" id="svg">
<g transform="translate(200,200)">
<g style="fill: #ffffff; stroke:#000000; stroke-width:0.172">
<path d="M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z"/>
@ -738,6 +738,6 @@
</g>
</g>
</svg>
<canvas id="canvas" width="600px" height="800px"></canvas>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

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

@ -10,13 +10,13 @@
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="1000" id="svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)" >
<rect x="10" y="10" width="5" height="5" fill="firebrick" />
<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="500" height="1000px"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

2
examples/SVG Import/Viewbox.html
View file

@ -33,6 +33,6 @@
Stretch to fit
</text>
</svg>
<canvas id="canvas" width="1500px" height="1000px"></canvas>
<canvas id="canvas" width="1500px" height="1000"></canvas>
</body>
</html>