如何将彩虹线性渐变滤镜应用于 SVG？

Question

I have an SVG of a chair that has multiple paths grouped by a <g> tag. The SVG is its own file and is linked to within the php file.

PHP

<img src="svgs/logoChair.svg" alt="logo">

I'm trying to apply a filter over the top of the entire SVG to create one coherent rainbow. What I have right now is one rainbow per path. Originally, I used an online tool to convert an image into an SVG so most of this code is from the converter.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="47.24 11 155.66 150.66"> <defs> <linearGradient id="gradient"> <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/> <stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/> <stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/> <stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/> <stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/> <stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/> <stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/> <stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/> <stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/> <stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/> <stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> </linearGradient> </defs> <g fill="url(#gradient)" transform="translate(25.000000,130.000000) scale(0.05,-0.05)"> <path d="M622 2371 c-143 -49 -189 -196 -114 -367 30 -67 31 -73 21 -135 -9 -54 -7 -88 14 -222 14 -87 27 -160 28 -161 2 -2 60 -8 129 -14 94 -7 147 -18 213 -40 118 -41 162 -69 235 -146 l61 -66 126 0 125 0 0 41 c0 23 -12 93 -26 156 -14 63 -24 117 -21 119 2 2 38 0 80 -6 123 -15 233 -68 328 -157 l48 -44 -16 -52 c-21 -74 -24 -76 -85 -64 -37 8 -92 7 -188 -1 -74 -7 -192 -12 -261 -12 l-125 0 -43 -94 c-24 -52 -59 -113 -77 -135 -40 -46 -50 -39 86 -65 132 -26 153 -27 255 -16 104 11 339 61 510 109 94 26 100 29 103 55 6 46 -16 83 -62 106 -23 11 -47 20 -54 20 -21 0 -22 19 -1 67 43 98 43 89 -7 143 -26 28 -67 63 -92 80 -69 45 -221 91 -326 99 l-89 6 -27 86 c-16 48 -44 177 -65 288 -42 236 -54 279 -91 332 -26 37 -125 109 -151 109 -6 0 3 -22 22 -50 51 -75 58 -109 52 -229 -3 -58 -10 -118 -16 -134 l-11 -28 -152 3 -153 3 -6 150 c-6 154 -14 193 -52 233 -43 46 -67 52 -125 33z"/> <path d="M744 2360 c54 -48 68 -96 74 -252 l5 -138 142 0 142 0 11 83 c7 45 12 98 12 117 -1 48 -29 120 -67 175 l-33 45 -160 0 -161 0 35 -30z"/> <path d="M666 1450 c160 -11 277 -60 406 -171 51 -44 98 -63 98 -40 0 5 -30 36 -66 69 -53 50 -81 66 -152 92 -130 47 -197 60 -302 58 l-95 -1 111 -7z"/> <path d="M580 1429 c0 -13 44 -265 56 -321 l5 -26 42 24 c60 35 246 93 337 106 59 8 77 14 73 24 -9 24 -126 106 -199 140 -81 38 -127 50 -236 59 -63 6 -78 5 -78 -6z"/> <path d="M1002 1189 c-35 -4 -80 -13 -100 -20 -69 -21 -252 -102 -252 -110 0 -5 1 -9 3 -9 1 0 52 -7 112 -15 61 -8 147 -15 193 -15 l83 0 24 53 c12 29 28 70 33 90 12 42 17 41 -96 26z"/> <path d="M1111 1154 c-19 -77 -58 -143 -87 -150 -25 -6 -275 11 -324 23 -14 3 -22 3 -19 -1 14 -15 217 -67 282 -73 84 -7 93 0 152 117 60 119 62 130 32 130 -21 0 -26 -7 -36 -46z"/> </g> </svg>

I tried using fill but ended up with multiple rainbows.

Answer 1

You need to set gradientUnits to "userSpaceOnUse".

This way the gradient will span across all path elements within the group.
Since you also applied transformations you need to adjust this by transforming the gradient as well using gradientTransform attribute.

