Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

complex svg color bug #143

Open
ghost opened this issue Nov 29, 2019 · 1 comment
Open

complex svg color bug #143

ghost opened this issue Nov 29, 2019 · 1 comment

Comments

@ghost
Copy link

ghost commented Nov 29, 2019

Tested both as svg element and background image, without style:
image

with style:
image

stuff.svg

<svg width="187" height="100" viewBox="0 0 187 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="189" height="100">
<rect width="189" height="100" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path d="M212.828 -136.714H-411.232V214.922H212.828V-136.714Z" fill="#144DC2"/>
<path d="M144.878 31.4793L127.14 24.1484C127.14 24.1484 121.856 21.3828 118.206 27.7088C114.556 34.0348 91.5831 77.5035 91.5831 77.5035L93.2503 83.4738L87.6634 84.0612L59.1876 131.373C59.1876 131.373 53.8803 137.625 62.0957 141.946C70.3112 146.268 82.4022 152.317 82.4022 152.317L144.878 31.4793Z" fill="url(#paint0_linear)"/>
<path d="M131.612 50.255L119.751 45.1193L113.585 56.7481L125.385 61.9693" stroke="#45C1F1" stroke-width="1.46309" stroke-miterlimit="10"/>
<path d="M118.023 83.4848L104.255 76.9567L92.231 99.4818L103.879 105.397" stroke="#45C1F1" stroke-width="1.46309" stroke-miterlimit="10"/>
<path d="M100.068 84.4013L112.987 90.16" stroke="#45C1F1" stroke-width="1.46309" stroke-miterlimit="10"/>
<path d="M96.3425 91.7294L109.262 97.4881" stroke="#45C1F1" stroke-width="1.46309" stroke-miterlimit="10"/>
<path d="M361.864 120.725C361.864 120.725 332.319 104.898 322.139 100.907C311.959 96.9164 289.12 81.6944 266.987 73.177C244.853 64.6597 157.758 16.789 151.511 14.1019C145.264 11.4148 143.809 16.9151 142.016 20.2065C140.223 23.4978 135.157 35.9145 131.645 40.6209C128.134 45.3273 116.043 74.3147 109.59 86.7532C103.137 99.1917 79.5391 144.731 74.9722 148.284C74.9722 148.284 73.254 150.136 77.4959 151.799C77.4959 151.799 73.1705 161.518 70.9917 164.578C68.813 167.639 68.1733 169.002 70.0503 169.949C71.9273 170.897 89.2322 179.32 94.8888 182.702C100.545 186.083 122.955 197.427 126.772 198.923L365.748 138.753L361.864 120.725Z" fill="white"/>
<path opacity="0.19" d="M77.4632 151.817C73.2223 150.154 74.9396 148.302 74.9396 148.302C79.5065 144.749 103.104 99.2109 109.557 86.7724C116.01 74.3339 128.101 45.3472 131.612 40.6401C135.124 35.933 140.19 23.5156 141.983 20.2242C143.775 16.9328 145.231 11.4327 151.478 14.1197C157.725 16.8067 244.82 64.6763 266.954 73.1941C289.088 81.712 311.926 96.9341 322.107 100.925C332.287 104.915 361.832 120.742 361.832 120.742L365.716 138.771L155.963 191.583L77.4632 151.817Z" fill="url(#paint1_linear)"/>
<path d="M228.857 143.111C199.36 139.086 142.693 98.2192 123.032 58.1158C126.835 49.7847 130.201 42.6363 131.796 40.4978C135.308 35.7914 140.374 23.3735 142.167 20.0833C143.96 16.7931 145.415 11.2918 151.662 13.9788C157.909 16.6658 245.003 64.5343 267.137 73.0521C289.271 81.57 312.11 96.7921 322.29 100.782C332.47 104.772 362.015 120.601 362.015 120.601L365.899 138.629L259.043 165.533C257.209 157.961 250.799 146.105 228.857 143.111Z" fill="url(#paint2_linear)"/>
<path opacity="0.14" d="M138.846 81.9827L165.452 143.476L229.738 200.761L265.648 157.915L138.846 81.9827Z" fill="url(#paint3_linear)"/>
<path d="M223.77 -57.8148L140.137 73.0182C140.137 73.0182 133.105 81.7574 140.266 86.4845C147.427 91.2116 200.828 126.12 200.828 126.12L252.989 160.716C252.989 160.716 260.128 163.814 263.694 160.244C265.741 158.195 273.914 145.493 273.914 145.493L335.326 49.2433L223.77 -57.8148Z" fill="#F92323"/>
<path d="M210.874 83.5293C245.462 102.799 260 68.5777 257.082 57.6607C254.163 46.7437 262.523 27.4485 287.642 36.5326C305.349 42.9365 314.185 36.5042 317.859 32.1507L224.019 -57.9055L140.386 72.9276C140.386 72.9276 133.355 81.6668 140.515 86.3939C143.422 88.3131 153.95 95.2062 165.432 102.718C171.11 90.6112 185.318 69.2922 210.874 83.5293Z" fill="url(#paint4_linear)"/>
<path d="M211.991 130.722L144.741 86.2335C144.741 86.2335 139.553 83.173 141.643 79.9875C143.727 76.812 147.193 78.4373 149.104 79.6795C150.361 80.496 265.647 157.914 265.647 157.914C265.647 157.914 264.81 159.125 263.414 160.522C262.018 161.919 259.132 162.014 259.132 162.014L211.991 130.722Z" fill="white"/>
<path opacity="0.54" d="M183.738 102.947L193.538 118.542L259.132 162.013C259.132 162.013 261.831 161.919 263.32 160.614C264.809 159.31 265.646 157.913 265.646 157.913C265.646 157.913 208.02 119.252 183.738 102.947Z" fill="url(#paint5_linear)"/>
<path d="M230.568 -51.51L154.935 67.9142C154.935 67.9142 154.026 69.3093 155.058 70.0978C156.09 70.8862 156.756 69.0049 156.756 69.0049L232.194 -50.4839L230.568 -51.51Z" fill="#D10D0D"/>
<path d="M97.8777 62.0435L78.2366 88.7693L15.3137 128.578L10.2199 114.589L97.8777 62.0435Z" fill="url(#paint6_linear)" fill-opacity="0.4"/>
<path d="M97.6992 62.0557L69.991 71.7788L8.30579 110.058L13.528 125.411L78.8178 84.1351L97.6992 62.0557Z" fill="white"/>
<path d="M90.8538 66.9193C91.2772 67.719 91.4948 68.6115 91.487 69.5163L97.8777 62.0435L88.7341 65.2521C89.6309 65.5105 90.3914 66.1086 90.8538 66.9193Z" fill="#F92323"/>
<path d="M78.4664 84.4361C78.4664 84.4361 80.3644 81.7821 76.9158 76.2445C73.6211 70.9553 69.6415 72.0786 69.6415 72.0786L2.83013 113.448L13.1794 125.712L78.4664 84.4361Z" fill="#F92323"/>
<path d="M34.3653 104.697C39.9339 95.4223 55.1204 98.6435 59.269 87.1673C62.0584 79.4502 71.5143 77.506 77.4097 77.0601C77.2846 76.8408 77.1543 76.6181 77.0113 76.3883C73.7166 71.0991 69.7367 72.2225 69.7367 72.2225L2.83017 113.448L10.0476 116.369C17.7597 111.274 30.0351 111.91 34.3653 104.697Z" fill="url(#paint7_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="115.21" y1="92.675" x2="84.3433" y2="79.1258" gradientUnits="userSpaceOnUse">
<stop offset="0.052" stop-color="#00F8A4"/>
<stop offset="0.059" stop-color="#09F8A7"/>
<stop offset="0.097" stop-color="#37F9B7"/>
<stop offset="0.14" stop-color="#62FAC7"/>
<stop offset="0.186" stop-color="#87FBD4"/>
<stop offset="0.237" stop-color="#A8FCE0"/>
<stop offset="0.292" stop-color="#C3FDE9"/>
<stop offset="0.355" stop-color="#D9FDF1"/>
<stop offset="0.429" stop-color="#EAFEF7"/>
<stop offset="0.519" stop-color="#F6FEFB"/>
<stop offset="0.647" stop-color="#FDFEFE"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="68.0982" y1="123.596" x2="344.996" y2="53.8781" gradientUnits="userSpaceOnUse">
<stop offset="0.052" stop-color="#00F8A4"/>
<stop offset="0.161" stop-color="#00F8A4" stop-opacity="0.78"/>
<stop offset="0.277" stop-color="#00F8A4" stop-opacity="0.576"/>
<stop offset="0.396" stop-color="#00F8A4" stop-opacity="0.4"/>
<stop offset="0.516" stop-color="#00F8A4" stop-opacity="0.255"/>
<stop offset="0.635" stop-color="#00F8A4" stop-opacity="0.141"/>
<stop offset="0.755" stop-color="#00F8A4" stop-opacity="0.063"/>
<stop offset="0.876" stop-color="#00F8A4" stop-opacity="0.016"/>
<stop offset="1" stop-color="#00F8A4" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="345.18" y1="53.7369" x2="135.239" y2="106.596" gradientUnits="userSpaceOnUse">
<stop stop-color="#00F8A4" stop-opacity="0.4"/>
<stop offset="0.015" stop-color="#00F8A4" stop-opacity="0.388"/>
<stop offset="0.205" stop-color="#00F8A4" stop-opacity="0.247"/>
<stop offset="0.398" stop-color="#00F8A4" stop-opacity="0.141"/>
<stop offset="0.593" stop-color="#00F8A4" stop-opacity="0.063"/>
<stop offset="0.792" stop-color="#00F8A4" stop-opacity="0.016"/>
<stop offset="1" stop-color="#00F8A4" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="225.49" y1="143.811" x2="214.92" y2="68.1489" gradientUnits="userSpaceOnUse">
<stop stop-color="#E3A5D6" stop-opacity="0"/>
<stop offset="0.121" stop-color="#B08FD0" stop-opacity="0.161"/>
<stop offset="0.281" stop-color="#7877CB" stop-opacity="0.337"/>
<stop offset="0.445" stop-color="#4C64C6" stop-opacity="0.475"/>
<stop offset="0.612" stop-color="#2C57C3" stop-opacity="0.573"/>
<stop offset="0.783" stop-color="#1A4FC1" stop-opacity="0.631"/>
<stop offset="0.965" stop-color="#144DC1" stop-opacity="0.651"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="167.948" y1="-1.7672" x2="259.998" y2="90.1738" gradientUnits="userSpaceOnUse">
<stop stop-color="#F92323" stop-opacity="0.071"/>
<stop offset="0.02" stop-color="#F92423" stop-opacity="0.114"/>
<stop offset="0.123" stop-color="#F92D23" stop-opacity="0.322"/>
<stop offset="0.231" stop-color="#F93423" stop-opacity="0.502"/>
<stop offset="0.342" stop-color="#F93A23" stop-opacity="0.655"/>
<stop offset="0.456" stop-color="#F94023" stop-opacity="0.78"/>
<stop offset="0.574" stop-color="#F94323" stop-opacity="0.878"/>
<stop offset="0.699" stop-color="#F94623" stop-opacity="0.945"/>
<stop offset="0.834" stop-color="#F94823" stop-opacity="0.988"/>
<stop offset="1" stop-color="#F94923"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="186.571" y1="100.111" x2="230.384" y2="143.872" gradientUnits="userSpaceOnUse">
<stop stop-color="#E3A5D6" stop-opacity="0"/>
<stop offset="0.121" stop-color="#B08FD0" stop-opacity="0.161"/>
<stop offset="0.281" stop-color="#7877CB" stop-opacity="0.337"/>
<stop offset="0.445" stop-color="#4C64C6" stop-opacity="0.475"/>
<stop offset="0.612" stop-color="#2C57C3" stop-opacity="0.573"/>
<stop offset="0.783" stop-color="#1A4FC1" stop-opacity="0.631"/>
<stop offset="0.965" stop-color="#144DC1" stop-opacity="0.651"/>
</linearGradient>
<linearGradient id="paint6_linear" x1="9.15171" y1="111.449" x2="103.739" y2="79.2753" gradientUnits="userSpaceOnUse">
<stop stop-color="#144DC1" stop-opacity="0"/>
<stop offset="0.044" stop-color="#1649BB" stop-opacity="0.102"/>
<stop offset="0.18" stop-color="#1E3EAC" stop-opacity="0.376"/>
<stop offset="0.321" stop-color="#25369F" stop-opacity="0.6"/>
<stop offset="0.469" stop-color="#2A2F95" stop-opacity="0.776"/>
<stop offset="0.625" stop-color="#2E2A8E" stop-opacity="0.902"/>
<stop offset="0.793" stop-color="#30278A" stop-opacity="0.976"/>
<stop offset="1" stop-color="#312789"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="6.41303" y1="105.683" x2="78.7737" y2="81.0702" gradientUnits="userSpaceOnUse">
<stop stop-color="#F92323" stop-opacity="0.071"/>
<stop offset="0.02" stop-color="#F92423" stop-opacity="0.114"/>
<stop offset="0.123" stop-color="#F92D23" stop-opacity="0.322"/>
<stop offset="0.231" stop-color="#F93423" stop-opacity="0.502"/>
<stop offset="0.342" stop-color="#F93A23" stop-opacity="0.655"/>
<stop offset="0.456" stop-color="#F94023" stop-opacity="0.78"/>
<stop offset="0.574" stop-color="#F94323" stop-opacity="0.878"/>
<stop offset="0.699" stop-color="#F94623" stop-opacity="0.945"/>
<stop offset="0.834" stop-color="#F94823" stop-opacity="0.988"/>
<stop offset="1" stop-color="#F94923"/>
</linearGradient>
</defs>
</svg>
@DanielRuf
Copy link
Contributor

Hi @tchret, please describe exactly the issue so we can reproduce it.

In general what ReLaXed does it rendering the files and printing it using puppeteer.
So this is likely an issue with the svg or a dependency (eg puppeteer).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant