change svg radialGradient inside a shadowRoot - javascript
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
Related
Use script tag inside SVG in React?
I have some SVG-s that are equipped with scripts inside (for handling the onClick event), like: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="200" height="200"> <defs> <linearGradient id="borderColor" x1="0%" y1="0%" x2="90%" y2="70%"> <stop stop-opacity="0.8" stop-color="#def0ff" offset="0"/> <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="0.3"/> <stop stop-opacity="0.8" stop-color="#def0ff" offset="0.4"/> <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="0.6"/> <stop stop-opacity="0.8" stop-color="#def0ff" offset="0.7"/> <stop stop-opacity="0.8" stop-color="#9bb0c2" offset="1"/> </linearGradient> <linearGradient x1="0" y1="0" x2="0.9" y2="0.7" id="fillColor"> <stop stop-opacity="0.4" stop-color="#dbdfe2" offset="0"/> <stop stop-opacity="0.4" stop-color="#d8d8e1" offset="0.3"/> <stop stop-opacity="0.4" stop-color="#c9ced3" offset="0.3"/> <stop stop-opacity="0.5" stop-color="#dae2e9" offset="0.6"/> <stop stop-opacity="0.5" stop-color="#e3e9ed" offset="0.6"/> <stop stop-opacity="0.5" stop-color="#e2e9ed" offset="1"/> </linearGradient> <radialGradient id="circleGrad"> <stop offset="0%" stop-color="black" /> <stop offset="100%" stop-color="white" /> </radialGradient> <mask id="myMask"> <rect width="100%" height="100%" fill="white"/> <circle cx="20" cy="180" r="20" fill="url(#circleGrad)"/> <circle cx="100" cy="20" r="20" fill="url(#circleGrad)"/> <circle cx="180" cy="180" r="20" fill="url(#circleGrad)"/> </mask> <radialGradient id="circleGrad2"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialGradient> <mask id="myMask2"> <rect width="100%" height="100%" fill="black"/> <circle cx="20" cy="180" r="20" fill="url(#circleGrad2)"/> <circle cx="100" cy="20" r="20" fill="url(#circleGrad2)"/> <circle cx="180" cy="180" r="20" fill="url(#circleGrad2)"/> </mask> </defs> <script type="application/ecmascript"><![CDATA[ function triangle_click(evt){ const fgPath = evt.target; const newVal = fgPath.getAttribute('stroke-dasharray') === '0' ? '30 20' : 0; fgPath.setAttribute('stroke-dasharray',newVal); } ]]> </script> <path d="M 20,180 L 100,20 L 180,180 Z" stroke="#00ffff" stroke-width="3" fill="url(#fillColor)" mask="url(#myMask2)"> <animate attributeName="stroke-dashoffset" values="0;500" dur="5s" repeatCount="indefinite" /> </path> <path id="fgPath" d="M 20,180 L 100,20 L 180,180 Z" stroke="url(#borderColor)" stroke-width="3" stroke-dasharray="0" stroke-linecap="round" fill="url(#fillColor)" mask="url(#myMask)" onclick="triangle_click(evt)" > <animate attributeName="stroke-dashoffset" values="0;500" dur="5s" repeatCount="indefinite" /> </path> </svg> Now, when I add this SVG into my react app, it throws an error on the 'onClick' event, unless I copy and paste the <script> tag in the inspector, anywhere (Uncaught ReferenceError: triangle_click is not defined at onclick). Does that mean this script tag was not read initially, that's why it doesn't find it at first place? Thanks, M
I found out the issue was that I inserted the element as innerHTML. The answer can be found here: Executing <script> elements inserted with .innerHTML
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>
LinearGradient with href to another linearGradient not working on firefox
I have this code showing a linearGradient using an href to another linearGradient. the code is working fine under chrome but not working under firefox: <svg version="1.1" id="main_page_assets" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 29 17;" xml:space="preserve"> <defs> <style> .cls-11{stroke:url(#linear-gradient-2);} .cls-12{stroke:url(#linear-gradient-3);} </style> <linearGradient id="linear-gradient-2" x1="15.46" y1="472.62" x2="85.46" y2="472.62" gradientUnits="userSpaceOnUse"> <stop offset="0%" stopColor="#2f343b"/> <stop offset="16%" stopColor="#c3c1b5"/> <stop offset="30%" stopColor="#bfbdb2"/> <stop offset="44%" stopColor="#b3b2a8"/> <stop offset="58%" stopColor="#a0a098"/> <stop offset="71%" stopColor="#848581"/> <stop offset="85%" stopColor="#616464"/> <stop offset="98%" stopColor="#363b41"/> <stop offset="100%" stopColor="#2f343b"/> </linearGradient> <linearGradient id="linear-gradient-3" x1="559.24" y1="552.74" x2="629.24" y2="552.74" gradientTransform="translate(-80.77 1487.36) rotate(-90)" href="#linear-gradient-2"/> </defs> <title>09_activity_map_arrow</title> <line x1="0" y1="0" x2="200" y2="200" class="cls-12" /> </svg> Here is a jsfiddle: https://jsfiddle.net/omriman12/yeaumwLs/1/
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.