We Keep Coding

change svg radialGradient inside a shadowRoot

I have the following code:
<lottie-player id="head" src="./assets/gradis/face_round.json" background="transparent" speed="1" style="width: 300px; height: 300px">
#shadow-root (open)
<div id="animation-container" class="main" aria-label="Lottie animation">
<div id="animation" class="animation" style="background:transparent">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" width="1200" height="1200"
style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="__lottie_element_95">
<rect width="1200" height="1200" x="0" y="0"></rect>
</clipPath>
<radialGradient id="__lottie_element_99" spreadMethod="pad" gradientUnits="userSpaceOnUse" cx="-1"
cy="-0.9950000047683716" r="494.7430114746094" fx="-0.3150197936550764" fy="-153.11209152463204">
<stop offset="1%" stop-color="rgb(0,195,255)"></stop>
<stop offset="29%" stop-color="rgb(0,97,255)"></stop>
<stop offset="57%" stop-color="rgb(0,0,255)"></stop>
<stop offset="76%" stop-color="rgb(128,48,224)"></stop>
<stop offset="80%" stop-color="rgb(255,96,193)"></stop>
<stop offset="88%" stop-color="rgb(128,105,190)"></stop>
<stop offset="100%" stop-color="rgb(0,113,188)"></stop>
</radialGradient>
<mask id="__lottie_element_101">
<path fill="url(#__lottie_element_100)"
d=" M467.45001220703125,0.004999999888241291 C467.45001220703125,3.615000009536743 467.4200134277344,7.224999904632568 467.3299865722656,10.8149995803833 C466.7799987792969,34.78499984741211 464.44000244140625,58.334999084472656 460.4100036621094,81.28500366210938 C460.4100036621094,81.28500366210938 460.4100036621094,81.29499816894531 460.4100036621094,81.29499816894531 C453.70001220703125,119.53500366210938 442.3500061035156,156.1750030517578 426.95001220703125,190.59500122070312 C426.95001220703125,190.59500122070312 426.95001220703125,190.59500122070312 426.95001220703125,190.60499572753906 C426.44000244140625,191.7550048828125 425.9200134277344,192.89500427246094 425.3900146484375,194.0449981689453 C351.70001220703125,355.364990234375 188.94000244140625,467.4549865722656 0,467.4549865722656 C-180.6199951171875,467.4549865722656 -337.3299865722656,365.0050048828125 -415.1499938964844,215.05499267578125 C-417.82000732421875,209.9149932861328 -420.3900146484375,204.72500610351562 -422.8599853515625,199.48500061035156 C-422.9200134277344,199.34500122070312 -422.989990234375,199.2050018310547 -423.04998779296875,199.0749969482422 C-441.5199890136719,159.89500427246094 -454.7099914550781,117.74500274658203 -461.70001220703125,73.5250015258789 C-465.19000244140625,51.48500061035156 -467.1300048828125,28.94499969482422 -467.4200134277344,5.985000133514404 C-467.45001220703125,3.994999885559082 -467.45001220703125,2.005000114440918 -467.45001220703125,0.004999999888241291 C-467.45001220703125,-2.505000114440918 -467.44000244140625,-5.034999847412109 -467.3900146484375,-7.534999847412109 C-466.8299865722656,-42.51499938964844 -462.44000244140625,-76.55500030517578 -454.6099853515625,-109.25499725341797 C-450.6099853515625,-125.96499633789062 -445.7099914550781,-142.3249969482422 -439.9700012207031,-158.28500366210938 C-421.1199951171875,-210.68499755859375 -393.1700134277344,-258.7349853515625 -358.0299987792969,-300.5450134277344 C-346.4100036621094,-314.375 -334,-327.5249938964844 -320.8800048828125,-339.9049987792969 C-237.16000366210938,-418.9849853515625 -124.2300033569336,-467.4549865722656 0,-467.4549865722656 C124.2300033569336,-467.4549865722656 237.16000366210938,-418.9849853515625 320.8800048828125,-339.9049987792969 C334.04998779296875,-327.4750061035156 346.5,-314.2749938964844 358.1600036621094,-300.3949890136719 C388.42999267578125,-264.364990234375 413.3500061035156,-223.6649932861328 431.70001220703125,-179.5749969482422 C441.1199951171875,-156.97500610351562 448.80999755859375,-133.48500061035156 454.6099853515625,-109.25499725341797 C454.6099853515625,-109.25499725341797 454.6099853515625,-109.25499725341797 454.6099853515625,-109.24500274658203 C463,-74.19499969482422 467.45001220703125,-37.6150016784668 467.45001220703125,0.004999999888241291z">
</path>
</mask>
<radialGradient id="__lottie_element_100" spreadMethod="pad" gradientUnits="userSpaceOnUse" cx="-1"
cy="-0.9950000047683716" r="494.7430114746094" fx="-0.3150197936550764" fy="-153.11209152463204">
<stop stop-color="rgb(255,255,255)" offset="0%" stop-opacity="1"></stop>
<stop stop-color="rgb(255,255,255)" offset="40%" stop-opacity="1"></stop>
<stop stop-color="rgb(255,255,255)" offset="80%" stop-opacity="1"></stop>
<stop stop-color="rgb(255,255,255)" offset="86%" stop-opacity="0.5049999952316284"></stop>
<stop stop-color="rgb(255,255,255)" offset="100%" stop-opacity="0.009999999776482582"></stop>
</radialGradient>
</defs>
<g clip-path="url(#__lottie_element_95)">
<g style="display: block;" transform="matrix(0.5199999809265137,0,0,0.5199999809265137,600,642.1569213867188)"
opacity="1">
<g opacity="1" transform="matrix(1,0,0,1,3.8459999561309814,0)">
<path fill="url(#__lottie_element_99)" mask="url(#__lottie_element_101)" fill-opacity="1"
d="M0 0 M467.45001220703125,0.004999999888241291 C467.45001220703125,3.615000009536743 467.4200134277344,7.224999904632568 467.3299865722656,10.8149995803833 C466.7799987792969,34.78499984741211 464.44000244140625,58.334999084472656 460.4100036621094,81.28500366210938 C460.4100036621094,81.28500366210938 460.4100036621094,81.29499816894531 460.4100036621094,81.29499816894531 C453.70001220703125,119.53500366210938 442.3500061035156,156.1750030517578 426.95001220703125,190.59500122070312 C426.95001220703125,190.59500122070312 426.95001220703125,190.59500122070312 426.95001220703125,190.60499572753906 C426.44000244140625,191.7550048828125 425.9200134277344,192.89500427246094 425.3900146484375,194.0449981689453 C351.70001220703125,355.364990234375 188.94000244140625,467.4549865722656 0,467.4549865722656 C-180.6199951171875,467.4549865722656 -337.3299865722656,365.0050048828125 -415.1499938964844,215.05499267578125 C-417.82000732421875,209.9149932861328 -420.3900146484375,204.72500610351562 -422.8599853515625,199.48500061035156 C-422.9200134277344,199.34500122070312 -422.989990234375,199.2050018310547 -423.04998779296875,199.0749969482422 C-441.5199890136719,159.89500427246094 -454.7099914550781,117.74500274658203 -461.70001220703125,73.5250015258789 C-465.19000244140625,51.48500061035156 -467.1300048828125,28.94499969482422 -467.4200134277344,5.985000133514404 C-467.45001220703125,3.994999885559082 -467.45001220703125,2.005000114440918 -467.45001220703125,0.004999999888241291 C-467.45001220703125,-2.505000114440918 -467.44000244140625,-5.034999847412109 -467.3900146484375,-7.534999847412109 C-466.8299865722656,-42.51499938964844 -462.44000244140625,-76.55500030517578 -454.6099853515625,-109.25499725341797 C-450.6099853515625,-125.96499633789062 -445.7099914550781,-142.3249969482422 -439.9700012207031,-158.28500366210938 C-421.1199951171875,-210.68499755859375 -393.1700134277344,-258.7349853515625 -358.0299987792969,-300.5450134277344 C-346.4100036621094,-314.375 -334,-327.5249938964844 -320.8800048828125,-339.9049987792969 C-237.16000366210938,-418.9849853515625 -124.2300033569336,-467.4549865722656 0,-467.4549865722656 C124.2300033569336,-467.4549865722656 237.16000366210938,-418.9849853515625 320.8800048828125,-339.9049987792969 C334.04998779296875,-327.4750061035156 346.5,-314.2749938964844 358.1600036621094,-300.3949890136719 C388.42999267578125,-264.364990234375 413.3500061035156,-223.6649932861328 431.70001220703125,-179.5749969482422 C441.1199951171875,-156.97500610351562 448.80999755859375,-133.48500061035156 454.6099853515625,-109.25499725341797 C454.6099853515625,-109.25499725341797 454.6099853515625,-109.25499725341797 454.6099853515625,-109.24500274658203 C463,-74.19499969482422 467.45001220703125,-37.6150016784668 467.45001220703125,0.004999999888241291z">
</path>
</g>
</g>
</g>
</svg>
</div>
</div>
</lottie-player>
as you can see I have an svg inside a shadow root, I need to change the stop inside the first radialGradient but I can't use the idbecause this would change on every render.
I try the following but can access the svg neither the first radialGradient.
I try the following:
function loadHead() {
const head = document
.getElementById('head')
.shadowRoot.getElementById('animation')
.getElementsByTagName('svg')[0];
console.log(head);
}
window.addEventListener('load', (event) => {
console.log('DOM fully loaded and parsed');
loadHead();
});
But head is always empty,
I also try:
function loadHead() {
const head = document
.getElementById('head')
.shadowRoot.getElementById('animation');
.getElementsByTagName('svg')[0];
.getElementsByTagName('defs')[0];
.getElementsByTagName('radialGradient').childNodes.length;
console.log(head);
}
But can't got anaythig. Any suggiestion or help would be appreciate

