flutter_svg
flutter_svg copied to clipboard
Published
20 hours ago •
dnfield
dnfield
Svgs with <mask> tag are not displayed correctly
<svg width="51" height="20" viewBox="0 0 51 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_6330_2911" fill="white">
<path d="M16.3747 17.0269C16.8924 13.637 14.385 11.5559 12.0045 11.5242C9.6118 11.4925 7.00551 13.5148 7.50084 17.0726C6.72194 16.97 5.96822 16.8655 5.21357 16.7722C4.62869 16.7004 4.03542 16.6771 3.45894 16.5661C2.94216 16.4672 2.40019 16.3581 1.94498 16.1127C0.92261 15.5624 0.655824 14.4831 1.20619 13.4561C1.25656 13.3618 1.32745 13.2079 1.39462 13.2042C2.01027 13.1716 1.87128 12.7229 1.87688 12.36C1.93658 8.59608 2.43564 4.90865 3.7789 1.36581C4.08859 0.548662 4.78821 0.0188214 5.66412 0.0188214C14.274 0.0160229 22.8849 0.0421435 31.4948 0.00016674C34.1542 -0.0128927 36.504 0.740824 38.5646 2.38725C39.7297 3.3182 40.8827 4.27247 41.9657 5.29671C42.6391 5.93382 43.4218 6.24911 44.2595 6.54575C45.8686 7.11663 47.4599 7.73789 49.056 8.34515C50.2285 8.79104 50.2985 9.86938 50.3899 10.8638C50.4506 11.5177 50.4768 11.7287 50.4907 12.2849C50.4982 12.5863 50.5829 12.911 50.6743 13.0061C50.8581 13.1964 50.9282 13.4598 50.9608 13.6911C51.1147 14.7629 50.833 15.6314 49.6726 15.9915C49.5373 16.0334 49.3601 16.1127 49.3097 16.2247C48.861 17.2013 48.028 17.1108 47.1335 17.0418C47.4254 15.3721 47.0383 13.9178 45.8163 12.7462C44.9376 11.9039 43.8621 11.5083 42.6503 11.5242C40.5077 11.5512 37.8277 13.4318 38.3482 17.026C31.034 17.0269 23.7272 17.0269 16.3747 17.0269Z"/>
</mask>
<path d="M50.9874 10.8084C50.9568 10.4784 50.6645 10.2357 50.3345 10.2663C50.0046 10.2969 49.7619 10.5892 49.7925 10.9192L50.9874 10.8084ZM50.2416 13.4218C50.4712 13.6608 50.851 13.6684 51.09 13.4388C51.3289 13.2092 51.3365 12.8294 51.1069 12.5904L50.2416 13.4218ZM50.4907 12.2764L51.0905 12.2614L50.4907 12.2764ZM49.7925 10.9192C49.8538 11.58 49.8776 11.7598 49.8909 12.2913L51.0905 12.2614C51.076 11.6805 51.0474 11.4553 50.9874 10.8084L49.7925 10.9192ZM49.8909 12.2913C49.8958 12.4879 49.9252 12.6908 49.9693 12.8654C49.9914 12.953 50.0197 13.0437 50.0557 13.1285C50.0868 13.2019 50.1434 13.3197 50.2416 13.4218L51.1069 12.5904C51.1376 12.6223 51.1532 12.6481 51.1574 12.6553C51.1627 12.6642 51.1633 12.6668 51.1605 12.6602C51.1546 12.6464 51.1442 12.6171 51.1328 12.5717C51.1098 12.4806 51.0931 12.3661 51.0905 12.2614L49.8909 12.2913ZM16.3747 17.0269L15.1885 16.8457C15.1357 17.1916 15.2364 17.5433 15.4644 17.8087C15.6924 18.0742 16.0248 18.2269 16.3747 18.2269V17.0269ZM12.0045 11.5242L12.0205 10.3243L12.0204 10.3243L12.0045 11.5242ZM7.50084 17.0726L7.34411 18.2623C7.71555 18.3113 8.08854 18.1839 8.35248 17.918C8.61642 17.6521 8.74104 17.2782 8.68937 16.9071L7.50084 17.0726ZM5.21357 16.7722L5.36078 15.5813L5.35984 15.5812L5.21357 16.7722ZM3.45894 16.5661L3.68584 15.3877L3.68445 15.3875L3.45894 16.5661ZM1.94498 16.1127L2.51429 15.0564L2.51378 15.0561L1.94498 16.1127ZM1.20619 13.4561L2.26389 14.0229L2.26443 14.0219L1.20619 13.4561ZM1.39462 13.2042L1.33107 12.0059L1.32805 12.006L1.39462 13.2042ZM1.87688 12.36L0.677032 12.341L0.677024 12.3415L1.87688 12.36ZM3.7789 1.36581L4.90095 1.79124L4.90101 1.79109L3.7789 1.36581ZM5.66412 0.0188214V1.21882L5.66451 1.21882L5.66412 0.0188214ZM31.4948 0.00016674L31.5006 1.20015L31.5007 1.20015L31.4948 0.00016674ZM38.5646 2.38725L39.3137 1.44977L39.3137 1.44975L38.5646 2.38725ZM41.9657 5.29671L42.7903 4.42496L42.7902 4.42485L41.9657 5.29671ZM44.2595 6.54575L44.6607 5.41481L44.66 5.41458L44.2595 6.54575ZM49.056 8.34515L48.6293 9.46671L48.6295 9.46679L49.056 8.34515ZM50.3899 10.8638L49.195 10.9736L49.1951 10.9746L50.3899 10.8638ZM50.4907 12.2849L51.6903 12.2551L50.4907 12.2849ZM50.6743 13.0061L49.809 13.8375L49.8111 13.8397L50.6743 13.0061ZM50.9608 13.6911L49.7726 13.8588L49.773 13.8617L50.9608 13.6911ZM49.6726 15.9915L49.317 14.8454L49.3169 14.8454L49.6726 15.9915ZM49.3097 16.2247L50.4002 16.7256L50.404 16.7171L49.3097 16.2247ZM47.1335 17.0418L45.9514 16.8351C45.8931 17.1684 45.9782 17.5107 46.1857 17.7779C46.3932 18.045 46.7039 18.2122 47.0411 18.2383L47.1335 17.0418ZM45.8163 12.7462L46.6468 11.88L46.6467 11.8799L45.8163 12.7462ZM42.6503 11.5242L42.6655 12.7241L42.666 12.7241L42.6503 11.5242ZM38.3482 17.026L38.3483 18.226C38.6966 18.2259 39.0276 18.0746 39.2555 17.8113C39.4834 17.548 39.5857 17.1986 39.5358 16.854L38.3482 17.026ZM17.561 17.2081C18.2009 13.0182 15.0463 10.3646 12.0205 10.3243L11.9885 12.7241C13.7238 12.7472 15.584 14.2558 15.1885 16.8457L17.561 17.2081ZM12.0204 10.3243C8.97035 10.2839 5.70522 12.8776 6.3123 17.2381L8.68937 16.9071C8.3058 14.1521 10.2533 12.7011 11.9886 12.7241L12.0204 10.3243ZM7.65757 15.8829C6.88972 15.7817 6.12141 15.6753 5.36078 15.5813L5.06636 17.9632C5.81503 18.0557 6.55415 18.1583 7.34411 18.2623L7.65757 15.8829ZM5.35984 15.5812C4.62797 15.4913 4.22303 15.4912 3.68584 15.3877L3.23204 17.7444C3.84781 17.863 4.62942 17.9095 5.0673 17.9633L5.35984 15.5812ZM3.68445 15.3875C3.14053 15.2834 2.78135 15.2003 2.51429 15.0564L1.37567 17.1691C2.01904 17.5158 2.74379 17.651 3.23343 17.7447L3.68445 15.3875ZM2.51378 15.0561C2.26405 14.9217 2.17617 14.7687 2.14457 14.6512C2.11028 14.5238 2.10969 14.3106 2.26389 14.0229L0.148482 12.8893C-0.247684 13.6285 -0.390053 14.4685 -0.17295 15.275C0.0468432 16.0916 0.603537 16.7534 1.37617 17.1694L2.51378 15.0561ZM2.26443 14.0219C2.2744 14.0032 2.28417 13.9844 2.29034 13.9726C2.29758 13.9587 2.30218 13.9498 2.30648 13.9418C2.31618 13.9236 2.31449 13.928 2.30526 13.9424C2.30119 13.9488 2.26021 14.0146 2.18087 14.0918C2.1388 14.1328 2.06449 14.1981 1.95653 14.2587C1.84663 14.3204 1.67772 14.3903 1.46118 14.4024L1.32805 12.006C0.877431 12.0311 0.596425 12.2849 0.506978 12.3719C0.393877 12.482 0.319431 12.5929 0.282953 12.65C0.241309 12.7152 0.20825 12.7759 0.188393 12.8132C0.177909 12.8329 0.168179 12.8516 0.161644 12.8641C0.154027 12.8787 0.150571 12.8854 0.147944 12.8903L2.26443 14.0219ZM1.45816 14.4025C1.74649 14.3872 2.10158 14.3169 2.42402 14.0877C2.77239 13.8402 2.94705 13.5049 3.02434 13.2139C3.09242 12.9575 3.08849 12.7216 3.08527 12.6068C3.08 12.4188 3.07573 12.4436 3.07674 12.3785L0.677024 12.3415C0.675755 12.4238 0.678667 12.4995 0.680955 12.5517C0.68375 12.6155 0.685252 12.6397 0.686214 12.674C0.688243 12.7464 0.679538 12.6928 0.704707 12.598C0.739079 12.4685 0.832708 12.2743 1.03381 12.1314C1.20898 12.0069 1.35057 12.0048 1.33107 12.0059L1.45816 14.4025ZM3.07673 12.379C3.13498 8.70679 3.62132 5.16627 4.90095 1.79124L2.65684 0.940385C1.24996 4.65104 0.738187 8.48537 0.677032 12.341L3.07673 12.379ZM4.90101 1.79109C5.05063 1.39631 5.33228 1.21882 5.66412 1.21882V-1.18118C4.24413 -1.18118 3.12656 -0.29899 2.65678 0.940534L4.90101 1.79109ZM5.66451 1.21882C14.2689 1.21602 22.8872 1.24215 31.5006 1.20015L31.4889 -1.19982C22.8826 -1.15786 14.2791 -1.18398 5.66373 -1.18118L5.66451 1.21882ZM31.5007 1.20015C33.9079 1.18833 35.9858 1.8628 37.8155 3.32474L39.3137 1.44975C37.0222 -0.381155 34.4005 -1.21412 31.4889 -1.19982L31.5007 1.20015ZM37.8155 3.32473C38.9721 4.24892 40.0945 5.17875 41.1411 6.16856L42.7902 4.42485C41.6708 3.3662 40.4872 2.38748 39.3137 1.44977L37.8155 3.32473ZM41.141 6.16845C42.0121 6.99254 43.0068 7.37517 43.8589 7.67692L44.66 5.41458C43.8368 5.12305 43.2662 4.8751 42.7903 4.42496L41.141 6.16845ZM43.8582 7.67668C45.4504 8.24155 47.0202 8.85449 48.6293 9.46671L49.4827 7.22359C47.8997 6.62128 46.2868 5.99171 44.6607 5.41481L43.8582 7.67668ZM48.6295 9.46679C48.8626 9.55546 48.9435 9.66336 49.0105 9.83508C49.1113 10.0933 49.1442 10.4212 49.195 10.9736L51.5849 10.7539C51.5443 10.312 51.4965 9.60347 51.2463 8.96246C50.9623 8.23494 50.4219 7.58073 49.4825 7.22351L48.6295 9.46679ZM49.1951 10.9746C49.2568 11.6403 49.2784 11.8074 49.291 12.3148L51.6903 12.2551C51.6753 11.65 51.6443 11.395 51.5848 10.753L49.1951 10.9746ZM49.291 12.3148C49.2971 12.5582 49.3331 12.8047 49.3886 13.021C49.4165 13.1297 49.4544 13.2506 49.5061 13.3706C49.5487 13.4695 49.6394 13.661 49.809 13.8375L51.5396 12.1748C51.6096 12.2476 51.6512 12.3123 51.671 12.3454C51.6927 12.3817 51.7049 12.4087 51.7101 12.4208C51.72 12.4437 51.719 12.4467 51.7134 12.4247C51.7084 12.4054 51.7027 12.3777 51.698 12.3447C51.6934 12.3118 51.6909 12.2809 51.6903 12.2551L49.291 12.3148ZM49.8111 13.8397C49.7626 13.7895 49.7489 13.7501 49.751 13.7556C49.7519 13.7579 49.7551 13.7673 49.7595 13.7858C49.7638 13.8042 49.7683 13.8281 49.7726 13.8588L52.149 13.5234C52.1064 13.2212 51.9912 12.6424 51.5375 12.1726L49.8111 13.8397ZM49.773 13.8617C49.8319 14.2715 49.7808 14.4816 49.7343 14.5755C49.7093 14.626 49.6426 14.7443 49.317 14.8454L50.0282 17.1376C50.863 16.8785 51.5174 16.3826 51.8848 15.6409C52.2308 14.9426 52.2437 14.1825 52.1486 13.5206L49.773 13.8617ZM49.3169 14.8454C49.1974 14.8825 49.0288 14.9445 48.8584 15.0432C48.7237 15.1211 48.3975 15.3277 48.2154 15.7322L50.404 16.7171C50.3319 16.8774 50.2374 16.9781 50.1827 17.0286C50.1261 17.0808 50.0796 17.1093 50.0603 17.1205C50.0248 17.141 50.0126 17.1424 50.0283 17.1375L49.3169 14.8454ZM48.2193 15.7237C48.1941 15.7786 48.1732 15.8108 48.1606 15.8276C48.1543 15.8361 48.1497 15.8413 48.1471 15.8441C48.1458 15.8455 48.1448 15.8464 48.1442 15.847C48.1437 15.8475 48.1434 15.8477 48.1434 15.8477C48.1434 15.8478 48.1435 15.8476 48.1438 15.8474C48.1441 15.8472 48.1444 15.847 48.1446 15.8469C48.1453 15.8464 48.1452 15.8466 48.1438 15.8472C48.1413 15.8484 48.1306 15.8532 48.1071 15.8589C48.0546 15.8716 47.9633 15.8829 47.8045 15.8807C47.6408 15.8784 47.4665 15.8639 47.2258 15.8454L47.0411 18.2383C47.4176 18.2673 48.0682 18.3373 48.6705 18.1918C49.4046 18.0146 50.0227 17.5473 50.4002 16.7256L48.2193 15.7237ZM48.3155 17.2485C48.6672 15.2372 48.1937 13.3632 46.6468 11.88L44.9858 13.6124C45.8829 14.4725 46.1836 15.507 45.9514 16.8351L48.3155 17.2485ZM46.6467 11.8799C45.5268 10.8064 44.1415 10.3046 42.6346 10.3243L42.666 12.7241C43.5826 12.7121 44.3484 13.0013 44.9859 13.6125L46.6467 11.8799ZM42.6352 10.3243C41.2454 10.3418 39.7287 10.9498 38.6287 12.1128C37.4965 13.31 36.8493 15.0488 37.1606 17.1979L39.5358 16.854C39.3265 15.409 39.7591 14.4104 40.3724 13.762C41.018 13.0794 41.9126 12.7336 42.6655 12.7241L42.6352 10.3243ZM38.348 15.826C31.0339 15.8269 23.7272 15.8269 16.3747 15.8269V18.2269C23.7272 18.2269 31.034 18.2269 38.3483 18.226L38.348 15.826Z" fill="white" mask="url(#path-1-inside-1_6330_2911)"/>
<path d="M30.3769 7.78849C32.2565 7.78102 37.3464 7.78853 39.2973 7.78853C41.2482 7.78853 38.9722 5.50507 37.6716 4.52961C36.3709 3.55415 34.7349 1.99484 29.7659 2.32005C29.7659 3.90024 29.793 5.62622 29.7659 7.20921C29.7575 7.68961 29.9403 7.79035 30.3769 7.78849Z" stroke="white" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45.6816 16.3135C45.6816 17.9352 44.3669 19.2499 42.7451 19.2499C41.1233 19.2499 39.8086 17.9352 39.8086 16.3135C39.8086 14.6917 41.1233 13.377 42.7451 13.377C44.3669 13.377 45.6816 14.6917 45.6816 16.3135Z" stroke="white" stroke-width="1.5"/>
<path d="M14.9121 16.3135C14.9121 17.9352 13.5973 19.2499 11.9756 19.2499C10.3538 19.2499 9.03906 17.9352 9.03906 16.3135C9.03906 14.6917 10.3538 13.377 11.9756 13.377C13.5973 13.377 14.9121 14.6917 14.9121 16.3135Z" stroke="white" stroke-width="1.5"/>
</svg>
Expected:
Usage:
return SvgPicture.asset(
R.ORDER_CAR,
fit: BoxFit.cover,
colorFilter: _getColorFilter(color),
);
I have this problem using SVGs with flutter for web with the html renderer. The SVG in question is exported from Figma.
I have this same issue trying to rending Google Cloud SVGs. I clean with usvg to remove the styling (which isn't supported). But the masking prevents 3 lines from drawing
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="luminosity-noclip" x="4.64" y="4.19" width="14.73" height="12.76" filterUnits="userSpaceOnUse">
<feFlood color-interpolation-filters="sRGB" flood-color="#ffffff" flood-opacity="1" result="bg"/>
<feBlend color-interpolation-filters="sRGB" in="SourceGraphic" in2="bg" mode="normal" result="result2"/>
</filter>
<mask id="mask" maskUnits="userSpaceOnUse" x="4.64" y="4.19" width="14.73" height="12.76">
<g filter="url(#luminosity-noclip)">
<path fill="#000000" stroke="none" d="M 15.58 12.23 C 15.58 14.207179 13.9771805 15.809999 12 15.809999 C 10.02282 15.809999 8.42 14.207179 8.42 12.23 C 8.42 10.25282 10.02282 8.65 12 8.65 C 13.9771805 8.65 15.58 10.25282 15.58 12.23 Z"/>
</g>
</mask>
</defs>
<g>
<path fill="#669df6" stroke="none" d="M 20.689999 8.21 C 20.689999 9.159929 19.91993 9.93 18.97 9.93 C 18.02007 9.93 17.25 9.159929 17.25 8.21 C 17.25 7.2600703 18.02007 6.49 18.97 6.49 C 19.91993 6.49 20.689999 7.2600703 20.689999 8.21 Z"/>
<path fill="#669df6" stroke="none" d="M 6.75 8.21 C 6.75 9.15993 5.9799304 9.93 5.03 9.93 C 4.0800705 9.93 3.31 9.15993 3.3100004 8.21 C 3.31 7.2600703 4.0800705 6.49 5.03 6.49 C 5.9799304 6.49 6.75 7.2600703 6.75 8.21 Z"/>
<path fill="#669df6" stroke="none" d="M 13.72 20.28 C 13.72 21.22993 12.949929 22 12 22 C 11.050071 22 10.28 21.22993 10.28 20.28 C 10.28 19.33007 11.050071 18.560001 12 18.560001 C 12.949929 18.560001 13.72 19.33007 13.72 20.28 Z"/>
<g mask="url(#mask)">
<g transform="matrix(0.5 -0.87 0.87 0.5 -4.59 20.53)">
<path fill="#4285f4" stroke="none" d="M 14.69 10.22 L 16.279999 10.22 L 16.279999 18.26 L 14.69 18.26 Z"/>
</g>
<g transform="matrix(0.8660254 -0.5 0.5 0.8660254 -5.98 6.17)">
<path fill="#4285f4" stroke="none" d="M 4.49 13.45 L 12.53 13.45 L 12.53 15.04 L 4.49 15.04 Z"/>
</g>
<path fill="#4285f4" stroke="none" d="M 11.2 4.19 L 12.789999 4.19 L 12.789999 12.23 L 11.2 12.23 Z"/>
</g>
<path fill="#aecbfa" stroke="none" d="M 14.78 12.23 C 14.78 13.765351 13.535353 15.009999 12 15.009999 C 10.464648 15.009999 9.22 13.765351 9.22 12.23 C 9.22 10.694648 10.464648 9.45 12 9.45 C 13.535353 9.45 14.78 10.694648 14.78 12.23 Z"/>
<path fill="#aecbfa" stroke="none" d="M 7.22 16.25 C 7.2200007 17.459503 6.239504 18.44 5.03 18.44 C 3.8204963 18.44 2.84 17.459503 2.84 16.25 C 2.84 15.040495 3.8204963 14.06 5.03 14.06 C 6.239504 14.06 7.2200007 15.040495 7.22 16.25 Z"/>
<path fill="#aecbfa" stroke="none" d="M 21.16 16.25 C 21.16 16.830824 20.929268 17.38786 20.518564 17.798565 C 20.107859 18.209269 19.550823 18.44 18.97 18.44 C 18.389175 18.44 17.83214 18.209269 17.421434 17.798565 C 17.01073 17.38786 16.779999 16.830824 16.779999 16.25 C 16.779999 15.669176 17.01073 15.112141 17.421434 14.701436 C 17.83214 14.29073 18.389175 14.06 18.97 14.06 C 19.550823 14.06 20.107859 14.29073 20.518564 14.701436 C 20.929268 15.112141 21.16 15.669176 21.16 16.25 Z"/>
<path fill="#aecbfa" stroke="none" d="M 14.190001 4.19 C 14.190001 5.399504 13.209504 6.3800006 12 6.38 C 10.790496 6.3800006 9.809999 5.399504 9.809999 4.19 C 9.809999 2.9804964 10.790496 1.9999999 12 2 C 13.209504 1.9999999 14.190001 2.9804964 14.190001 4.19 Z"/>
</g>
</svg>
The original SVG can be found here: https://gcpicons.com/icons/pubsub
