flutter_svg
flutter_svg copied to clipboard
Gradient colors cannot be displayed
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>椭圆形备份</title>
<defs>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
<stop stop-color="#A67EFF" offset="0%"></stop>
<stop stop-color="#8792FF" offset="56.3986185%"></stop>
<stop stop-color="#44FF35" offset="100%"></stop>
</linearGradient>
</defs>
<g id="头像" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Apple-TV" transform="translate(-1116.000000, -1637.000000)" stroke="url(#linearGradient-1)" stroke-width="2">
<circle id="椭圆形备份" cx="1180" cy="1701" r="63"></circle>
</g>
</g>
</svg>
flutter_svg: ^1.1.0 flutter_svg: ^1.1.0 + 1
expected result :
actual effect :
The bug here is that when a gradient is specified on a group it's not getting inherited down to the shape(s).
You can work around this by putting the gradient directly on the circle
element in the example.
If it helps, this graphic should render correctly in the vector_graphics
package.
I'm not really understanding what you mean @dnfield :/ For me, the package also does not render colors. I'm not using basic SVG shapes, but paths. How could I modify my SVG to render the colors inside of Flutter?
<svg width="284" height="203" viewBox="0 0 284 203" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M114.603 63.8157C111.864 56.1167 109.109 48.3743 108.263 38.2513C108.089 36.8586 108 35.4398 108 34C108 33.7131 108.003 33.4272 108.01 33.1421C108.003 32.7097 108 32.2729 108 31.8318C108 30.4235 108.193 29.0903 108.558 27.832C111.46 11.999 125.329 7.57458e-07 142 1.48619e-06C158.671 2.21492e-06 172.54 11.999 175.442 27.832C175.807 29.0903 176 30.4235 176 31.8318C176 32.273 175.997 32.7097 175.989 33.1421C175.993 33.2969 175.996 33.4518 175.998 33.6069C175.999 33.7378 176 33.8688 176 34C176 35.4398 175.911 36.8586 175.737 38.2513C174.891 48.3743 172.136 56.1167 169.397 63.8157L169.396 63.8179C166.206 72.7852 163.036 81.6936 162.927 94.2356C162.811 107.706 166.251 117.93 169.631 127.975C172.254 135.77 174.841 143.458 175.701 152.471C175.898 153.953 176 155.464 176 157C176 157.246 175.997 157.491 175.992 157.736C175.997 158.073 176 158.413 176 158.755C176 159.671 175.904 160.552 175.718 161.4C173.561 178.099 159.287 191 142 191C124.713 191 110.439 178.099 108.282 161.4C108.096 160.552 108 159.671 108 158.755C108 158.413 108.003 158.073 108.008 157.736C108.003 157.491 108 157.246 108 157C108 155.464 108.102 153.953 108.299 152.471C109.159 143.458 111.746 135.77 114.369 127.975C117.749 117.93 121.189 107.706 121.072 94.2356C120.964 81.6936 117.794 72.7852 114.603 63.8179L114.603 63.8157Z"
fill="url(#paint0_linear_15_89)">
</path>
<path
d="M146.13 114.811C138.471 117.661 130.77 120.528 122.471 126.387C121.293 127.149 120.148 127.992 119.045 128.918C118.826 129.102 118.609 129.288 118.395 129.477C118.059 129.75 117.722 130.028 117.385 130.311C116.306 131.217 115.408 132.221 114.679 133.31C104.416 145.71 104.139 164.047 114.855 176.818C125.571 189.589 143.677 192.5 157.671 184.546C158.87 184.017 160.015 183.308 161.094 182.402C161.432 182.119 161.764 181.835 162.091 181.552C162.212 181.456 162.333 181.358 162.453 181.26C162.554 181.177 162.655 181.093 162.755 181.009C163.858 180.083 164.887 179.103 165.843 178.074C173.053 170.919 177.214 163.833 181.351 156.786L181.352 156.784C186.171 148.575 190.958 140.421 200.495 132.276C210.739 123.528 220.783 119.591 230.65 115.724C238.308 112.723 245.859 109.763 253.317 104.628C254.579 103.827 255.802 102.933 256.979 101.946C257.167 101.788 257.353 101.628 257.537 101.467C257.799 101.254 258.061 101.038 258.323 100.818C259.025 100.229 259.638 99.5885 260.168 98.9018C271.573 86.5149 272.281 67.2879 261.169 54.0455C250.058 40.8032 231 38.1614 216.821 47.2428C216.052 47.6452 215.315 48.138 214.613 48.7269C214.351 48.9466 214.093 49.1669 213.837 49.388C213.647 49.5413 213.457 49.6968 213.269 49.8548C212.093 50.8419 211 51.8915 209.992 52.995C203.64 59.4476 199.414 66.3705 195.128 73.3906C189.606 82.4367 183.985 91.6439 173.591 100.213C163.914 108.192 155.052 111.49 146.132 114.81L146.13 114.811Z"
fill="url(#paint1_linear_15_89)" />
<path
d="M101.673 155.786C105.81 162.833 109.971 169.919 117.181 177.074C118.137 178.103 119.166 179.083 120.269 180.009C120.489 180.193 120.71 180.374 120.933 180.552C121.26 180.836 121.592 181.119 121.93 181.402C123.009 182.308 124.154 183.017 125.353 183.546C139.347 191.5 157.453 188.589 168.169 175.818C178.885 163.047 178.608 144.71 168.345 132.31C167.616 131.221 166.718 130.217 165.639 129.311C165.302 129.028 164.965 128.75 164.629 128.477C164.513 128.375 164.396 128.273 164.278 128.172C164.179 128.087 164.079 128.002 163.979 127.918C162.876 126.992 161.731 126.149 160.553 125.387C152.254 119.528 144.553 116.661 136.894 113.811L136.892 113.81C127.972 110.49 119.11 107.192 109.433 99.2132C99.0387 90.644 93.4179 81.4368 87.8957 72.3906C83.6102 65.3705 79.3839 58.4476 73.0322 51.9951C72.0239 50.8916 70.9314 49.8419 69.7551 48.8548C69.5667 48.6968 69.3772 48.5413 69.1865 48.388C68.9311 48.167 68.6727 47.9466 68.4108 47.7269C67.709 47.138 66.9717 46.6452 66.2035 46.2428C52.0242 37.1614 32.9664 39.8033 21.8548 53.0456C10.7431 66.2879 11.4508 85.515 22.8564 97.9018C23.3861 98.5885 23.9995 99.229 24.7013 99.8179C24.9631 100.038 25.225 100.254 25.487 100.467C25.6711 100.628 25.8572 100.788 26.0455 100.946C27.2219 101.933 28.4453 102.827 29.7071 103.628C37.1646 108.763 44.7162 111.723 52.3738 114.724C62.2415 118.591 72.2848 122.528 82.5287 131.276C92.0664 139.421 96.8532 147.576 101.672 155.784L101.673 155.786Z"
fill="url(#paint2_linear_15_89)" />
<defs>
<linearGradient id="paint0_linear_15_89" x1="141.922" y1="11.5123" x2="141.922" y2="116.17"
gradientUnits="userSpaceOnUse">
<stop stop-color="#495BFF" />
<stop offset="0.864583" stop-color="#495BFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_15_89" x1="259.015" y1="56.0751" x2="174.656" y2="132.941"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FFF279" />
<stop offset="0.833333" stop-color="#FFF279" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear_15_89" x1="26.6938" y1="52.7789" x2="115.72" y2="128.729"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1ABB77" />
<stop offset="0.859375" stop-color="#1ABB77" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
@hey-nicolasklein I have solved it by setting the defs before the paths. Hope it helps!