Show More
Commit Description:
submission report
Commit Description:
submission report
References:
File last commit:
Show/Diff file:
Action:
node_modules/svg-to-pdfkit/examples/tests2.js
| 11 lines
| 9.3 KiB
| application/javascript
| JavascriptGenshiLexer
|
| r789 | var Tests2 = [ | |||
| {name: 'additional-test-01.svg', svg: '<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <rect x="5" y="5" width="470" height="350" fill="none" stroke="grey"/>\n <marker id="m" orient="auto" overflow="visible">\n <rect x="-1" y="-0.5" width="1" height="1" fill="green"/>\n </marker>\n <text x="30" y="80">Markers test: there must be 3 green squares and no red!</text>\n <path d="M100,130 C100,180 100,230 100,230" marker-end="url(#m)" stroke-width="100" stroke="red"/>\n <path d="M240,130 Q240,230 240,230" marker-end="url(#m)" stroke-width="100" stroke="red"/>\n <path d="M380,130 L380,230" marker-end="url(#m)" stroke-width="100" stroke="red"/>\n</svg>'}, | ||||
| {name: 'additional-test-02.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 480 360">\n <path id="Path" pathLength="200" d="M40,260 C40,100 60,220 200,100 A100 200 0 0 1 300,160 L 330,240 Q 400,360 500,40" stroke="green" fill="none"/>\n <rect x="2%" y="2%" width="96%" height="96%" fill="none" stroke="blue" stroke-width="2" stroke-dasharray="5 2 2 2 5 5"/>\n <text x="20" y="50" font-size="20" fill="blue">Test of textLength, pathLength and startOffset</text>\n <text font-size="30" dominant-baseline="middle">\n <textPath xlink:href="#Path" fill="red" text-anchor="middle" startOffset="37.5%" textLength="150" lengthAdjust="spacingAndGlyphs">There must be no red or orange</textPath>\n </text>\n <text font-size="30" dominant-baseline="middle">\n <textPath xlink:href="#Path" fill="orange" text-anchor="end" startOffset="75%" textLength="150" lengthAdjust="spacingAndGlyphs">There must be no red or orange</textPath>\n </text>\n <text font-size="30" dominant-baseline="middle">\n <textPath xlink:href="#Path" fill="darkorange" text-anchor="end" startOffset="150" textLength="150" lengthAdjust="spacingAndGlyphs">There must be no red or orange</textPath>\n </text>\n <text font-size="30" dominant-baseline="middle">\n <textPath xlink:href="#Path" fill="green" text-anchor="start" startOffset="0%" textLength="150" lengthAdjust="spacingAndGlyphs">There must be no red or orange</textPath>\n </text>\n</svg>'}, | ||||
| {name: 'additional-test-03.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 480 360">\n <text x="40" y="60" font-size="20">Dashed path with \'pathLength\' attribute</text>\n <path pathLength="50" stroke-dasharray="40" fill="none" stroke="black" stroke-width="5" d="m 40,100 200,200 -100,-155 0,100 z"/>\n <path stroke-dasharray="40" fill="none" stroke="black" stroke-width="5" d="m 240,100 200,200 -100,-155 0,100 z"/>\n <rect x="5" y="5" width="470" height="350" fill="none" stroke="black"/>\n</svg>'}, | ||||
| {name: 'additional-test-04.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360" width="100%" height="100%">\n <rect x="5" y="5" width="470" height="350" stroke="green" fill="none"/>\n <text x="40" y="40" font-size="20">Test of shape direction</text>\n <g stroke="red" fill="none" stroke-width="5" stroke-dasharray="5 5 10 5 15 5 25 5 40 5 65 5 105 5 170 1000">\n <circle cx="120" cy="140" r="80"/>\n <ellipse cx="340" cy="140" rx="100" ry="60"/>\n <rect x="150" y="230" width="180" height="100" rx="40" ry="20"/>\n </g>\n <g fill="green">\n <path d="M195,140 L190,155 L185,140"/>\n <path d="M435,140 L430,155 L425,140"/>\n <path d="M190,235 L205,240 L190,245"/>\n </g>\n</svg>'}, | ||||
| {name: 'additional-test-05.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="480" height="360" viewBox="0 0 480 360">\n <defs>\n <clipPath id="clip-0">\n <rect x="0" y="0" width="480" height="180"/>\n </clipPath>\n <clipPath id="clip-1">\n <rect x="0" y="180" width="480" height="180"/>\n </clipPath>\n <clipPath id="rounded-corners">\n <rect x="50" y="50" width="380" height="260" rx="50"/>\n </clipPath>\n </defs>\n <g clip-path="url(#rounded-corners)">\n <g clip-path="url(#clip-0)">\n <rect fill="green" x="0" y="0" width="480" height="360"></rect>\n </g>\n <g clip-path="url(#clip-1)">\n <rect fill="red" x="0" y="0" width="480" height="360"></rect>\n </g>\n <text x="240" y="193" text-anchor="middle" font-size="40">================= Clip-path test =================</text>\n </g>\n <rect x="50" y="50" width="380" height="260" rx="50" fill="none" stroke="black" stroke-width="4"/>\n</svg>'}, | ||||
| {name: 'additional-test-06.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" width="480" height="360">\n <g font-size="30">\n <g transform="translate(0,80)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="middle">Middle</text>\n <text x="20" alignment-baseline="middle">Middle</text>\n </g>\n <g transform="translate(0,160)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="text-after-edge">After edge</text>\n <text x="20" alignment-baseline="middle" dominant-baseline="hanging">\n <tspan alignment-baseline="text-after-edge" dominant-baseline="text-before-edge">After edge</tspan>\n </text>\n </g>\n <g transform="translate(0,240)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="text-before-edge">Before edge</text>\n <text x="20" alignment-baseline="middle" dominant-baseline="hanging">\n <tspan dominant-baseline="text-before-edge">Before edge</tspan>\n </text>\n </g>\n <g transform="translate(0,320)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="middle">Middle</text>\n <text x="20" alignment-baseline="text-after-edge" dominant-baseline="hanging">\n <tspan alignment-baseline="middle">Middle</tspan>\n </text>\n </g>\n <g transform="translate(240,80)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="hanging">Hanging</text>\n <text x="20" alignment-baseline="middle" dominant-baseline="hanging">\n <tspan>Hanging</tspan>\n </text>\n </g>\n <g transform="translate(240,160)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="baseline">Baseline</text>\n <text x="20" alignment-baseline="middle">\n <tspan>Baseline</tspan>\n </text>\n </g>\n <g transform="translate(240,240)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="mathematical">Mathematical</text>\n <text x="20" dominant-baseline="mathematical">\n <tspan>Mathematical</tspan>\n </text>\n </g>\n <g transform="translate(240,320)">\n <line x1="0" x2="50%" y1="0" y2="0" stroke="green"/>\n <text x="20" fill="red" dominant-baseline="hanging">Hanging</text>\n <text x="20" alignment-baseline="hanging" dominant-baseline="text-before-edge">\n <tspan alignment-baseline="inherit">Hanging</tspan>\n </text>\n </g>\n </g>\n</svg>'}, | ||||
| {name: 'additional-test-07.svg', svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <svg viewBox="0 0 200 100" preserveAspectRatio="none" >\n <rect height="100%" width="100%" fill="yellow"/>\n <path id="cloud" fill="grey" d="M10,25 C10,20 35,15 35,20 C35,10 55,10 55,15 C60,13 65,20 65,25 C65,30 45,40 45,35 C45,50 25,40 25,35 C20,40 10,35 10,25 Z"/>\n <use xlink:href="#cloud" transform="scale(-1,1.1) translate(-140, -10)"/>\n <use xlink:href="#cloud" transform="scale(1.1,0.9) translate(115, 10)"/>\n <ellipse cx="50%" cy="120%" rx="50%" ry="100%" fill="red" />\n </svg>\n <svg viewBox="0 0 100 100" x="50%" width="200" y="50%" height="200" >\n <rect fill="blue" width="200" height="200" stroke="red" stroke-width="1"/>\n </svg>\n</svg>\n'}, | ||||
| {name: 'additional-test-08.svg', svg: '<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <clipPath id="clip" clipPathUnits="objectBoundingBox">\n <rect width="1" height="1"/>\n </clipPath>\n <rect x="30" y="30" width="300" height="300" fill="red"/>\n <g clip-path="url(#clip)">\n <rect transform="translate(30, 30) scale(0.5, 0.5)" fill="green" width="600" height="600"/>\n </g>\n</svg>'}, | ||||
| {name: 'additional-test-09.svg', svg: '<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">\n <g font-size="20">\n <text x="240" y="80" text-anchor="middle">\n <a href="https://www.youtube.com" text-decoration="underline">Link inside text</a>\n </text>\n <a href="https://www.google.com/">\n <text x="240" y="130" text-anchor="middle" text-decoration="underline">Link around text</text>\n </a>\n <text x="240" y="180" text-anchor="middle">\n A <tspan><a href="http://www.speedtest.net/" text-decoration="underline">link inside tspan</a> for testing</tspan>\n </text>\n <text x="240" y="230" text-anchor="middle">\n A <a href="https://www.wikipedia.org/"><tspan text-decoration="underline">link around tspan</tspan></a> for testing\n </text>\n <a href="https://www.npmjs.com/package/svg-to-pdfkit">\n <rect x="25%" y="250" width="50%" height="70" rx="30" fill="yellow"/>\n </a>\n </g>\n</svg>'} | ||||
| ]; | ||||