search

openfl / svg

Provides SVG parsing and rendering for OpenFL and Haxe
MIT License
68 stars 30 forks source link

Support mask attribute #66

Open skylerparr opened 5 years ago

skylerparr commented 5 years ago

Given this SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M34.4356168,3.86684421 C34.5458031,6.52287169 34.6008954,9.02262477 34.6008954,11.3661784 C34.6008954,15.8970488 34.4080723,19.9591476 34.0224201,23.5525965 C32.2043458,23.0838858 30.771945,22.849534 29.7251749,22.849534 L25.8411264,22.7323569 C24.4087042,22.7323569 23.6925038,22.8495328 23.6925038,23.0838881 C23.5823175,24.1775465 23.5272251,26.4820064 23.5272251,29.9973369 C23.5272251,36.871761 23.7200483,55.3855572 24.1057005,85.539281 C22.5079987,85.9298732 20.6348593,86.1251664 18.486226,86.1251664 L16.0896854,86.1251664 C13.3350273,86.1251664 10.8007798,86.3985769 8.48686696,86.9454061 C8.32158747,86.5548138 8.19762972,85.7541117 8.11498997,84.5432756 C8.03235023,83.3324396 8.01857714,82.2192683 8.07367031,81.2037284 L8.07367031,75.4620506 L8.15630964,64.9161119 C8.15630964,50.698553 7.93594029,36.8327351 7.49519499,23.3182423 C6.8891702,22.9276501 6.03523899,22.7323569 4.93337574,22.7323569 L1.62780252,22.849534 C-0.245365011,22.849534 -1.59512725,22.6542407 -2.42152469,22.2636485 C-2.58680417,21.7949377 -2.72453501,20.5060026 -2.83472134,18.3968043 C-2.94490766,16.287606 -3,13.9050288 -3,11.2490013 C-3,7.34307856 -2.97245383,4.53085635 -2.91736067,2.81225033 L0.636130549,2.81225033 L3.85906444,2.69507324 L8.48686696,2.69507324 L13.2799481,2.57789614 C21.4888294,2.57789614 28.1825482,3.0075412 33.3613055,3.86684421 L34.4356168,3.86684421 Z M58.3597075,31.5206391 C58.4148007,31.5206391 58.4285738,31.5011098 58.4010272,31.4620506 C58.3734806,31.4229914 58.3872537,31.4034621 58.4423468,31.4034621 C59.7645827,30.1535668 61.2933951,29.1575714 63.0288297,28.4154461 C64.7642643,27.6733207 66.4858998,27.3022636 68.1937879,27.3022636 C71.8299366,27.3022636 74.6396457,28.5521402 76.6229996,31.0519308 C78.1656081,33.0048921 78.9369008,39.449568 78.9369008,50.3861518 C78.9369008,53.5890085 78.8818085,58.4713387 78.7716222,65.0332889 C78.6614359,70.6578177 78.6063435,74.6808578 78.6063435,77.10253 C78.6063435,79.7585574 78.6614359,82.7270142 78.7716222,86.0079893 C75.7414982,86.632937 72.7665121,86.8672888 69.8465745,86.7110519 L65.9625259,86.7110519 C65.8523396,84.3674983 65.7972473,79.8366958 65.7972473,73.1185087 L65.7972473,67.2596538 L65.7146079,58.9400799 C65.6595148,58.4713692 65.6319686,57.6901963 65.6319686,56.5965379 C65.5768754,54.2529843 65.4253715,52.4562868 65.1774523,51.2063915 C64.9295331,49.9564962 64.7091637,49.1753234 64.5163376,48.8628495 C64.3235116,48.5503757 64.0342768,48.1597893 63.6486247,47.6910786 C63.2078794,47.3004863 62.5743175,47.1051931 61.7479201,47.1051931 C60.7562431,47.1051931 59.8747658,47.6129554 59.1034615,48.6284953 C58.3321572,49.6440353 57.9189647,51.3235569 57.8638715,53.6671105 C57.8087784,54.8388874 57.7812322,56.6355849 57.7812322,59.057257 C57.7812322,61.0102184 57.8363245,63.8614992 57.9465109,67.6111851 C58.0566972,71.5171079 58.1117895,74.446506 58.1117895,76.3994674 C58.1117895,79.9147979 58.0016048,83.0394892 57.7812322,85.7736352 C56.2937168,86.3204643 55.0954585,86.6524628 54.1864213,86.7696405 C53.2773841,86.8868182 52.271949,86.9063475 51.1700857,86.828229 C50.6742473,86.7501106 49.8754084,86.7110519 48.7735452,86.7110519 C47.5064024,86.7110519 46.2668249,86.7891692 45.0547753,86.9454061 L45.0547753,77.5712383 L44.9721359,63.9786951 C44.9170428,57.7292186 44.8894966,46.4412712 44.8894966,30.114514 C44.8894966,15.193889 44.944589,5.27299398 45.0547753,0.351531292 C46.8177565,0.664005113 48.1950649,0.82023968 49.1867418,0.82023968 C50.1233256,0.82023968 51.0323491,0.742122397 51.9138397,0.585885486 L53.3187083,0.351531292 C55.1367827,0.117175925 56.1008986,0 56.2110849,0 C57.5333208,0 58.221975,0.351527776 58.2770682,1.05459387 C58.3872545,3.24191063 58.4423468,7.53836123 58.4423468,13.9440746 L58.3597075,24.6071904 L58.3597075,31.5206391 Z M103.687381,59.8774967 C103.742474,62.4554057 103.838885,64.3497498 103.976618,65.5605859 C104.114351,66.7714219 104.486225,68.0408278 105.092249,69.3688415 C105.532995,70.5406184 106.111464,71.4389671 106.827675,72.0639148 C107.543886,72.6888624 108.287633,73.0013316 109.058937,73.0013316 C110.215894,73.0013316 111.152463,72.1225121 111.868674,70.3648469 C112.584886,68.6071816 112.887893,66.0097819 112.777707,62.5725699 C114.375409,62.8850437 116.083271,62.963161 117.901346,62.8069241 L125.669443,63.3928096 C125.669443,66.9081401 125.490393,70.4624765 125.132287,74.0559254 C124.774181,77.6493744 124.0993,80.3834793 123.107623,82.2583222 C122.00576,84.445639 120.421856,85.9493967 118.355862,86.7696405 C116.289868,87.5898843 113.879579,88 111.12492,88 C110.07815,88 108.618203,87.9218827 106.745036,87.7656458 C105.863545,87.6875274 104.568875,87.6484687 102.860987,87.6484687 C101.153099,87.3359949 99.445237,86.4767048 97.7373489,85.0705726 C95.0928771,82.1020713 93.1370992,77.8837379 91.8699564,72.4154461 C90.6028137,66.9471542 89.9692518,61.0102406 89.9692518,54.6045273 C89.9692518,47.8863401 90.6303599,41.7150747 91.9525958,36.0905459 C93.054459,32.5752154 95.0928755,29.8411105 98.0679062,27.8881491 C101.042937,25.9351877 104.348477,24.9587217 107.984626,24.9587217 C109.96798,24.9587217 111.896212,25.2711908 113.769379,25.8961385 C118.011553,27.0679153 121.110496,29.8996668 123.066304,34.391478 C125.022111,38.8832892 126,44.2538525 126,50.5033289 C126,51.5188688 125.944908,53.2765077 125.834721,55.7762983 C124.787951,56.1668905 122.391435,56.5379476 118.6451,56.8894807 C114.898765,57.2410137 111.400401,57.4167776 108.149905,57.4167776 L103.687381,57.4167776 L103.687381,59.8774967 Z M113.527659,38.7856192 C112.519842,38.0825531 111.61282,37.7310253 110.806566,37.7310253 C108.454991,37.7310253 106.775321,38.3559636 105.767503,39.6058589 C104.759686,40.8557541 104.155004,42.613393 103.953441,44.8788282 C103.886253,45.1913021 103.852659,45.5428298 103.852659,45.9334221 C103.852659,46.4021328 104.05422,46.6755433 104.457347,46.7536618 C104.860474,46.8317802 105.868276,46.8317802 107.480784,46.7536618 L111.915159,46.7536618 L114.938597,46.8708389 L116.248753,46.8708389 C116.450317,46.9489573 116.58469,46.9489573 116.651878,46.8708389 C116.719066,46.7927204 116.752659,46.6364859 116.752659,46.4021305 L116.752659,45.9334221 C116.752659,44.2929345 116.500709,42.8477648 115.9968,41.5978695 C115.492891,40.3479742 114.804226,39.4496255 113.930784,38.9027963 L113.527659,38.7856192 Z" id="path-7"></path>
        <rect id="path-9" x="0" y="0" width="240" height="88"></rect>
    </defs>
    <g id="title" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Title">
            <g id="The" transform="translate(133.500000, 105.000000) rotate(-90.000000) translate(-133.500000, -105.000000) translate(72.000000, 61.000000)">
                <mask id="mask-8" fill="white">
                    <use xlink:href="#path-7"></use>
                </mask>
                <g id="ui/fills/color/base" mask="url(#mask-8)">
                    <mask id="mask-10" fill="white">
                        <use xlink:href="#path-9"></use>
                    </mask>
                    <g id="Background"></g>
                    <g id="ui/atomic/quark/color/neutral-2" mask="url(#mask-10)" fill="#252B2C" fill-rule="evenodd" stroke-width="1">
                        <g id="ui/fills/color/material2/neutral-2">
                            <rect id="Fill" x="0" y="0" width="240" height="88"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

expected outcome:

img

got:

img

running: haxe 3.4.7 openfl 8.8.0 lime 7.2.1 svg [master]