flutter - 即使使用 svgcleaner 清洁后，Flutter 中的 SVG 也无法正确显示
问题描述
使用 svgcleaner 并将 svg 文件导入 Flutter 后，svg 图像没有出现。即使在运行 svgcleaner 之后，我通常也必须手动将条目从 cls-1 移动到内联，但是这一次，有许多 cls 条目（请参见下文），我不知道如何手动传输内联。请注意，清理后的 svg 图像可以通过浏览器正确显示。
下面是看起来相当简单的图像。
使用 svgcleaner 清洁之前的原始 SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="473.96" height="80.457" viewBox="0 0 473.96 80.457">
<defs>
<clipPath id="clip-path">
<path id="Rectangle_2784" d="M0 0H473.716V80.457H0z" class="cls-1" transform="translate(23)"/>
</clipPath>
<clipPath id="clip-path-2">
<path id="Rectangle_2769" d="M0 0H431.148V312.02H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-3">
<path id="Rectangle_2771" d="M0 0H247.613V181.818H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-4">
<path id="Rectangle_2772" d="M0 0H260.509V191.383H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-5">
<path id="Rectangle_2773" d="M0 0H32.624V25.451H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-6">
<path id="Rectangle_2774" d="M0 0H32.592V28.387H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-7">
<path id="Rectangle_2775" d="M0 0H26.313V22.409H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-9">
<path id="Rectangle_2777" d="M0 0H41.569V35.878H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-10">
<path id="Rectangle_2778" d="M0 0H40.217V33.31H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-11">
<path id="Rectangle_2779" d="M0 0H5.423V5.455H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-12">
<path id="Rectangle_2780" d="M0 0H5.423V5.454H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-14">
<path id="Rectangle_2782" d="M0 0H5.423V5.457H0z" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-15">
<path id="Rectangle_2783" d="M0 0H5.422V5.454H0z" class="cls-1"/>
</clipPath>
<style>
.cls-1{fill:none}.cls-24{mix-blend-mode:multiply;isolation:isolate}.cls-9{fill:#ef7111}.cls-14{fill:#fff}.cls-18{clip-path:url(#clip-path-7)}.cls-24{opacity:.35}.cls-26{clip-path:url(#clip-path-12)}
</style>
</defs>
<g id="banner_version2" transform="translate(0 -242.543)">
<g id="Group_6229">
<path id="Background" fill="#f77e0b" d="M0 0h473.96v80H0z" transform="translate(0 243)"/>
<g id="Group_6228" clip-path="url(#clip-path)" transform="translate(-22.755 242.543)">
<g id="Group_6187" opacity="0.68" transform="translate(-38.91 17.116)">
<g id="Group_6186">
<g id="Group_6185" clip-path="url(#clip-path-2)">
<path id="Path_2026" fill="#f88725" d="M431.15 176.644c0 92.354-137.219 190.9-231.89 190.9S0 344.572 0 252.218 61.565 55.531 156.237 55.531 431.15 84.29 431.15 176.644" transform="translate(0.002 -55.531)"/>
</g>
</g>
</g>
<g id="Group_6193" transform="translate(150.143 -131.347)" style="mix-blend-mode:multiply;isolation:isolate" opacity="0.227">
<g id="Group_6192" transform="translate(0 52.752)">
<g id="Group_6191" clip-path="url(#clip-path-3)">
<path id="Path_2028" d="M316.988 114.975C301.4 164.3 211.485 193.51 160.917 177.342S58.366 131.04 73.951 81.711s66.071-94.539 116.637-78.373 141.981 62.309 126.4 111.637" class="cls-9" transform="translate(-71.139 0)"/>
</g>
</g>
</g>
<g id="Group_6196" transform="translate(313.81 -124.219)" style="mix-blend-mode:multiply;isolation:isolate" opacity="0.349">
<g id="Group_6195" transform="translate(0 0)">
<g id="Group_6194" clip-path="url(#clip-path-4)">
<path id="Path_2029" d="M429.5 61.3c5.126 56.534-73.4 124.569-131.359 129.887S174.884 188.3 169.76 131.769 196.535 7.91 254.487 2.593 424.372 4.761 429.5 61.3" class="cls-9" transform="translate(-169.226 -1.171)"/>
</g>
</g>
</g>
<g id="Group_6198" opacity="0.13" transform="translate(70.65 19.542) rotate(11)">
<g id="Group_6197">
<g id="Mask_Group_5953" clip-path="url(#clip-path-5)">
<path id="Path_2030" d="M15.143 14.111C8.815 14.332 2.95 10.434.2 4.186a2.373 2.373 0 0 1 1.2-3.122A2.345 2.345 0 0 1 4.5 2.27c1.967 4.475 6.081 7.264 10.48 7.111s8.308-3.222 9.965-7.82A2.344 2.344 0 0 1 27.958.144a2.368 2.368 0 0 1 1.411 3.031C27.055 9.6 21.47 13.892 15.143 14.111" class="cls-14" transform="translate(1.629 11.331)"/>
<path id="Path_2031" d="M7.013 3.406A3.507 3.507 0 1 1 3.385 0a3.52 3.52 0 0 1 3.627 3.4" class="cls-14" transform="translate(0 0.89)"/>
<path id="Path_2032" d="M7.011 3.406A3.506 3.506 0 1 1 3.385 0 3.519 3.519 0 0 1 7.01 3.4" class="cls-14" transform="translate(25.611 0)"/>
</g>
</g>
</g>
<g id="Group_6201" opacity="0.18" transform="translate(123.694 21.899)">
<g id="Group_6200">
<g id="Group_6199" clip-path="url(#clip-path-6)">
<path id="Path_2033" d="M71.039 78.22c-5.815-2.171-9.681-7.9-9.851-14.595a2.3 2.3 0 1 1 4.6-.12 11.088 11.088 0 0 0 6.854 10.371 10.976 10.976 0 0 0 11.924-3.342 2.293 2.293 0 0 1 3.253-.155 2.33 2.33 0 0 1 .154 3.278C83.5 78.6 76.851 80.4 71.039 78.22" class="cls-14" transform="translate(-61.185 -50.747)"/>
<path id="Path_2034" d="M68.669 61.981a3.438 3.438 0 1 1-2.022-4.443 3.431 3.431 0 0 1 2.022 4.443" class="cls-14" transform="translate(-59.814 -57.321)"/>
<path id="Path_2035" d="M77.518 65.275a3.424 3.424 0 0 1-4.418 2.032 3.452 3.452 0 1 1 4.414-2.032" class="cls-14" transform="translate(-45.144 -51.808)"/>
</g>
</g>
</g>
<g id="Group_6204" opacity="0.237" transform="translate(177.572 49.953)">
<g id="Group_6203">
<g id="Group_6202" class="cls-18">
<path id="Path_2036" d="M95.665 78.1a12.939 12.939 0 0 1-13.343-5.892 1.937 1.937 0 0 1 .539-2.671 1.9 1.9 0 0 1 2.652.54 8.741 8.741 0 0 0 16.3-3.4 1.913 1.913 0 1 1 3.766.679A13.011 13.011 0 0 1 95.665 78.1" class="cls-14" transform="translate(-79.296 -55.944)"/>
<path id="Path_2037" d="M86.636 65.549a2.856 2.856 0 1 1-3.375-2.224 2.875 2.875 0 0 1 3.375 2.224" class="cls-14" transform="translate(-80.985 -59.005)"/>
<path id="Path_2038" d="M94.316 63.959a2.855 2.855 0 1 1-3.375-2.227 2.872 2.872 0 0 1 3.375 2.227" class="cls-14" transform="translate(-68.25 -61.671)"/>
</g>
</g>
</g>
<g id="Group_6206" opacity="0.24" transform="matrix(0.799, 0.602, -0.602, 0.799, 376.769, 32.922)">
<g id="Group_6205">
<g id="Mask_Group_5954" class="cls-18">
<path id="Path_2039" d="M13.661 13.008A12.939 12.939 0 0 1 .318 7.116a1.937 1.937 0 0 1 .539-2.671 1.9 1.9 0 0 1 2.652.54 9.135 9.135 0 0 0 9.376 4.251 9.2 9.2 0 0 0 6.923-7.649 1.913 1.913 0 1 1 3.766.679 13.011 13.011 0 0 1-9.913 10.742" class="cls-14" transform="translate(2.708 9.15)"/>
<path id="Path_2040" d="M5.651 2.285A2.856 2.856 0 1 1 .06 3.454a2.856 2.856 0 1 1 5.591-1.169" class="cls-14" transform="translate(0 4.259)"/>
<path id="Path_2041" d="M5.648 2.288A2.855 2.855 0 1 1 .06 3.454a2.855 2.855 0 1 1 5.588-1.166" class="cls-14" transform="translate(20.418 0.001)"/>
</g>
</g>
</g>
<g id="Group_6209" opacity="0.18" transform="translate(83.684 55.007)">
<g id="Group_6208">
<g id="Group_6207" clip-path="url(#clip-path-9)">
<path id="Path_2042" d="M69.907 96.053c-7.832 2.032-16.219-1.2-21.364-8.226a3.032 3.032 0 0 1 .638-4.224 2.988 2.988 0 0 1 4.2.642c3.683 5.032 9.583 7.368 15.028 5.954s9.477-6.331 10.279-12.525a3 3 0 1 1 5.958.781c-1.119 8.657-6.907 15.565-14.739 17.6" class="cls-14" transform="translate(-43.103 -60.776)"/>
<path id="Path_2043" d="M54.95 76.164a4.482 4.482 0 1 1-5.459-3.238 4.511 4.511 0 0 1 5.459 3.238" class="cls-14" transform="translate(-46.132 -64.551)"/>
<path id="Path_2044" d="M66.879 73.086a4.482 4.482 0 1 1-5.459-3.238 4.513 4.513 0 0 1 5.459 3.238" class="cls-14" transform="translate(-26.36 -69.704)"/>
</g>
</g>
</g>
<g id="Group_6212" opacity="0.208" transform="translate(313.792 50.136)">
<g id="Group_6211">
<g id="Group_6210" clip-path="url(#clip-path-10)">
<path id="Path_2045" d="M39.016 93.156c-7.786 1.131-15.552-2.882-19.782-10.226a2.947 2.947 0 0 1 1.06-4.016 2.91 2.91 0 0 1 3.992 1.067c3.03 5.256 8.483 8.144 13.9 7.357s9.828-5.109 11.255-11.012a2.912 2.912 0 0 1 3.527-2.16 2.943 2.943 0 0 1 2.15 3.55c-1.993 8.248-8.313 14.309-16.1 15.44" class="cls-14" transform="translate(-15.455 -60.034)"/>
<path id="Path_2046" d="M26.231 74.3a4.356 4.356 0 1 1-4.931-3.716 4.375 4.375 0 0 1 4.931 3.716" class="cls-14" transform="translate(-17.565 -65.962)"/>
<path id="Path_2047" d="M38.087 72.584a4.356 4.356 0 1 1-4.932-3.711 4.375 4.375 0 0 1 4.932 3.711" class="cls-14" transform="translate(2.085 -68.827)"/>
</g>
</g>
</g>
<g id="Group_6215" class="cls-24" transform="translate(68.411 60.721)">
<g id="Group_6214">
<g id="Group_6213" clip-path="url(#clip-path-11)">
<path id="Path_2048" d="M45.807 74.568a2.712 2.712 0 1 1-2.713-2.727 2.721 2.721 0 0 1 2.713 2.727" class="cls-9" transform="translate(-40.384 -71.841)"/>
</g>
</g>
</g>
<g id="Group_6218" class="cls-24" transform="translate(13.772 20.447)">
<g id="Group_6217">
<g id="Group_6216" class="cls-26">
<path id="Path_2049" d="M25.25 59.5a2.713 2.713 0 1 1-2.716-2.727A2.725 2.725 0 0 1 25.25 59.5" class="cls-9" transform="translate(-19.824 -56.777)"/>
</g>
</g>
</g>
<g id="Group_6221" class="cls-24" transform="translate(127.198 9.208)">
<g id="Group_6220">
<g id="Group_6219" class="cls-26">
<path id="Path_2050" d="M67.926 55.3a2.711 2.711 0 1 1-2.713-2.73 2.721 2.721 0 0 1 2.713 2.73" class="cls-9" transform="translate(-62.504 -52.575)"/>
</g>
</g>
</g>
<g id="Group_6224" class="cls-24" transform="translate(173.597 25.238)">
<g id="Group_6223" transform="translate(0)">
<g id="Group_6222" clip-path="url(#clip-path-14)">
<path id="Path_2051" d="M85.388 61.3a2.712 2.712 0 1 1-2.713-2.727 2.723 2.723 0 0 1 2.713 2.727" class="cls-9" transform="translate(-79.965 -58.569)"/>
</g>
</g>
</g>
<g id="Group_6227" class="cls-24" transform="translate(162.452 58.897)">
<g id="Group_6226">
<g id="Group_6225" clip-path="url(#clip-path-15)">
<path id="Path_2052" d="M81.194 73.886a2.712 2.712 0 1 1-2.713-2.727 2.723 2.723 0 0 1 2.713 2.727" class="cls-9" transform="translate(-75.771 -71.159)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
使用 SVGCLEANER 清洁后：
<svg height="80.457" viewBox="0 0 473.96 80.457" width="473.96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h473.716v80.457h-473.716z" transform="translate(23)"/></clipPath><clipPath id="b"><path d="m0 0h431.148v312.02h-431.148z"/></clipPath><clipPath id="c"><path d="m0 0h247.613v181.818h-247.613z"/></clipPath><clipPath id="d"><path d="m0 0h260.509v191.383h-260.509z"/></clipPath><clipPath id="e"><path d="m0 0h32.624v25.451h-32.624z"/></clipPath><clipPath id="f"><path d="m0 0h32.592v28.387h-32.592z"/></clipPath><clipPath id="g"><path d="m0 0h26.313v22.409h-26.313z"/></clipPath><clipPath id="h"><path d="m0 0h41.569v35.878h-41.569z"/></clipPath><clipPath id="i"><path d="m0 0h40.217v33.31h-40.217z"/></clipPath><clipPath id="j"><path d="m0 0h5.423v5.455h-5.423z"/></clipPath><clipPath id="k"><path d="m0 0h5.423v5.454h-5.423z"/></clipPath><clipPath id="l"><path d="m0 0h5.423v5.457h-5.423z"/></clipPath><clipPath id="m"><path d="m0 0h5.422v5.454h-5.422z"/></clipPath><path d="m0 0h473.96v80h-473.96z" fill="#f77e0b" transform="translate(0 .457)"/><g clip-path="url(#a)" transform="translate(-22.755)"><g clip-path="url(#b)" opacity=".68" transform="translate(-38.91 17.116)"><path d="m431.15 176.644c0 92.354-137.219 190.9-231.89 190.9s-199.26-22.972-199.26-115.326 61.565-196.687 156.237-196.687 274.913 28.759 274.913 121.113" fill="#f88725" transform="translate(.002 -55.531)"/></g><g clip-path="url(#c)" opacity=".227" transform="translate(150.143 -78.595)"><path d="m316.988 114.975c-15.588 49.325-105.503 78.535-156.071 62.367s-102.551-46.302-86.966-95.631 66.071-94.539 116.637-78.373 141.981 62.309 126.4 111.637" fill="#ef7111" transform="translate(-71.139)"/></g><g clip-path="url(#d)" opacity=".349" transform="translate(313.81 -124.219)"><path d="m429.5 61.3c5.126 56.534-73.4 124.569-131.359 129.887s-123.257-2.887-128.381-59.418 26.775-123.859 84.727-129.176 169.885 2.168 175.013 58.707" fill="#ef7111" transform="translate(-169.226 -1.171)"/></g><g fill="#fff"><g clip-path="url(#e)" opacity=".13" transform="matrix(.98162718 .190809 -.190809 .98162718 70.65 19.542)"><path d="m15.143 14.111c-6.328.221-12.193-3.677-14.943-9.925a2.373 2.373 0 0 1 1.2-3.122 2.345 2.345 0 0 1 3.1 1.206c1.967 4.475 6.081 7.264 10.48 7.111s8.308-3.222 9.965-7.82a2.344 2.344 0 0 1 3.013-1.417 2.368 2.368 0 0 1 1.411 3.031c-2.314 6.425-7.899 10.717-14.226 10.936" transform="translate(1.629 11.331)"/><path d="m7.013 3.406a3.507 3.507 0 1 1 -3.628-3.406 3.52 3.52 0 0 1 3.627 3.4" transform="translate(0 .89)"/><path d="m7.011 3.406a3.506 3.506 0 1 1 -3.626-3.406 3.519 3.519 0 0 1 3.625 3.4" transform="translate(25.611)"/></g><g clip-path="url(#f)" opacity=".18" transform="translate(123.694 21.899)"><path d="m71.039 78.22c-5.815-2.171-9.681-7.9-9.851-14.595a2.3 2.3 0 1 1 4.6-.12 11.088 11.088 0 0 0 6.854 10.371 10.976 10.976 0 0 0 11.924-3.342 2.293 2.293 0 0 1 3.253-.155 2.33 2.33 0 0 1 .154 3.278c-4.473 4.943-11.122 6.743-16.934 4.563" transform="translate(-61.185 -50.747)"/><path d="m68.669 61.981a3.438 3.438 0 1 1 -2.022-4.443 3.431 3.431 0 0 1 2.022 4.443" transform="translate(-59.814 -57.321)"/><path d="m77.518 65.275a3.424 3.424 0 0 1 -4.418 2.032 3.452 3.452 0 1 1 4.414-2.032" transform="translate(-45.144 -51.808)"/></g><g clip-path="url(#g)" opacity=".237" transform="translate(177.572 49.953)"><path d="m95.665 78.1a12.939 12.939 0 0 1 -13.343-5.892 1.937 1.937 0 0 1 .539-2.671 1.9 1.9 0 0 1 2.652.54 8.741 8.741 0 0 0 16.3-3.4 1.913 1.913 0 1 1 3.766.679 13.011 13.011 0 0 1 -9.914 10.744" transform="translate(-79.296 -55.944)"/><path d="m86.636 65.549a2.856 2.856 0 1 1 -3.375-2.224 2.875 2.875 0 0 1 3.375 2.224" transform="translate(-80.985 -59.005)"/><path d="m94.316 63.959a2.855 2.855 0 1 1 -3.375-2.227 2.872 2.872 0 0 1 3.375 2.227" transform="translate(-68.25 -61.671)"/></g><g clip-path="url(#g)" opacity=".24" transform="matrix(.799 .602 -.602 .799 376.769 32.922)"><path d="m13.661 13.008a12.939 12.939 0 0 1 -13.343-5.892 1.937 1.937 0 0 1 .539-2.671 1.9 1.9 0 0 1 2.652.54 9.135 9.135 0 0 0 9.376 4.251 9.2 9.2 0 0 0 6.923-7.649 1.913 1.913 0 1 1 3.766.679 13.011 13.011 0 0 1 -9.913 10.742" transform="translate(2.708 9.15)"/><path d="m5.651 2.285a2.856 2.856 0 1 1 -5.591 1.169 2.856 2.856 0 1 1 5.591-1.169" transform="translate(0 4.259)"/><path d="m5.648 2.288a2.855 2.855 0 1 1 -5.588 1.166 2.855 2.855 0 1 1 5.588-1.166" transform="translate(20.418 .001)"/></g><g clip-path="url(#h)" opacity=".18" transform="translate(83.684 55.007)"><path d="m69.907 96.053c-7.832 2.032-16.219-1.2-21.364-8.226a3.032 3.032 0 0 1 .638-4.224 2.988 2.988 0 0 1 4.2.642c3.683 5.032 9.583 7.368 15.028 5.954s9.477-6.331 10.279-12.525a3 3 0 1 1 5.958.781c-1.119 8.657-6.907 15.565-14.739 17.6" transform="translate(-43.103 -60.776)"/><path d="m54.95 76.164a4.482 4.482 0 1 1 -5.459-3.238 4.511 4.511 0 0 1 5.459 3.238" transform="translate(-46.132 -64.551)"/><path d="m66.879 73.086a4.482 4.482 0 1 1 -5.459-3.238 4.513 4.513 0 0 1 5.459 3.238" transform="translate(-26.36 -69.704)"/></g><g clip-path="url(#i)" opacity=".208" transform="translate(313.792 50.136)"><path d="m39.016 93.156c-7.786 1.131-15.552-2.882-19.782-10.226a2.947 2.947 0 0 1 1.06-4.016 2.91 2.91 0 0 1 3.992 1.067c3.03 5.256 8.483 8.144 13.9 7.357s9.828-5.109 11.255-11.012a2.912 2.912 0 0 1 3.527-2.16 2.943 2.943 0 0 1 2.15 3.55c-1.993 8.248-8.313 14.309-16.1 15.44" transform="translate(-15.455 -60.034)"/><path d="m26.231 74.3a4.356 4.356 0 1 1 -4.931-3.716 4.375 4.375 0 0 1 4.931 3.716" transform="translate(-17.565 -65.962)"/><path d="m38.087 72.584a4.356 4.356 0 1 1 -4.932-3.711 4.375 4.375 0 0 1 4.932 3.711" transform="translate(2.085 -68.827)"/></g></g><g clip-path="url(#j)" opacity=".35" transform="translate(68.411 60.721)"><path d="m45.807 74.568a2.712 2.712 0 1 1 -2.713-2.727 2.721 2.721 0 0 1 2.713 2.727" fill="#ef7111" transform="translate(-40.384 -71.841)"/></g><g clip-path="url(#k)" opacity=".35" transform="translate(13.772 20.447)"><path d="m25.25 59.5a2.713 2.713 0 1 1 -2.716-2.727 2.725 2.725 0 0 1 2.716 2.727" fill="#ef7111" transform="translate(-19.824 -56.777)"/></g><g clip-path="url(#k)" opacity=".35" transform="translate(127.198 9.208)"><path d="m67.926 55.3a2.711 2.711 0 1 1 -2.713-2.73 2.721 2.721 0 0 1 2.713 2.73" fill="#ef7111" transform="translate(-62.504 -52.575)"/></g><g clip-path="url(#l)" opacity=".35" transform="translate(173.597 25.238)"><path d="m85.388 61.3a2.712 2.712 0 1 1 -2.713-2.727 2.723 2.723 0 0 1 2.713 2.727" fill="#ef7111" transform="translate(-79.965 -58.569)"/></g><g clip-path="url(#m)" opacity=".35" transform="translate(162.452 58.897)"><path d="m81.194 73.886a2.712 2.712 0 1 1 -2.713-2.727 2.723 2.723 0 0 1 2.713 2.727" fill="#ef7111" transform="translate(-75.771 -71.159)"/></g></g></svg>
请帮忙。
解决方案
对于那些可能遇到同样情况的人。我发现的唯一解决方案是必须将原始 SVG 导出为“内联”。否则，任何快速修复都不会奏效。
推荐阅读
- java - 无法在 SQL Server Profiler 中查看已执行的 SQL 语句
- c# - 在没有用户的情况下访问 GraphAPI 时在邮箱文件夹上创建订阅所需的权限
- xamarin - 如何检测 Xamarin 表单中的 Internet 连接？
- alexa - 亚马逊 Alexa 技能启用设备上的卡片没有屏幕
- java - java中的处理代码可以作为gui应用程序在处理ide之外运行吗？
- quickfix - 如何使用 quickFix/n 包中的 FIXT11 功能
- laravel - 如何将 laravel 表单删除转换为字符串以在返回控制器上使用它？
- amazon-web-services - 跨不同区域路由来自多个 VPC 的传出流量
- xml - 我有一个包含多条记录的大型 xml 文件。我想使用 postgresql 查询将记录一一获取为单独的 xml 文件
- button - Xamarin.Forms 按钮在触摸后变为禁用