Find and replace color on button click with jQuery

I have a SVG with multiple linearGradient elements and I want to change the value #4D4D4D with #ff0000 in the entire SVG when a button is pressed.
Is there a way to search the value in the entire SVG and replace it with the color I want?
<svg>
<g id="Group_Volute_Chamber">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="93.75" x2="30.2922" y2="93.75" gradientTransform="matrix(1 0 0 -1 0 112.5)">
<stop offset="0.01" stop-color="#4D4D4D" />
<!--4d4d4d style="stop-color:#4F4D4D"-->
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,3.266V37.5h23.423v-0.45V3.266l-1.577-2.703L27.59,0 h-0.676h-1.239H10.248L7.545,1.577L6.982,2.703L6.869,3.266" />
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="78.1523" x2="30.2922" y2="78.1523" gradientTransform="matrix(1 0 0 -1 0 112.5)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,34.347h23.423" />
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="105.8555" x2="30.2922" y2="105.8555" gradientTransform="matrix(1 0 0 -1 0 112.5)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,6.645h23.423" />
</g>
</svg>
<button type="button" onclick="test()">Click Me!</button>

You can use each() and css() functions, also, please notice that color values in jQuery are returned in RGB format, which is rgb(77, 77, 77) for #4D4D4D, so you can use this function:
jQuery('svg stop').each( function() {
var color = jQuery(this).css('stop-color');
if ( color === 'rgb(77, 77, 77)') {
jQuery(this).css('stop-color', '#ff0000');
}
});
You can try it in the test link, I have updated it for you: https://jsfiddle.net/HebaF/7jvzb34L/8/