Alternative: combine all <path> elements
By concatenating the d attributes of all paths you'll get a compound path.
The gradient won't be repeated as well - no need for adjusted gradient units. (2nd example)

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="47.24 11 155.66 150.66"> <defs> <linearGradient id="gradient" gradientTransform="scale(10) translate(40,130)" gradientUnits="userSpaceOnUse" > <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/> <stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/> <stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/> <stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/> <stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/> <stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/> <stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/> <stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/> <stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/> <stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/> <stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> </linearGradient> </defs> <g fill="url(#gradient)" transform="translate(25,130) scale(0.05,-0.05)"> <path d="M622 2371 c-143 -49 -189 -196 -114 -367 30 -67 31 -73 21 -135 -9 -54 -7 -88 14 -222 14 -87 27 -160 28 -161 2 -2 60 -8 129 -14 94 -7 147 -18 213 -40 118 -41 162 -69 235 -146 l61 -66 126 0 125 0 0 41 c0 23 -12 93 -26 156 -14 63 -24 117 -21 119 2 2 38 0 80 -6 123 -15 233 -68 328 -157 l48 -44 -16 -52 c-21 -74 -24 -76 -85 -64 -37 8 -92 7 -188 -1 -74 -7 -192 -12 -261 -12 l-125 0 -43 -94 c-24 -52 -59 -113 -77 -135 -40 -46 -50 -39 86 -65 132 -26 153 -27 255 -16 104 11 339 61 510 109 94 26 100 29 103 55 6 46 -16 83 -62 106 -23 11 -47 20 -54 20 -21 0 -22 19 -1 67 43 98 43 89 -7 143 -26 28 -67 63 -92 80 -69 45 -221 91 -326 99 l-89 6 -27 86 c-16 48 -44 177 -65 288 -42 236 -54 279 -91 332 -26 37 -125 109 -151 109 -6 0 3 -22 22 -50 51 -75 58 -109 52 -229 -3 -58 -10 -118 -16 -134 l-11 -28 -152 3 -153 3 -6 150 c-6 154 -14 193 -52 233 -43 46 -67 52 -125 33z"/> <path d="M744 2360 c54 -48 68 -96 74 -252 l5 -138 142 0 142 0 11 83 c7 45 12 98 12 117 -1 48 -29 120 -67 175 l-33 45 -160 0 -161 0 35 -30z"/> <path d="M666 1450 c160 -11 277 -60 406 -171 51 -44 98 -63 98 -40 0 5 -30 36 -66 69 -53 50 -81 66 -152 92 -130 47 -197 60 -302 58 l-95 -1 111 -7z"/> <path d="M580 1429 c0 -13 44 -265 56 -321 l5 -26 42 24 c60 35 246 93 337 106 59 8 77 14 73 24 -9 24 -126 106 -199 140 -81 38 -127 50 -236 59 -63 6 -78 5 -78 -6z"/> <path d="M1002 1189 c-35 -4 -80 -13 -100 -20 -69 -21 -252 -102 -252 -110 0 -5 1 -9 3 -9 1 0 52 -7 112 -15 61 -8 147 -15 193 -15 l83 0 24 53 c12 29 28 70 33 90 12 42 17 41 -96 26z"/> <path d="M1111 1154 c-19 -77 -58 -143 -87 -150 -25 -6 -275 11 -324 23 -14 3 -22 3 -19 -1 14 -15 217 -67 282 -73 84 -7 93 0 152 117 60 119 62 130 32 130 -21 0 -26 -7 -36 -46z"/> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="47.24 11 155.66 150.66"> <defs> <linearGradient id="gradient2" > <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/> <stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/> <stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/> <stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/> <stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/> <stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/> <stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/> <stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/> <stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/> <stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/> <stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> </linearGradient> </defs> <g fill="url(#gradient2)" transform="translate(25,130) scale(0.05,-0.05)"> <path d="M622 2371 c-143 -49 -189 -196 -114 -367 30 -67 31 -73 21 -135 -9 -54 -7 -88 14 -222 14 -87 27 -160 28 -161 2 -2 60 -8 129 -14 94 -7 147 -18 213 -40 118 -41 162 -69 235 -146 l61 -66 126 0 125 0 0 41 c0 23 -12 93 -26 156 -14 63 -24 117 -21 119 2 2 38 0 80 -6 123 -15 233 -68 328 -157 l48 -44 -16 -52 c-21 -74 -24 -76 -85 -64 -37 8 -92 7 -188 -1 -74 -7 -192 -12 -261 -12 l-125 0 -43 -94 c-24 -52 -59 -113 -77 -135 -40 -46 -50 -39 86 -65 132 -26 153 -27 255 -16 104 11 339 61 510 109 94 26 100 29 103 55 6 46 -16 83 -62 106 -23 11 -47 20 -54 20 -21 0 -22 19 -1 67 43 98 43 89 -7 143 -26 28 -67 63 -92 80 -69 45 -221 91 -326 99 l-89 6 -27 86 c-16 48 -44 177 -65 288 -42 236 -54 279 -91 332 -26 37 -125 109 -151 109 -6 0 3 -22 22 -50 51 -75 58 -109 52 -229 -3 -58 -10 -118 -16 -134 l-11 -28 -152 3 -153 3 -6 150 c-6 154 -14 193 -52 233 -43 46 -67 52 -125 33z M744 2360 c54 -48 68 -96 74 -252 l5 -138 142 0 142 0 11 83 c7 45 12 98 12 117 -1 48 -29 120 -67 175 l-33 45 -160 0 -161 0 35 -30z M666 1450 c160 -11 277 -60 406 -171 51 -44 98 -63 98 -40 0 5 -30 36 -66 69 -53 50 -81 66 -152 92 -130 47 -197 60 -302 58 l-95 -1 111 -7z M580 1429 c0 -13 44 -265 56 -321 l5 -26 42 24 c60 35 246 93 337 106 59 8 77 14 73 24 -9 24 -126 106 -199 140 -81 38 -127 50 -236 59 -63 6 -78 5 -78 -6z M1002 1189 c-35 -4 -80 -13 -100 -20 -69 -21 -252 -102 -252 -110 0 -5 1 -9 3 -9 1 0 52 -7 112 -15 61 -8 147 -15 193 -15 l83 0 24 53 c12 29 28 70 33 90 12 42 17 41 -96 26z M1111 1154 c-19 -77 -58 -143 -87 -150 -25 -6 -275 11 -324 23 -14 3 -22 3 -19 -1 14 -15 217 -67 282 -73 84 -7 93 0 152 117 60 119 62 130 32 130 -21 0 -26 -7 -36 -46z"/> </g> </svg>