diff options
Diffstat (limited to 'doc/context/sources/general/manuals/svg/svg-lmtx-mozilla.lua')
| -rw-r--r-- | doc/context/sources/general/manuals/svg/svg-lmtx-mozilla.lua | 354 |
1 files changed, 354 insertions, 0 deletions
diff --git a/doc/context/sources/general/manuals/svg/svg-lmtx-mozilla.lua b/doc/context/sources/general/manuals/svg/svg-lmtx-mozilla.lua new file mode 100644 index 000000000..0797f6406 --- /dev/null +++ b/doc/context/sources/general/manuals/svg/svg-lmtx-mozilla.lua @@ -0,0 +1,354 @@ +return { + [[ + <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> + </svg> + ]], + [[ + <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> + </svg> + ]], + [[ + <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> + </svg> + ]], + [[ + <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> + </svg> + ]], + [[ + <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <circle cx="5" cy="5" r="3" stroke="green" /> + <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> + <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> + </svg> + ]], + [[ + <svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> + <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" + d="M1,9 l7 ,-3 l7 ,3 + m2,0 l3.5 ,-3 l3.5 ,3 + m2,0 l2 ,-3 l2 ,3 + m2,0 l0.75,-3 l0.75,3 + m2,0 l0.5 ,-3 l0.5 ,3" /> + <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" + d="M1,19 l7 ,-3 l7 ,3 + m2, 0 l3.5 ,-3 l3.5 ,3 + m2, 0 l2 ,-3 l2 ,3 + m2, 0 l0.75,-3 l0.75,3 + m2, 0 l0.5 ,-3 l0.5 ,3" /> + <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" + d="M1,29 l7 ,-3 l7 ,3 + m2, 0 l3.5 ,-3 l3.5 ,3 + m2, 0 l2 ,-3 l2 ,3 + m2, 0 l0.75,-3 l0.75,3 + m2, 0 l0.5 ,-3 l0.5 ,3" /> + <path stroke="pink" fill="none" stroke-width="0.05" + d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 + M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 + M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> + </svg> + ]], + [[ + <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> + </svg> + ]], + [[ + <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-dasharray="5,5" fill="none" stroke-width="1"/> + </svg> + ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 40,20 h 10 + m 0,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 50,50 h 10 + m-20,10 h 10 + m-20,10 h 10 + m-20,10 h 10" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" d="M 10,10 L 90,90 V 10 H 50" /> + <path fill="none" stroke="red" d="M 110,10 l 80,80 v -80 h -40" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path fill="none" stroke="red" d="M 10,90 C 30,90 25,10 50,10 S 70,90 90,90" /> + <path fill="none" stroke="red" d="M 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> + <g id="ControlPoints"> + <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> + <circle cx="30" cy="90" r="1.5"/> + <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> + <circle cx="25" cy="10" r="1.5"/> + <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> + <circle cx="75" cy="10" r="1.5" fill="lightgrey"/> + <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /> + <circle cx="70" cy="90" r="1.5"/> + <circle cx="10" cy="90" r="1.5"/> + <circle cx="50" cy="10" r="1.5"/> + <circle cx="90" cy="90" r="1.5"/> + </g> + <use xlink:href="#ControlPoints" x="100" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path fill="none" stroke="red" d="M 10,50 Q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" /> + <g> + <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> + <circle cx="25" cy="25" r="1.5" /> + <circle cx="10" cy="50" r="1.5"/> + <circle cx="40" cy="50" r="1.5"/> + <g id="SmoothQuadraticDown"> + <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> + <circle cx="70" cy="50" r="1.5" /> + </g> + <g id="SmoothQuadraticUp"> + <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> + <circle cx="100" cy="50" r="1.5" /> + </g> + <use xlink:href="#SmoothQuadraticDown" x="60" /> + <use xlink:href="#SmoothQuadraticUp" x="60" /> + <use xlink:href="#SmoothQuadraticDown" x="120" /> + </g> + </svg> + ]], + [[ + <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" d="M 6,10 A 6 4 10 1 0 14,10" /> + <path fill="none" stroke="lime" d="M 6,10 A 6 4 10 1 1 14,10" /> + <path fill="none" stroke="purple" d="M 6,10 A 6 4 10 0 1 14,10" /> + <path fill="none" stroke="pink" d="M 6,10 A 6 4 10 0 0 14,10" /> + </svg> + ]], + [[ + <svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> + <path stroke="red" d="M 5,1 l -4,8 8,0" /> + <path stroke="red" d="M 15,1 l -4,8 8,0 -4,-8" /> + <path stroke="red" d="M 25,1 l -4,8 8,0 z" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> + </svg> + ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <polygon points="0,100 50,25 50,75 100,0" /> + <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> + </svg> + ]], + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <polyline points="0,100 50,25 50,75 100,0" /> + <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> + </svg> + ]], + [[ + <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" /> + <rect x="120" width="100" height="100" rx="15" /> + </svg> + ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z" /> + </svg> + ]], + [[ + <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> + <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> + <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> + </svg> + ]], + [[ + <svg x="0" width="10" height="10" clip="auto"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> + ]], + [[ + <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> + <circle cx="5" cy="5" r="4" stroke="green" /> + </svg> + </svg> + ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="red"/> + <circle cx="50%" cy="50%" r="4" fill="yellow"/> + </svg> + ]], + [[ + <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="green"/> + <circle cx="50%" cy="50%" r="4" fill="yellow"/> + </svg> + ]], + [[ + <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> + <circle cx="50%" cy="50%" r="4" fill="yellow"/> + </svg> + ]], + [[ + <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="30" height="20" fill="green" /> + <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> + </svg> + ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <rect x="5" y="5" width="40" height="40" fill="green" /> + <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> + <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> + <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" /> + </svg> + ]], + [[ + <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" /> + <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" /> + <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" /> + <circle cx="0" cy="0" r="10" fill="black" /> + </svg> + ]], + [[ + <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" /> + <rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100,10,10)" /> + </svg> + ]], + [[ + <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" /> + </svg> + ]], + [[ + <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" /> + </svg> + ]], + [[ + <svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" /> + </defs> + <clipPath id="emptyStar"> + <use xlink:href="#star" clip-rule="evenodd" /> + </clipPath> + <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" /> + <clipPath id="filledStar"> + <use xlink:href="#star" clip-rule="nonzero" /> + </clipPath> + <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" /> + </svg> + ]], +-- [[ +-- <svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> +-- <style> +-- .small { font: italic 13px sans-serif; } +-- .heavy { font: bold 30px sans-serif; } +-- .Rrrrr { font: italic 40px serif; fill: red; } +-- </style> +-- <text x="20" y="35" class="small">My</text> +-- <text x="40" y="35" class="heavy">cat</text> +-- <text x="55" y="55" class="small">is</text> +-- <text x="65" y="55" class="Rrrrr">Grumpy!</text> +-- </svg> +-- ]], + [[ + <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> + <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> + <circle cx="5" cy="5" r="5" fill="red" /> + </marker> + </defs> + <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> + <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> + </svg> + ]], + -- from the attributes section + [[ + <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> + <stop offset="0%" style="stop-color:skyblue;" /> + <stop offset="100%" style="stop-color:seagreen;" /> + </linearGradient> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> + <circle cx="50" cy="50" r="40" fill="black" /> + <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> + </svg> + ]], + [[ + <svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="40" /> + <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> + <circle cx="250" cy="50" r="40" fill-opacity="50%" /> + <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> + </svg> + ]], + [[ + <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> + </svg> + ]], + [[ + <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> + </svg> + ]], +} |