SVG Filter does not binds to its icon

I have a simple SVG icon, where I need to set the linearGradient for it. I'm trying to make it by specifying id of filter to the SVG body, but it does not wok, because in such way I got an empty SVG icon at all... Why?
<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " style=" fill: url(#chat); filter: url(#chat); " fill="black" stroke="black" stroke-width="0" width="21px" height="21px" viewBox="0 0 17 17">
<filter id="chat">
<linearGradient>
<stop offset="0" stop-color="#cecebf"></stop>
<stop offset="1" stop-color="#9b9b8c"></stop>
</linearGradient>
</filter>
<path d="M7.08,3a6.14,6.14,0,0,0-2.14.37,5.34,5.34,0,0,0-1.68,1A3.64,3.64,0,0,0,1.89,7.07a3.26,3.26,0,0,0,.44,1.62,4.48,4.48,0,0,0,1.33,1.42,2,2,0,0,1,.83,1.38,2.7,2.7,0,0,1,0,.28l.12-.12A1.8,1.8,0,0,1,6,11.07h.24a6.11,6.11,0,0,0,.86.06,6.43,6.43,0,0,0,2.15-.37,5.29,5.29,0,0,0,1.67-1,3.62,3.62,0,0,0,1.38-2.74A3.62,3.62,0,0,0,10.9,4.33a5.29,5.29,0,0,0-1.67-1A6.19,6.19,0,0,0,7.08,3Zm0-2h0C11,1,14.17,3.72,14.17,7.07S11,13.14,7.08,13.14A10,10,0,0,1,6,13.07,6.57,6.57,0,0,1,.94,15v-.39A2.89,2.89,0,0,0,2.66,12.2a2.73,2.73,0,0,0,0-.41A5.78,5.78,0,0,1,0,7.07C0,3.72,3.17,1,7.08,1ZM14.7,14.6a2.32,2.32,0,0,0,1.36,2.06V17a5.46,5.46,0,0,1-4.24-1.66,7.5,7.5,0,0,1-1,.06,6.87,6.87,0,0,1-3.74-1.07,8.79,8.79,0,0,0,5.68-2.05A7.09,7.09,0,0,0,14.6,10a6.45,6.45,0,0,0,.69-2.91c0-.16,0-.33,0-.49A4.81,4.81,0,0,1,17,10.2a4.93,4.93,0,0,1-2.28,4C14.71,14.36,14.7,14.48,14.7,14.6Z"></path>
</svg>

You might need to apply the fill to the path using an ID attached to the gradient
svg {
height: 200px;
}
path {
fill: url(#chat);
}
<svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0" viewBox="0 0 17 17">
<linearGradient id="chat">
<stop offset="0" stop-color="#cecebf"></stop>
<stop offset="1" stop-color="#9b9b8c"></stop>
</linearGradient>
<path d="M7.08,3a6.14,6.14,0,0,0-2.14.37,5.34,5.34,0,0,0-1.68,1A3.64,3.64,0,0,0,1.89,7.07a3.26,3.26,0,0,0,.44,1.62,4.48,4.48,0,0,0,1.33,1.42,2,2,0,0,1,.83,1.38,2.7,2.7,0,0,1,0,.28l.12-.12A1.8,1.8,0,0,1,6,11.07h.24a6.11,6.11,0,0,0,.86.06,6.43,6.43,0,0,0,2.15-.37,5.29,5.29,0,0,0,1.67-1,3.62,3.62,0,0,0,1.38-2.74A3.62,3.62,0,0,0,10.9,4.33a5.29,5.29,0,0,0-1.67-1A6.19,6.19,0,0,0,7.08,3Zm0-2h0C11,1,14.17,3.72,14.17,7.07S11,13.14,7.08,13.14A10,10,0,0,1,6,13.07,6.57,6.57,0,0,1,.94,15v-.39A2.89,2.89,0,0,0,2.66,12.2a2.73,2.73,0,0,0,0-.41A5.78,5.78,0,0,1,0,7.07C0,3.72,3.17,1,7.08,1ZM14.7,14.6a2.32,2.32,0,0,0,1.36,2.06V17a5.46,5.46,0,0,1-4.24-1.66,7.5,7.5,0,0,1-1,.06,6.87,6.87,0,0,1-3.74-1.07,8.79,8.79,0,0,0,5.68-2.05A7.09,7.09,0,0,0,14.6,10a6.45,6.45,0,0,0,.69-2.91c0-.16,0-.33,0-.49A4.81,4.81,0,0,1,17,10.2a4.93,4.93,0,0,1-2.28,4C14.71,14.36,14.7,14.48,14.7,14.6Z"></path>
</svg>

How to draw a linear gradient circle by svg? [duplicate]

This question already has answers here:
svg multiple color on circle stroke
(3 answers)
Closed 7 years ago.
This is my code, but it's not what I wanted.I hope the color distribution is not symmetrical.
<svg width="300" height="300">
<linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
<stop offset="5%" stop-color="#01E400"></stop>
<stop offset="25%" stop-color="#FEFF01"></stop>
<stop offset="40%" stop-color="#FF7E00"></stop>
<stop offset="60%" stop-color="#FB0300"></stop>
<stop offset="80%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"></circle>
</svg>
I need an effect like this.

before check: circle-drawing-with-svgs-arc-path .... my solution is simple: i divided circle into six arcs, each arc with own lineal gradient
math explanation:
angle = 360 / 6 = 60
Math.sin(Math.PI*60/180)*120 == 103.9230
Math.cos(Math.PI*60/180)*120 == 60.0000
<svg width="300" height="300">
<linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E00"></stop>
<stop offset="100%" stop-color="#FB0300"></stop>
</linearGradient>
<linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
<path d="M150 10 a120 120 0 0 1 103.9230 60"
fill="none" stroke="url(#linearColors1)" stroke-width="5" />
<path d="M253.9230 70 a120 120 0 0 1 0 120"
fill="none" stroke="url(#linearColors2)" stroke-width="5" />
<path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
fill="none" stroke="url(#linearColors3)" stroke-width="5" />
<path d="M150 250 a120 120 0 0 1 -103.9230 -60"
fill="none" stroke="url(#linearColors4)" stroke-width="5" />
<path d="M46.077 190 a120 120 0 0 1 0 -120"
fill="none" stroke="url(#linearColors5)" stroke-width="5" />
<path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
fill="none" stroke="url(#linearColors6)" stroke-width="5" />
</svg>

Smoothly change the filling of a SVG

I'm using javascript to change the color of a svg. This changes my <linearGradient> filling :
My problem is, that it is changing very rapidly.
Is there any way to have a "smooth" flow between the colors? I tried to use the jquery anim() method but it wouldn't work because of the SVG-DOM.
Edit: More source code. In the end, it's pretty simple. I get the stop elements of my svg and calculate a new rgb value. I then set the rgb value as the new stop-color of the stop element
js:
var gradient = $('#upper').children('stop');
var firstValue = 'stop-color:rgb('+top[0]+','+top[1]+','+top[2]+')';
var secondValue = 'stop-color:rgb('+bottom[0]+','+bottom[1]+','+bottom[2]+')';
gradient[0].setAttribute('style',firstValue);
gradient[1].setAttribute('style',secondValue);
html
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop style="stop-color:rgb(107,186,112);stop-opacity:1" offset="0"/>
<stop style="stop-color:rgb(107,186,112);stop-opacity:1" offset="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6" />
</svg>

Depending on the actual scenario, this could be solved with pure SMIL animation:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="rgb(107,186,112)" offset="0">
<animate attributeType="CSS" attributeName="stop-color" id="animate0"
dur="2s" begin="rect0.click" fill="freeze" to="rgb(0,255,0)"/>
</stop>
<stop stop-color="rgb(107,186,112)" offset="1">
<animate attributeType="CSS" attributeName="stop-color"
dur="2s" begin="animate0.begin" fill="freeze" to="rgb(255,0,0)"/>
</stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6" id="rect0"/>
</svg>
I this case the animation is triggered by a click on the rectangle.
Specific colors can also be set by JavaScript and the animation can be triggered by JavaScript:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="rgb(107,186,112)" offset="0">
<animate attributeType="CSS" attributeName="stop-color" id="animate0"
dur="2s" begin="indefinite" fill="freeze"/>
</stop>
<stop stop-color="rgb(107,186,112)" offset="1">
<animate attributeType="CSS" attributeName="stop-color"
dur="2s" begin="animate0.begin" fill="freeze"/>
</stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6"/>
<script type="text/javascript">
var gradientColors = [[255,0,0],[255,255,0]];
var animateElements = document.getElementsByTagName("animate");
for (var i=0; i<2; i++) {
animateElements[i].setAttribute(
"to",
"rgb("+gradientColors[i].join(",")+")"
);
}
animateElements[0].beginElement();
</script>
</svg>
Whether these solutions are practical for you depends on whether the targeted browsers support SMIL animation.