| <?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"> |
| |
| <!-- |
| Copyright 1999-2003,2005 The Apache Software Foundation. |
| |
| Licensed 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. |
| --> |
| |
| <!-- ========================================================================= --> |
| <!-- Examines the possibilities of styling for glyphs. --> |
| <!-- They are styled <text>, <font>, <glyph> and combinations. --> |
| <!-- Test stroke, stroke-width, fills etc. --> |
| <!-- --> |
| <!-- @author bella.robinson@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 - font styling test</title> |
| |
| <style type="text/css"><![CDATA[ |
| |
| ]]></style> |
| |
| <g id="content"> |
| |
| <text class="title" x="50%" y="40">Font Styling Test</text> |
| |
| |
| <g style="fill:purple; stroke:yellow"> <!-- none of the text should be draw with these properties --> |
| |
| <defs> |
| |
| <!-- marker to used by glyphs with a dot (i and j)--> |
| |
| <marker id="dotMarker" markerWidth="1" markerHeight="1" |
| viewBox="0 0 100 100" orient="0" refX="50" refY="50" |
| markerUnits="strokeWidth"> |
| <circle cx="50" cy="50" r="50" fill="yellow" stroke="none"/> |
| </marker> |
| |
| |
| |
| <!-- ============================= --> |
| <!-- SVG Font Definition --> |
| <!-- ============================= --> |
| |
| <!-- This is an encoding of Microsoft's Arial font --> |
| <!-- in SVG format (as allowed in the license). For the --> |
| <!-- true type version of this font, refer to --> |
| <!-- http://www.microsoft.com/truetype --> |
| <!-- It has been converted to SVG using Batik's --> |
| <!-- true type to SVG converter (ttf2svg). --> |
| <!-- Styling has been added for testing purposes. --> |
| |
| |
| <font horiz-adv-x="904" style="stroke:green; stroke-width:100 "> |
| |
| <font-face |
| font-family="SVGArial" |
| units-per-em="2048" |
| panose-1="2 11 6 4 2 2 2 2 2 4" |
| ascent="1854" |
| descent="434" |
| alphabetic="0"/> |
| |
| <missing-glyph horiz-adv-x="1536" d="M256 0V1280H1280V0H256zM288 32H1248V1248H288V32z"/> |
| |
| <glyph unicode=" " glyph-name="space" horiz-adv-x="569"/> |
| |
| |
| <!-- glyphs for a, b, c and d only have d attributes and do not contain any styling --> |
| |
| <glyph unicode="a" glyph-name="a" horiz-adv-x="1139" |
| d="M828 131Q728 46 636 11T437 -24Q262 -24 168 61T74 280Q74 358 109 422 |
| T202 526T332 585Q385 599 492 612Q710 638 813 674Q814 711 814 721 |
| Q814 831 763 876Q694 937 558 937Q431 937 371 893T281 735L105 759 |
| Q129 872 184 941T343 1048T584 1086Q720 1086 805 1054T930 974 |
| T986 851Q995 805 995 685V445Q995 194 1006 128T1052 0H864Q836 56 828 131z |
| M813 533Q715 493 519 465Q408 449 362 429T291 371T266 285Q266 213 320 165 |
| T480 117Q584 117 665 162T784 287Q813 348 813 467V533z"/> |
| |
| <glyph unicode="b" glyph-name="b" horiz-adv-x="1139" |
| d="M301 0H134V1466H314V943Q428 1086 605 1086Q703 1086 790 1047T934 936 |
| T1023 763T1055 547Q1055 274 920 125T596 -24Q408 -24 301 133V0z |
| M299 539Q299 348 351 263Q436 124 581 124Q699 124 785 226T871 532 |
| Q871 740 789 839T589 938Q471 938 385 836T299 539z"/> |
| |
| <glyph unicode="c" glyph-name="c" horiz-adv-x="1024" |
| d="M828 389L1005 366 Q976 183 857 80T563 -24Q345 -24 213 118T80 527 |
| Q80 699 137 828T310 1021T564 1086Q737 1086 847 999T988 750 |
| L813 723Q788 830 725 884T571 938Q435 938 350 841T265 532 |
| Q265 318 347 221T561 124Q667 124 738 189T828 389z"/> |
| |
| <glyph unicode="d" glyph-name="d" horiz-adv-x="1139" |
| d="M824 0V134Q723 -24 527 -24Q400 -24 294 46T129 241T70 530 |
| Q70 689 123 818T282 1017T519 1086Q615 1086 690 1046T812 940 |
| V1466H991V0H824zM255 530Q255 326 341 225T544 124Q662 124 744 220 |
| T827 515Q827 733 743 835T536 937Q416 937 336 839T255 530z"/> |
| |
| <!-- glyphs for e, f, g and h only have glyph children and do not contain any styling --> |
| |
| <glyph unicode="e" glyph-name="e" horiz-adv-x="1139"> |
| <path d="M862 342L1048 319Q1004 156 885 66T581 -24Q348 -24 212 119 |
| T75 522Q75 790 213 938T571 1086Q784 1086 919 941T1054 533 |
| Q1054 517 1053 485H261Q271 310 360 217T582 124 |
| Q681 124 751 176T862 342zM271 633H864Q852 767 796 834 |
| Q710 938 573 938Q449 938 365 855T271 633z"/> |
| </glyph> |
| |
| <glyph unicode="f" glyph-name="f" horiz-adv-x="569"> |
| <path d="M178 0V922H19V1062H178V1175Q178 1282 197 1334Q223 1404 288 1447 |
| T472 1491Q548 1491 640 1473L613 1316Q557 1326 507 1326 |
| Q425 1326 391 1291T357 1160V1062H564V922H357V0H178z"/> |
| </glyph> |
| |
| <glyph unicode="g" glyph-name="g" horiz-adv-x="1139"> |
| <path d="M102 -88L277 -114Q288 -195 338 -232Q405 -282 521 -282 |
| Q646 -282 714 -232T806 -92Q820 -37 819 139Q701 0 525 0 |
| Q306 0 186 158T66 537Q66 689 121 817T280 1016T526 1086 |
| Q714 1086 836 934V1062H1002V144Q1002 -104 952 -207T792 -371 |
| T522 -431Q332 -431 215 -346T102 -88zM251 550Q251 341 334 245 |
| T542 149Q666 149 750 244T834 544Q834 739 748 838T539 937 |
| Q419 937 335 840T251 550z"/> |
| </glyph> |
| |
| <glyph unicode="h" glyph-name="h" horiz-adv-x="1139"> |
| <path d="M135 0V1466H315V940Q441 1086 633 1086Q751 1086 838 1040T962 911 |
| T1000 673V0H820V673Q820 808 762 869T596 931Q516 931 446 890T345 777 |
| T315 581V0H135z"/> |
| </glyph> |
| |
| |
| <!-- glyphs for i and j have both a d attribute and glyph chilren, --> |
| <!-- the glyph children are styled --> |
| |
| <glyph unicode="i" glyph-name="i" horiz-adv-x="455" |
| d="M136 0V1062H316V0H136z"> |
| <path style="marker:url(#dotMarker);fill:red" d="M136 1259V1466H316V1259H136z" /> |
| </glyph> |
| |
| <glyph unicode="j" glyph-name="j" horiz-adv-x="455" |
| d="M-94 -412L-60 -259Q-6 -273 25 -273Q80 -273 107 -237T134 -54 |
| V1062H314V-58Q314 -254 263 -331Q198 -431 47 -431Q-26 -431 -94 -412z"> |
| <path style="marker:url(#dotMarker);fill:red" d="M134 1257V1466H314V1257H134z" /> |
| </glyph> |
| |
| |
| <!-- glyphs for k, l, m and n only have glyph children and have styling on the glyph element --> |
| |
| <glyph unicode="k" glyph-name="k" horiz-adv-x="1024" style="fill:yellow; stroke:orange"> |
| <path d="M136 0V1466H316V630L742 1062H975L569 668L1016 0H794L443 543L316 421V0H136z"/> |
| </glyph> |
| |
| <glyph unicode="l" glyph-name="l" horiz-adv-x="455" style="fill:yellow; stroke:orange"> |
| <path d="M131 0V1466H311V0H131z"/> |
| </glyph> |
| |
| <glyph unicode="m" glyph-name="m" horiz-adv-x="1706" style="fill:yellow; stroke:orange"> |
| <path d="M135 0V1062H296V913Q346 991 429 1038T618 1086 |
| Q736 1086 811 1037T918 900Q1044 1086 1246 1086 |
| Q1404 1086 1489 999T1574 729V0H1395V669 |
| Q1395 777 1378 824T1314 901T1206 930Q1094 930 1020 856 |
| T946 617V0H766V690Q766 810 722 870T578 930 |
| Q502 930 438 890T344 773T315 551V0H135z"/> |
| </glyph> |
| |
| <glyph unicode="n" glyph-name="n" horiz-adv-x="1139" style="fill:yellow; stroke:orange"> |
| <path d="M135 0V1062H297V911Q414 1086 635 1086Q731 1086 811 1052 |
| T932 961T988 828Q998 778 998 653V0H818V646Q818 756 797 810 |
| T723 897T597 930Q482 930 399 857T315 580V0H135z"/> |
| </glyph> |
| |
| |
| <!-- glyphs for o, p, q and r only have d attributes and contain styling, this style should not be drawn --> |
| |
| <glyph unicode="o" glyph-name="o" horiz-adv-x="1139" style="fill:purple;stroke:green; stroke-width:50" |
| d="M68 531Q68 826 232 968Q369 1086 566 1086Q785 1086 924 943 |
| T1063 546Q1063 341 1002 224T823 41T566 -24Q343 -24 206 119 |
| T68 531zM253 531Q253 327 342 226T566 124Q700 124 789 226 |
| T878 537Q878 734 789 835T566 937Q431 937 342 836T253 531z"/> |
| |
| <glyph unicode="p" glyph-name="p" horiz-adv-x="1139" style="fill:purple;stroke:green; stroke-width:50" |
| d="M135 -407V1062H299V924Q357 1005 430 1045T607 1086 |
| Q743 1086 847 1016T1004 819T1057 539Q1057 376 999 246 |
| T829 46T594 -24Q504 -24 433 14T315 110V-407H135z |
| M298 525Q298 320 381 222T582 124Q702 124 787 225T873 540 |
| Q873 743 790 844T590 945Q475 945 387 838T298 525z"/> |
| |
| <glyph unicode="q" glyph-name="q" horiz-adv-x="1139" style="fill:purple;stroke:green; stroke-width:50" |
| d="M812 -407V113Q770 54 695 15T534 -24Q345 -24 209 127 |
| T72 541Q72 701 127 828T288 1020T520 1086Q717 1086 830 920 |
| V1062H992V-407H812zM257 534Q257 329 343 227T549 124 |
| Q664 124 747 221T830 518Q830 730 743 837T537 944 |
| Q420 944 339 845T257 534z"/> |
| |
| <glyph unicode="r" glyph-name="r" horiz-adv-x="682" style="fill:purple;stroke:green; stroke-width:50" |
| d="M133 0V1062H295V901Q357 1014 409 1050T525 1086 |
| Q616 1086 710 1028L648 861Q582 900 516 900Q457 900 410 865 |
| T343 766Q313 670 313 556V0H133z"/> |
| |
| |
| <glyph unicode="s" glyph-name="s" horiz-adv-x="1024" d="M63 317L241 345Q256 238 324 181T516 124Q640 124 700 174T760 293Q760 354 707 389Q670 413 523 450Q325 500 249 536T133 637T93 780Q93 851 125 911T214 1012Q256 1043 328 1064T484 1086Q609 1086 |
| 703 1050T843 953T905 788L729 764Q717 846 660 892T497 938Q373 938 320 897T267 801Q267 766 289 738Q311 709 358 690Q385 680 517 644Q708 593 783 561T902 466T945 312Q945 222 893 143T741 20T517 -24Q310 -24 202 62T63 317z"/> |
| <glyph unicode="t" glyph-name="t" horiz-adv-x="569" d="M528 161L554 2Q478 -14 418 -14Q320 -14 266 17T190 98T168 311V922H36V1062H168V1325L347 1433V1062H528V922H347V301Q347 224 356 202T387 167T449 154Q479 154 528 161z"/> |
| <glyph unicode="u" glyph-name="u" horiz-adv-x="1139" d="M831 0V156Q707 -24 494 -24Q400 -24 319 12T198 102T142 236Q131 289 131 404V1062H311V473Q311 332 322 283Q339 212 394 172T530 131Q611 131 682 172T782 285T812 493V1062H992V0H831z"/> |
| <glyph unicode="v" glyph-name="v" horiz-adv-x="1024" d="M430 0L26 1062H216L444 426Q481 323 512 212Q536 296 579 414L815 1062H1000L598 0H430z"/> |
| <glyph unicode="w" glyph-name="w" horiz-adv-x="1479" d="M331 0L6 1062H192L361 449L424 221Q428 238 479 440L648 1062H833L992 446L1045 243L1106 448L1288 1062H1463L1131 0H944L775 636L734 817L519 0H331z"/> |
| <glyph unicode="x" glyph-name="x" horiz-adv-x="1024" d="M15 0L403 552L44 1062H269L432 813Q478 742 506 694Q550 760 587 811L766 1062H981L614 562L1009 0H788L570 330L512 419L233 0H15z"/> |
| <glyph unicode="y" glyph-name="y" horiz-adv-x="1024" d="M127 -409L107 -240Q166 -256 210 -256Q270 -256 306 -236T365 -180Q382 -153 420 -46Q425 -31 436 -2L33 1062H227L448 447Q491 330 525 201Q556 325 599 443L826 1062H1006L602 -18Q537 -193 501 -259Q453 |
| -348 391 -389T243 -431Q191 -431 127 -409z"/> |
| <glyph unicode="z" glyph-name="z" horiz-adv-x="1024" d="M40 0V146L716 922Q601 916 513 916H80V1062H948V943L373 269L262 146Q383 155 489 155H980V0H40z"/> |
| |
| </font> |
| |
| </defs> |
| |
| |
| <!-- draw text using the SVG Font --> |
| |
| <g id="text-content" style="fill:blue; stroke:none; font-family:SVGArial; font-size:45"> |
| <text x="120" y="150">abcd</text> |
| <text x="120" y="210">efgh</text> |
| <text x="120" y="270">ijij</text> |
| <text x="120" y="330">klmn</text> |
| <text x="120" y="390">opqr</text> |
| </g> |
| |
| |
| <!-- draw rectangles which are styled in the same way the text above should be styled --> |
| |
| <g id="style-reference" style="fill:blue; stroke:none"> |
| |
| <rect x="90" y="125" width="25" height="25"/> |
| |
| <rect x="90" y="185" width="25" height="25" |
| style="stroke:green; stroke-width:2.2"/> <!-- stroke-width = 100/2048*45 --> |
| |
| <polygon points="90,235 115,235 115,240 90,240" |
| style="stroke:green; stroke-width:2.2; fill:red; marker:url(#dotMarker)"/> |
| <rect x="90" y="245" width="25" height="25"/> |
| |
| <g style="stroke:green; stroke-width:2.2"> |
| <rect x="90" y="305" width="25" height="25" style="fill:yellow; stroke:orange"/> |
| </g> |
| |
| <rect x="90" y="365" width="25" height="25"/> |
| </g> |
| |
| </g> |
| <text x="90" y="430" font-size="10" >The text style should match the style of the box beside it.</text> |
| </g> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="../../../batikLogo.svg#Batik_Tag_Box" /> |
| |
| </svg> |
