| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- Draws <text> elements using SVG fonts with glyphs --> |
| <!-- using the d attribute. Tests glyph layout by --> |
| <!-- comparing equivalent SVG for the <text> element, both --> |
| <!-- on a grid and as a mask. --> |
| <!-- Kerning is also tested. --> |
| <!-- --> |
| <!-- @author dean.jackson@cmis.csiro.au --> |
| <!-- @version $Id$ --> |
| <!-- ========================================================================= --> |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="450" height="500" viewBox="0 0 450 500"> |
| <title>SVGFont - children SVG test</title> |
| |
| <g id="content"> |
| |
| <text class="title" x="50%" y="50">SVG fonts - glyphs SVG children</text> |
| |
| <defs> |
| |
| <pattern id="gridPattern" viewBox="-5 -5 10 10" x="-5" y="-5" width="10" height="10" |
| patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse"> |
| <g stroke="rgb(225, 225, 245)" stroke-width="1"> |
| <line x1="0" y1="-6" x2="0" y2="6" /> |
| <line x1="-6" y1="0" x2="6" y2="0" /> |
| </g> |
| </pattern> |
| |
| <!-- ============================= --> |
| <!-- SVG Font Definition --> |
| <!-- ============================= --> |
| |
| <!-- This is an encoding of Microsoft's Comic Sans font --> |
| <!-- in SVG format (as allowed in the license). For the --> |
| <!-- true type version of this font, refer to --> |
| <!-- http://www.microsoft.com/truetype --> |
| <!-- Converted using SteadyState's TrueType/SVG font --> |
| <!-- toolkit (http://www.steadystate.com/svg --> |
| <!-- Horizontal Kerning has been added to the font for --> |
| <!-- testing purposes. --> |
| |
| <font horiz-adv-x="959"> |
| <font-face |
| font-family="SVGComic" |
| units-per-em="2048" |
| panose-1="3 15 7 2 3 3 2 2 2 4" |
| ascent="2257" |
| descent="597" |
| /> |
| <missing-glyph horiz-adv-x="1024"> <path fill="black" stroke="none" d="M128 0V1638H896V0H128zM256 128H768V1510H256V128z"/> </missing-glyph> |
| <!-- "a" glyph --> |
| <glyph unicode="a" glyph-name="a" horiz-adv-x="1048"> <path fill="black" stroke="none" d="M920 -66Q901 -66 851 -22Q806 19 784 51Q688 -1 615 -27T493 -54Q259 -54 152 78Q51 202 51 458Q51 700 217 872T615 1044Q702 1044 810 999Q946 943 946 864Q946 837 926 816Q916 778 911 691T904 468Q903 |
| 344 921 272Q931 228 984 96Q991 78 1007 43L1013 26Q1013 -14 985 -40T920 -66zM712 629Q712 672 717 722T734 830Q697 849 671 858T628 867Q473 867 361 741T248 449Q248 285 306 203T480 121Q576 121 643 156Q679 175 744 232Q712 497 712 629z"/> </glyph> |
| |
| <!-- "b" glyph --> |
| <glyph unicode="b" glyph-name="b" horiz-adv-x="1215"> <path fill="black" stroke="none" d="M606 -42Q453 -42 328 18Q296 -30 250 -30Q212 -30 186 -4T159 63Q159 89 161 140T164 217Q164 323 159 534T153 852Q153 925 154 1128T155 1406Q155 1466 180 1514Q213 1575 271 1575Q346 1575 346 1488Q346 |
| 1474 341 1447T336 1406L333 1187L331 932Q418 991 496 1020T644 1050Q859 1050 993 885Q1119 730 1119 504Q1119 276 972 117T606 -42zM644 861Q562 861 476 815Q434 792 332 716L330 543L331 387L332 223Q380 201 467 167Q529 148 606 148Q751 148 844 250T937 |
| 504Q937 653 862 753Q781 861 644 861z"/> </glyph> |
| |
| <!-- "c" glyph --> |
| <glyph unicode="c" glyph-name="c" horiz-adv-x="1052"> <path fill="black" stroke="none" d="M591 -63Q386 -63 249 61Q105 191 105 404Q105 607 240 823Q390 1063 578 1063Q676 1063 797 1017Q950 958 950 873Q950 835 925 806T863 776Q834 776 813 793T771 828Q712 875 578 875Q476 875 376 693Q285 |
| 526 285 404Q285 272 375 196Q459 125 591 125Q651 125 719 157L835 219Q865 235 878 235Q915 235 942 206T969 138Q969 65 815 -3Q680 -63 591 -63z"/> </glyph> |
| |
| <!-- "d" glyph --> |
| <glyph unicode="d" glyph-name="d" horiz-adv-x="1203"> <path fill="black" stroke="none" d="M1060 883Q1048 736 1048 589Q1048 256 1079 86Q1081 72 1081 63Q1081 23 1053 -3T988 -29Q926 -29 897 61Q825 8 748 -19T586 -46Q379 -46 243 92Q103 233 103 454Q103 721 244 882T612 1043Q728 1043 |
| 791 1007L885 938Q899 1359 918 1505Q931 1594 1009 1594Q1100 1594 1100 1497Q1100 1358 1060 883zM616 857Q448 857 364 758T280 458Q280 329 371 236T586 143Q670 143 728 174Q762 192 839 257Q854 270 868 288L865 461L866 577L868 695Q830 776 767 816T616 |
| 857z"/> </glyph> |
| |
| <!-- "e" glyph --> |
| <glyph unicode="e" glyph-name="e" horiz-adv-x="1122"> <path fill="black" stroke="none" d="M606 -46Q380 -46 240 67Q87 192 87 417Q87 677 213 853Q350 1045 579 1045Q745 1045 850 989Q979 920 979 777Q979 677 866 595Q816 559 654 483L272 302Q328 219 411 177T606 135Q675 135 768 161Q886 |
| 194 920 247T993 301Q1028 301 1055 275T1083 213Q1083 102 904 22Q751 -46 606 -46zM579 865Q457 865 376 771T255 486L562 632Q743 720 820 785Q734 865 579 865z"/> </glyph> |
| |
| <!-- "f" glyph --> |
| <glyph unicode="f" glyph-name="f" horiz-adv-x="1041"> <path fill="black" stroke="none" d="M811 1406Q569 1406 540 1070L537 1008Q707 1020 757 1020Q916 1020 916 920Q916 847 838 833Q804 827 759 828T528 815L520 587Q520 525 524 401T528 216Q528 26 506 -80Q489 -160 413 -160Q372 -160 |
| 343 -134T314 -67Q314 -59 316 -47Q337 83 337 236L334 509V799Q209 789 176 789Q75 789 75 886Q75 985 250 990L346 993Q349 1049 361 1145Q387 1367 473 1472Q577 1599 798 1599Q941 1599 941 1502Q941 1406 811 1406z"/> </glyph> |
| |
| <!-- "g" glyph --> |
| <glyph unicode="g" glyph-name="g" horiz-adv-x="1087"> <path fill="black" stroke="none" d="M962 431L939 95Q933 -105 898 -232Q853 -394 754 -471Q634 -564 407 -564Q274 -564 184 -546Q58 -521 58 -442Q58 -353 145 -353Q181 -353 265 -370T451 -386Q643 -383 716 -200Q764 -78 767 175Q713 |
| 75 639 25T468 -25Q287 -25 174 98T60 419Q60 689 215 854Q375 1024 651 1024Q744 1024 807 1000T903 928Q1010 925 1010 809Q1010 738 989 619Q966 481 962 431zM641 864Q451 864 347 733Q254 615 254 433Q254 288 309 215T474 142Q575 142 670 256Q756 361 768 |
| 464Q789 572 813 803Q773 834 730 849T641 864z"/> </glyph> |
| |
| <!-- "u" glyph --> |
| <glyph unicode="u" glyph-name="u" horiz-adv-x="1065"> <path fill="black" stroke="none" d="M955 584Q955 512 956 368T957 152Q957 130 960 85T964 18Q964 -25 935 -52T864 -80Q787 -80 766 15Q641 -50 478 -50Q347 -50 261 8Q166 72 148 195Q109 460 109 667Q109 804 139 979Q153 1066 234 1066Q277 |
| 1066 306 1039T335 968Q335 922 321 821T306 667Q306 500 317 381T350 190Q383 172 415 163T478 153Q612 153 761 196L760 399L758 593Q758 809 777 968Q788 1060 874 1060Q917 1060 946 1032T973 962L955 584z"/> </glyph> |
| |
| <!-- "v" glyph --> |
| <glyph unicode="v" glyph-name="v" horiz-adv-x="996"> <path fill="black" stroke="none" d="M600 52Q597 -40 509 -40Q436 -40 403 46L250 452L72 911Q62 937 62 957Q62 998 93 1027T165 1056Q225 1056 251 995L505 296Q580 456 694 760Q721 840 779 986Q810 1050 867 1050Q908 1050 939 1021T970 |
| 952Q970 914 805 524L600 52z"/> </glyph> |
| |
| <!-- "w" glyph --> |
| <glyph unicode="w" glyph-name="w" horiz-adv-x="1401"> <path fill="black" stroke="none" d="M1336 895Q1258 569 1132 158Q1104 67 1039 -29Q1004 -82 944 -81Q835 -79 774 190Q754 276 733 424L700 647L618 456L466 43Q453 5 428 -15Q398 -73 332 -75Q256 -78 185 223Q149 378 113 643L89 793Q76 |
| 883 76 944Q76 986 105 1013T177 1041Q253 1041 271 958Q284 899 292 812L307 665L366 216Q477 524 596 926Q629 1037 711 1037Q790 1037 818 913Q844 796 883 553Q923 301 954 160L1027 432L1156 977Q1171 1038 1242 1038Q1284 1038 1315 1010T1346 941Q1346 936 |
| 1336 895z"/> </glyph> |
| |
| <!-- "x" glyph --> |
| <glyph unicode="x" glyph-name="x" horiz-adv-x="1209"> <path fill="black" stroke="none" d="M1058 858L912 721L734 544L1060 118Q1085 86 1085 55Q1085 16 1055 -14T987 -44Q949 -44 918 -7Q826 100 594 405L399 204Q340 151 227 39Q195 3 158 3Q120 3 91 33T61 102Q61 133 86 165Q114 202 173 |
| 254Q242 315 264 338L477 561L346 750Q267 863 208 915Q170 949 170 989Q170 1029 198 1060T264 1091Q323 1091 442 937L615 698L811 878Q933 993 976 1058Q1008 1105 1052 1105Q1091 1105 1121 1076T1151 1009Q1151 954 1058 858z"/> </glyph> |
| |
| <!-- "y" glyph --> |
| <glyph unicode="y" glyph-name="y" horiz-adv-x="1066"> <path fill="black" stroke="none" d="M1011 892L665 144Q537 -129 469 -313L403 -507Q377 -579 313 -579Q271 -579 241 -552T210 -483Q210 -383 426 96L68 785L23 858Q-4 904 -4 935Q-4 976 27 1007T98 1038Q144 1038 169 1003Q339 767 534 |
| 331L682 676Q762 855 836 984Q868 1040 920 1040Q961 1040 992 1011T1024 942Q1024 920 1011 892z"/> </glyph> |
| |
| <!-- "z" glyph --> |
| <glyph unicode="z" glyph-name="z" horiz-adv-x="1102"> <path fill="black" stroke="none" d="M964 809Q875 702 736 499Q575 263 500 165Q605 170 683 170Q722 170 799 155T915 140Q959 140 986 112T1014 39Q1014 -6 987 -34T915 -62Q876 -62 799 -47T683 -32Q458 -32 256 -73Q235 -77 219 -77Q122 |
| -77 122 8Q122 58 172 104Q433 340 740 839Q607 831 547 831Q399 831 243 854Q154 867 154 953Q154 997 181 1026T249 1056Q298 1056 397 1045T547 1033Q615 1033 751 1042T955 1052Q1040 1052 1040 982Q1040 901 964 809z"/> </glyph> |
| |
| <hkern g1="u" g2="v" k="-100"/> |
| <hkern g1="v" g2="w" k="-200"/> |
| <hkern g1="w" g2="x" k="100"/> |
| <hkern g1="x" g2="y" k="200"/> |
| <hkern g1="y" g2="z" k="-500"/> |
| |
| </font> |
| |
| <!-- Equivalent SVG to use in the text elements --> |
| |
| <g id="abcdefg"> |
| |
| <!-- Step 1: flip y axis --> |
| |
| <g transform="scale(1, -1)"> |
| |
| <!-- Step 2: scale into glyph coordinates --> |
| <!-- font-size / units-per-em == 50 / 2048 == 0.0244140625 --> |
| |
| <g transform="scale(0.0244140625)"> |
| |
| <!-- "a" glyph --> |
| |
| <path |
| d="M920 -66Q901 -66 851 -22Q806 19 784 51Q688 -1 615 -27T493 -54Q259 |
| -54 152 78Q51 202 51 458Q51 700 217 872T615 1044Q702 1044 810 999Q946 |
| 943 946 864Q946 837 926 816Q916 778 911 691T904 468Q903 |
| 344 921 272Q931 228 984 96Q991 78 1007 43L1013 26Q1013 -14 985 |
| -40T920 -66zM712 629Q712 672 717 722T734 830Q697 849 671 858T628 |
| 867Q473 867 361 741T248 449Q248 285 306 203T480 121Q576 121 643 |
| 156Q679 175 744 232Q712 497 712 629z"/> |
| |
| <!-- "b" glyph with advance from a == 1048 --> |
| |
| <path transform="translate(1048, 0)" |
| d="M606 -42Q453 -42 328 18Q296 -30 250 -30Q212 -30 186 -4T159 63Q159 |
| 89 161 140T164 217Q164 323 159 534T153 852Q153 925 154 1128T155 |
| 1406Q155 1466 180 1514Q213 1575 271 1575Q346 1575 346 1488Q346 |
| 1474 341 1447T336 1406L333 1187L331 932Q418 991 496 1020T644 |
| 1050Q859 1050 993 885Q1119 |
| 730 1119 504Q1119 276 972 117T606 -42zM644 861Q562 861 476 815Q434 |
| 792 332 716L330 543L331 387L332 223Q380 201 467 167Q529 148 606 |
| 148Q751 148 844 250T937 504Q937 653 862 753Q781 861 644 861z"/> |
| |
| <!-- "c" glyph with advance from ab == 1048 + 1215 = 2263 --> |
| |
| <path transform="translate(2263, 0)" |
| d="M591 -63Q386 -63 249 61Q105 191 105 404Q105 607 240 823Q390 |
| 1063 578 1063Q676 1063 797 1017Q950 958 950 873Q950 835 925 |
| 806T863 776Q834 776 813 793T771 828Q712 875 578 875Q476 875 |
| 376 693Q285 526 285 404Q285 272 375 196Q459 125 591 125Q651 |
| 125 719 157L835 219Q865 235 878 235Q915 235 942 206T969 138Q969 |
| 65 815 -3Q680 -63 591 -63z"/> |
| |
| <!-- "d" glyph with advance from abc == 2263 + 1052 = 3315 --> |
| |
| <path transform="translate(3315, 0)" |
| d="M1060 883Q1048 736 1048 589Q1048 256 1079 86Q1081 72 1081 |
| 63Q1081 23 1053 -3T988 -29Q926 -29 897 61Q825 8 748 -19T586 |
| -46Q379 -46 243 92Q103 233 103 454Q103 721 244 882T612 |
| 1043Q728 1043 791 1007L885 938Q899 1359 918 1505Q931 |
| 1594 1009 1594Q1100 1594 1100 1497Q1100 1358 1060 |
| 883zM616 857Q448 857 364 758T280 458Q280 329 371 |
| 236T586 143Q670 143 728 174Q762 192 839 257Q854 270 |
| 868 288L865 461L866 577L868 695Q830 776 767 816T616 857z"/> |
| |
| <!-- "e" glyph with advance from abcd == 3315 + 1203 = 4518 --> |
| |
| <path transform="translate(4518, 0)" |
| d="M606 -46Q380 -46 240 67Q87 192 87 417Q87 677 213 853Q350 |
| 1045 579 1045Q745 1045 850 989Q979 920 979 777Q979 677 866 |
| 595Q816 559 654 483L272 302Q328 219 411 177T606 135Q675 |
| 135 768 161Q886 194 920 247T993 301Q1028 301 1055 275T1083 |
| 213Q1083 102 904 22Q751 -46 606 -46zM579 865Q457 865 376 |
| 771T255 486L562 632Q743 720 820 785Q734 865 579 865z"/> |
| |
| <!-- "f" glyph with advance from abcde == 4518 + 1122 = 5640 --> |
| |
| <path transform="translate(5640, 0)" |
| d="M811 1406Q569 1406 540 1070L537 1008Q707 1020 757 |
| 1020Q916 1020 916 920Q916 847 838 833Q804 827 759 |
| 828T528 815L520 587Q520 525 524 401T528 216Q528 26 |
| 506 -80Q489 -160 413 -160Q372 -160 343 -134T314 -67Q314 |
| -59 316 -47Q337 83 337 236L334 509V799Q209 789 176 789Q75 |
| 789 75 886Q75 985 250 990L346 993Q349 1049 361 1145Q387 |
| 1367 473 1472Q577 1599 798 1599Q941 1599 941 1502Q941 |
| 1406 811 1406z"/> |
| |
| <!-- "g" glyph with advance from abcdef == 5640 + 1041 = 6681 --> |
| |
| <path transform="translate(6681, 0)" |
| d="M962 431L939 95Q933 -105 898 -232Q853 -394 754 -471Q634 |
| -564 407 -564Q274 -564 184 -546Q58 -521 58 -442Q58 -353 145 |
| -353Q181 -353 265 -370T451 -386Q643 -383 716 -200Q764 -78 |
| 767 175Q713 75 639 25T468 -25Q287 -25 174 98T60 419Q60 689 |
| 215 854Q375 1024 651 1024Q744 1024 807 1000T903 928Q1010 925 |
| 1010 809Q1010 738 989 619Q966 481 962 431zM641 864Q451 864 |
| 347 733Q254 615 254 433Q254 288 309 215T474 142Q575 142 670 |
| 256Q756 361 768 464Q789 572 813 803Q773 834 730 849T641 864z"/> |
| |
| <!-- missing glyph with advance from abcdefg == 6681 + 1087 = 7768 --> |
| |
| <path transform="translate(7768, 0)" |
| d="M128 0V1638H896V0H128zM256 128H768V1510H256V128z"/> |
| |
| </g> |
| |
| </g> |
| |
| </g> |
| |
| <g id="uvwxyz"> |
| |
| <!-- Step 1: flip y axis --> |
| |
| <g transform="scale(1, -1)"> |
| |
| <!-- Step 2: scale into glyph coordinates --> |
| <!-- font-size / units-per-em == 50 / 2048 == 0.0244140625 --> |
| |
| <g transform="scale(0.0244140625)"> |
| |
| <!-- "u" glyph --> |
| |
| <path |
| d="M955 584Q955 512 956 368T957 152Q957 130 960 85T964 18Q964 |
| -25 935 -52T864 -80Q787 -80 766 15Q641 -50 478 -50Q347 -50 261 |
| 8Q166 72 148 195Q109 460 109 667Q109 804 139 979Q153 1066 234 |
| 1066Q277 1066 306 1039T335 968Q335 922 321 821T306 667Q306 500 |
| 317 381T350 190Q383 172 415 163T478 153Q612 153 761 196L760 |
| 399L758 593Q758 809 777 968Q788 1060 874 1060Q917 1060 946 |
| 1032T973 962L955 584z"/> |
| |
| <!-- "v" glyph with advance/kerning from u == 1065 + 100 = 1165 --> |
| |
| <path transform="translate(1165,0)" |
| d="M600 52Q597 -40 509 -40Q436 -40 403 46L250 452L72 911Q62 937 |
| 62 957Q62 998 93 1027T165 1056Q225 1056 251 995L505 296Q580 456 |
| 694 760Q721 840 779 986Q810 1050 867 1050Q908 1050 939 1021T970 |
| 952Q970 914 805 524L600 52z"/> |
| |
| <!-- "w" glyph with advance/kerning from uv == 1165 + 996 + 200 = 2361 --> |
| |
| <path transform="translate(2361,0)" |
| d="M1336 895Q1258 569 1132 158Q1104 67 1039 -29Q1004 -82 944 |
| -81Q835 -79 774 190Q754 276 733 424L700 647L618 456L466 43Q453 5 |
| 428 -15Q398 -73 332 -75Q256 -78 185 223Q149 378 113 643L89 793Q76 |
| 883 76 944Q76 986 105 1013T177 1041Q253 1041 271 958Q284 899 292 |
| 812L307 665L366 216Q477 524 596 926Q629 1037 711 1037Q790 1037 |
| 818 913Q844 796 883 553Q923 301 954 160L1027 432L1156 977Q1171 |
| 1038 1242 1038Q1284 1038 1315 1010T1346 941Q1346 936 |
| 1336 895z"/> |
| |
| <!-- "x" glyph with advance/kerning from uvw == 2361 + 1401 - 100 = 3662 --> |
| |
| <path transform="translate(3662,0)" |
| d="M1058 858L912 721L734 544L1060 118Q1085 86 1085 55Q1085 16 |
| 1055 -14T987 -44Q949 -44 918 -7Q826 100 594 405L399 204Q340 151 |
| 227 39Q195 3 158 3Q120 3 91 33T61 102Q61 133 86 165Q114 202 173 |
| 254Q242 315 264 338L477 561L346 750Q267 863 208 915Q170 949 170 |
| 989Q170 1029 198 1060T264 1091Q323 1091 442 937L615 698L811 |
| 878Q933 993 976 1058Q1008 1105 1052 1105Q1091 1105 1121 1076T1151 |
| 1009Q1151 954 1058 858z"/> |
| |
| <!-- "y" glyph with advance/kerning from uvwx == 3662 + 1209 - 200 = 4671 --> |
| |
| <path transform="translate(4671,0)" |
| d="M1011 892L665 144Q537 -129 469 -313L403 -507Q377 -579 313 |
| -579Q271 -579 241 -552T210 -483Q210 -383 426 96L68 785L23 858Q-4 |
| 904 -4 935Q-4 976 27 1007T98 1038Q144 1038 169 1003Q339 767 534 |
| 331L682 676Q762 855 836 984Q868 1040 920 1040Q961 1040 992 |
| 1011T1024 942Q1024 920 1011 892z"/> |
| |
| <!-- "z" glyph with advance/kerning from uvwxy == 4671 + 1066 + 500 = 6237 --> |
| |
| <path transform="translate(6237,0)" |
| d="M964 809Q875 702 736 499Q575 263 500 165Q605 170 683 |
| 170Q722 170 799 155T915 140Q959 140 986 112T1014 39Q1014 -6 |
| 987 -34T915 -62Q876 -62 799 -47T683 -32Q458 -32 256 -73Q235 |
| -77 219 -77Q122 -77 122 8Q122 58 172 104Q433 340 740 839Q607 |
| 831 547 831Q399 831 243 854Q154 867 154 953Q154 997 181 |
| 1026T249 1056Q298 1056 397 1045T547 1033Q615 1033 751 1042T955 |
| 1052Q1040 1052 1040 982Q1040 901 964 809z"/> |
| |
| </g> |
| |
| </g> |
| |
| </g> |
| |
| </defs> |
| |
| <g transform="translate(80, 80)"> |
| |
| <g id="grid" stroke="black" fill="none"> |
| <rect x="0" y="0" width="320" height="360" fill="url(#gridPattern)"/> |
| |
| <rect x="-25" y="0" width="25" height="360" fill="rgb(240, 240, 240)" /> |
| <rect x="-50" y="0" width="25" height="360" fill="rgb(220, 220, 220)" /> |
| |
| <line x1="-25" y1="60" x2="320" y2="60" /> |
| <line x1="-25" y1="120" x2="320" y2="120" /> |
| <line x1="-50" y1="180" x2="320" y2="180" /> |
| <line x1="-25" y1="240" x2="320" y2="240" /> |
| <line x1="-25" y1="300" x2="320" y2="300" /> |
| |
| |
| <g class="legend" text-anchor="middle" fill="black" stroke="none"> |
| <text transform="translate(-35, 90) rotate(-90)"> |
| without kerning |
| </text> |
| |
| <text transform="translate(-35, 270) rotate(-90)"> |
| with kerning |
| </text> |
| |
| <text transform="translate(-8, 30) rotate(-90)"> |
| font |
| </text> |
| |
| <text transform="translate(-8, 90) rotate(-90)"> |
| svg |
| </text> |
| |
| <text transform="translate(-8, 150) rotate(-90)"> |
| mask |
| </text> |
| |
| <text transform="translate(-8, 210) rotate(-90)"> |
| font |
| </text> |
| |
| <text transform="translate(-8, 270) rotate(-90)"> |
| svg |
| </text> |
| |
| <text transform="translate(-8, 330) rotate(-90)"> |
| mask |
| </text> |
| |
| </g> |
| </g> |
| |
| <g font-size="50" fill="black" stroke="none"> |
| |
| <!-- ============================================================= --> |
| <!-- Font as text --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,45)"> |
| |
| <text font-family="SVGComic">abcdefgᨊ</text> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Font as equivalent SVG --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,105)"> |
| |
| <use xlink:href="#abcdefg"/> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Mask between SVG Font and equivalent SVG --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,165)"> |
| |
| <!-- first draw a black rectangle --> |
| |
| <rect fill="black" x="-30" y="-45" width="320" height="60"/> |
| |
| <!-- now draw the equivalent SVG as a white pattern --> |
| |
| <g fill="white"> |
| |
| <use xlink:href="#abcdefg"/> |
| |
| </g> |
| |
| <!-- mask the equivalent SVG with the real SVG font text --> |
| |
| <text fill="black" font-family="SVGComic">abcdefgᨊ</text> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Font as text with kerning --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,225)"> |
| |
| <text font-family="SVGComic">uvwxyz</text> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Font as equivalent SVG with kerning --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,285)"> |
| |
| <use xlink:href="#uvwxyz"/> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Mask between SVG Font and equivalent SVG with kerning --> |
| <!-- ============================================================= --> |
| |
| <g transform="translate(30,345)"> |
| |
| <!-- first draw a black rectangle --> |
| |
| <rect fill="black" x="-30" y="-45" width="320" height="60"/> |
| |
| <!-- now draw the equivalent SVG as a white pattern --> |
| |
| <g fill="white"> |
| |
| <use xlink:href="#uvwxyz"/> |
| |
| </g> |
| |
| <!-- mask the equivalent SVG with the real SVG font text --> |
| |
| <text fill="black" font-family="SVGComic">uvwxyz</text> |
| |
| </g> |
| |
| </g> |
| |
| </g> |
| |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="../../../batikLogo.svg#Batik_Tag_Box" /> |
| |
| </svg> |
