I am trying to dynamically create SVG elements using element.innerHTML but it doesn't seem to work.
This is the SVG data I want to use:
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#F4F4F4;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19">
<stop offset="0" style="stop-color:#F8615F"/>
<stop offset="1" style="stop-color:#C1272D"/>
</linearGradient>
<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9
c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29
C72.5,33.1,71.4,36.9,69.5,40.2z"/>
<circle class="st1" cx="50" cy="29.1" r="10.4"/>
Here is the HTML:
<svg id="scene" viewBox="0 0 1000 1000">
<g id = "locations">
</g>
</svg>
And the JavaScript:
function createLocation(px, py, video_id = "")
{
var locations = document.getElementById("locations");
var loc = document.createElement("g");
loc.setAttribute("id", "loc_" + video_id);
loc.innerHTML = '<style type="text/css"> \n.st0{fill:url(#SVGID_1_);} \n.st1{fill:#F4F4F4;} \n</style>\n <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> \n<stop offset="0" style="stop-color:#F8615F"></stop>\n<stop offset="1" style="stop-color:#C1272D"></stop> \n</linearGradient> \n<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9\nc0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29\nC72.5,33.1,71.4,36.9,69.5,40.2z"></path> \n<circle class="st1" cx="50" cy="29.1" r="10.4"></circle>';
locations.appendChild(loc);
}
createLocation(0,0);
When I open Inspect Element, the HTML is there, but the SVG doesn't show up. When I try pasting the data manually, instead of doing it through element.innerHTML, it works as expected. Does anyone know why?
The problem is document.createElement used for common HTML. To create SVG elements, you must use document.createElementNS specifying the namespace http://www.w3.org/2000/svg.
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#F4F4F4;}
</style>
<svg id="scene" viewBox="0 0 1000 1000">
<g id = "locations">
</g>
</svg>
<script>
function createLocation(px, py, video_id = "")
{
var locations = document.getElementById("locations");
var loc = document.createElementNS('http://www.w3.org/2000/svg', "g");
loc.setAttribute("id", "loc_" + video_id);
loc.innerHTML = '<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> <stop offset="0" style="stop-color:#F8615F"/> <stop offset="1" style="stop-color:#C1272D"/> </linearGradient> <path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9 c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29 C72.5,33.1,71.4,36.9,69.5,40.2z"/> <circle class="st1" cx="50" cy="29.1" r="10.4"/>';
locations.appendChild(loc);
}
createLocation(0, 0);
</script>
Related
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
i want this animation gradient with JavaScript which is currently work with CSS. like gradient animation through height in both svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>
<svg id="xcustom2" data-fill-gradient="true" fill-gradient-property="gt,0,2000">
<g id="_shape28570" fill=url(#_GradLFF02X02X02X0002X02X02X0NA_) fill-opacity="1" fill-rule="evenodd" stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10">
<rect x="12" y="5" width="100" height="125"/>
</g>
<defs>
<linearGradient id="_GradLFF02X02X02X0002X02X02X0NA_" x1="0" y1="0" x2="1" y2="0">
<stop offset="0.000" stop-color="rgb(255,255,0)" stop-opacity="1.0"/>
<stop offset="0.500" stop-color="rgb(0,176,80)" stop-opacity="1.0"/>
<stop offset="1.000" stop-color="rgb(255,255,0)" stop-opacity="1.0"/>
</linearGradient>
</defs>
</svg>
You need to use document.createElementNS and it will work:
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svg.setAttribute('viewBox','0 0 100 100');
svg.setAttribute('width',200);
svg.setAttribute('height',200);
svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
var lin = document.createElementNS("http://www.w3.org/2000/svg", 'linearGradient');
lin.setAttribute('x1',0.5);
lin.setAttribute('y1',1);
lin.setAttribute('x2',0.5);
lin.setAttribute('y2',0);
lin.setAttribute('id','lg');
var stop1 = document.createElementNS("http://www.w3.org/2000/svg", 'stop');
stop1.setAttribute('offset',0);
stop1.setAttribute('stop-color','rgb(255,255,0)');
stop1.setAttribute('stop-opacity',1);
var stop2 = document.createElementNS("http://www.w3.org/2000/svg", 'stop');
stop2.setAttribute('offset',0.5);
stop2.setAttribute('stop-color','rgb(0,176,80)');
stop2.setAttribute('stop-opacity',1);
var ani1 = document.createElementNS("http://www.w3.org/2000/svg", 'animate');
ani1.setAttribute('attributeName','offset');
ani1.setAttribute('values','0;1;0');
ani1.setAttribute('repeatCount','indefinite');
ani1.setAttribute('dur','10s');
ani1.setAttribute('begin','0s');
var stop3 = document.createElementNS("http://www.w3.org/2000/svg", 'stop');
stop3.setAttribute('offset',1);
stop3.setAttribute('stop-color','rgb(255,255,255)');
stop3.setAttribute('stop-opacity',1);
var ani2 = document.createElementNS("http://www.w3.org/2000/svg", 'animate');
ani2.setAttribute('attributeName','offset');
ani2.setAttribute('values','0;1;0');
ani2.setAttribute('repeatCount','indefinite');
ani2.setAttribute('dur','10s');
ani2.setAttribute('begin','0s');
stop2.appendChild(ani1);
stop3.appendChild(ani2);
lin.appendChild(stop1);
lin.appendChild(stop2);
lin.appendChild(stop3);
svg.appendChild(lin);
var circ = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
circ.setAttribute('cx',50);
circ.setAttribute('cy',50);
circ.setAttribute('r',45);
circ.setAttribute('fill','url(#lg)');
circ.setAttribute('stroke','crimson');
circ.setAttribute('stroke-width',5);
svg.appendChild(circ);
document.body.appendChild(svg);
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
Whenever i apply on scroll animation on dashed line svg than it converted into a simple line without dashed.
I want same animation which is currently working but line would be dashed-line as shown as Svg Before animation in below example.
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("dashed-path");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
.height-div{
height: 500px; width: 100%; background:#eeeeee;
}
.desktop-pattern-wrap{display: inline-block;vertical-align: top;width: 100%;}
.desktop-pattern-wrap > div{float: left;width: 50%;}
<div class="desktop-pattern-wrap">
<div class="desktop-pattern">
<h2>Svg after animation</h2>
<svg width="198px" height="1458px" viewBox="0 0 198 1458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="12,16" stroke-linejoin="round">
<g id="Desktop-Homepage-1" transform="translate(-646.000000, -825.000000)" stroke="url(#linearGradient-1)" stroke-width="4">
<g id="content" transform="translate(0.000000, 560.000000)">
<path d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728" id="dashed-path"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="desktop-pattern-right">
<h2>Svg Before animation</h2>
<svg width="198px" height="1458px" viewBox="0 0 198 1458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="12,16" stroke-linejoin="round">
<g id="Desktop-Homepage-1" transform="translate(-646.000000, -825.000000)" stroke="url(#linearGradient-1)" stroke-width="4">
<g id="content" transform="translate(0.000000, 560.000000)">
<path d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728" id="dashed-path"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="height-div">
</div>
This can be done by adding an SVG mask and then drawing it over the path:
var path = document.getElementById("thePath");
var mask = document.getElementById("maskPath");
var pathLength = path.getTotalLength();
var maskLength = 1050;
mask.style.strokeDashoffset = maskLength;
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = pathLength * scrollpercent;
mask.style.strokeDashoffset = maskLength - draw;
}
<h1>Scroll down</h1>
<svg width="198px" height="1458px" viewBox="0 0 198 1458">
<defs>
<linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#DE1652" offset="0%"></stop>
<stop stop-color="#F37121" offset="50.2239948%"></stop>
<stop stop-color="#FBAB26" offset="100%"></stop>
</linearGradient>
<mask id="theMask" maskUnits="userSpaceOnUse">
<path id="maskPath"
d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
fill="none"
fill-rule="evenodd"
stroke-dasharray="1637"
stroke-dashoffset="1050"
transform="translate(-646.000000, -825.000000)"
stroke-width="4"
stroke="#fff"/>
</mask>
</defs>
<g id="content" mask="url(#theMask)">
<path id="thePath"
d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
fill="none"
fill-rule="evenodd"
stroke-dasharray="12,16"
transform="translate(-646.000000, -825.000000)"
stroke-width="4"
stroke="url(#linearGradient-1)"
></path>
</g>
</svg>
Codepen Example
In the following example I have an inline SVG. You can see that within it, some of the SVG elements (<radialGradient> and <linearGradient>) are camel case. How would I programatically add another such element to the <defs> parent.
document.createElement() converts its argument to lowercase before creating the node, so the case sensitive element name is lost. And the Square remains white in my rendered SVG.
Is there any way to do this using javascript?
const linearGradient = document.createElement('linearGradient')
linearGradient.id="my-gradient"
linearGradient.setAttribute('x1', '320.38')
linearGradient.setAttribute('y1', '145.87')
linearGradient.setAttribute('x2', '685.45')
linearGradient.setAttribute('y2', '447.31')
linearGradient.setAttribute('gradientUnits','userSpaceOnUse')
const stop1 = document.createElement('stop')
stop1.setAttribute('offset', '0')
stop1.setAttribute('stop-color', '#ed1e79')
const stop2 = document.createElement('stop')
stop2.setAttribute('offset', '1')
stop2.setAttribute('stop-color', '#ff0')
linearGradient.appendChild(stop1)
linearGradient.appendChild(stop2)
document.querySelector('svg defs').appendChild(linearGradient)
<svg id="a663773f-8c77-4356-b99a-00f824054fe3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 894.23 805.64">
<defs>
<radialGradient id="e87c7fc2-e4ed-4d65-889f-d6153929018e" cx="659.66" cy="541.62" r="261.56" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#615ab2"/>
<stop offset="1" stop-color="#c0bde0"/>
</radialGradient>
<linearGradient id="a0a8f98c-a36f-4841-bfb8-51385632467d" x1="23.64" y1="496.01" x2="632.48" y2="496.01" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#96e700"/>
</linearGradient>
</defs>
<title>shapes</title>
<g>
<rect x="212.97" y="11" width="529.92" height="529.92" style="fill: url(#my-gradient)"/>
<path d="M769.89,99V606.92H262V99H769.89m22-22H240V628.92H791.89V77Z" transform="translate(-38 -76.99)"/>
</g>
<g>
<path d="M659.66,803.19a261.58,261.58,0,1,1,185-76.61A259.86,259.86,0,0,1,659.66,803.19Z" transform="translate(-38 -76.99)" style="fill: url(#e87c7fc2-e4ed-4d65-889f-d6153929018e)"/>
<path d="M659.66,291.06a249.68,249.68,0,1,1-97.52,19.68,249,249,0,0,1,97.52-19.68m0-22c-150.53,0-272.56,122-272.56,272.56s122,272.57,272.56,272.57,272.57-122,272.57-272.57-122-272.56-272.57-272.56Z" transform="translate(-38 -76.99)"/>
</g>
<g>
<polygon points="175.85 576.03 23.64 427.66 233.99 397.1 328.06 206.49 422.13 397.1 632.48 427.66 480.27 576.03 516.2 785.53 328.06 686.62 139.92 785.53 175.85 576.03" style="fill: url(#a0a8f98c-a36f-4841-bfb8-51385632467d)"/>
<path d="M366.06,308.34l81.65,165.43,5.11,10.37,11.45,1.67,182.57,26.52L514.73,641.11l-8.28,8.07,1.95,11.4,31.19,181.83L376.3,756.56l-10.24-5.38-10.24,5.38L192.53,842.41l31.18-181.83,2-11.4-8.28-8.07L85.28,512.33l182.57-26.52,11.44-1.67,5.12-10.37,81.65-165.43m0-49.71L264.68,464,38,497,202,656.86,163.31,882.63,366.06,776,568.81,882.63,530.09,656.86,694.12,497,467.43,464,366.06,258.63Z" transform="translate(-38 -76.99)"/>
</g>
</svg>
I think
document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')
should work, according to this