I'm making a card where I want to put svgs with this drawing effect. I found a very good tool that makes this for me, I download any svg from the internet and it makes the effect for me and gives me the code to use on my page.
It works great but when I put more than one svg on the page, the first one stops working. It's only working if I only use one svg.
Am I doing something wrong? Is there any tool that also does this?
Note that on the first card, svg is gone.
https://pastebin.com/DhR8kfGU
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="casa" x="0px" y="0px" viewBox="0 0 58.365 58.365" style="enable-background:new 0 0 58.365 58.365;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<path d="M57.863,26.632L29.182,0L0.502,26.632c-0.404,0.376-0.428,1.009-0.052,1.414c0.374,0.404,1.009,0.427,1.413,0.052 l3.319-3.082v33.349h16h16h16V25.015l3.319,3.082c0.192,0.179,0.437,0.267,0.681,0.267c0.269,0,0.536-0.107,0.732-0.319 C58.291,27.641,58.267,27.008,57.863,26.632z M23.182,56.365v-16c0-3.309,2.691-6,6-6s6,2.691,6,6v16H23.182z M51.182,56.365h-14 v-16c0-4.411-3.589-8-8-8s-8,3.589-8,8v16h-14V23.158l22-20.429l22,20.429V56.365z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="casa-0" data-llp-duration="2000" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</svg>
<p class="text-center d-flex flex-column m-xl-3 title">
Residencial
</p>
<p class="card-information">Gás para sua casa</p>
<p class="m-1 card-information">P 13</p>
<p class=" card-information">P 45</p>
Saiba mais
</div>
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tent" x="0px" y="0px" viewBox="0 0 483.32 483.32" style="enable-background:new 0 0 483.32 483.32;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<g>
<g>
<rect x="341.664" y="465.66" width="16" height="16" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-0" data-llp-duration="890" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<rect x="313.674" y="338.617" transform="matrix(0.8805 -0.4741 0.4741 0.8805 -150.0898 200.0408)" width="16" height="118.12" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-1" data-llp-duration="890" data-llp-delay="890" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M96.008,231.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.892-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 L0.008,220.004l11.312,11.312l34.344-34.344v25.376L0.008,268.004l11.312,11.312l34.344-34.344v25.376L0.008,316.004 l11.312,11.312l34.344-34.344V481.66h16V292.972l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L96.008,231.316z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-2" data-llp-duration="890" data-llp-delay="1780" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M472.008,263.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v76.688l-16.8-35.416 c-1.316-2.788-4.117-4.571-7.2-4.584h-104v-60.688l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344 l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48 l-0.056,0.056c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352 v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656 l11.312,11.312l34.344-34.344v60.688h-112c-2.257,0.013-4.4,0.992-5.888,2.688c-0.473,0.473-0.874,1.012-1.192,1.6l-80,152 c-2.05,3.914-0.539,8.749,3.375,10.799c1.143,0.599,2.415,0.912,3.705,0.913h240v-16h-75.2l-71.552-136H392.6l64.424,136h-83.36 v16h96c4.418-0.017,7.986-3.612,7.97-8.03c-0.004-1.174-0.267-2.333-0.77-3.394l-39.2-82.808V276.972l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L472.008,263.316z M157.664,465.66H98.912l58.752-111.624V465.66z M232.416,465.66h-58.752V354.036 L232.416,465.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-3" data-llp-duration="890" data-llp-delay="2670" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M153.664,1.66c-4.418,0.001-7.999,3.583-7.998,8.002c0,2.121,0.843,4.154,2.342,5.654 c8.262,7.425,13.601,17.556,15.056,28.568c1.516,13.506-8.203,25.684-21.709,27.2c-1.825,0.205-3.667,0.205-5.491,0l0.024-0.024 c-11.012-1.455-21.143-6.794-28.568-15.056c-3.125-3.124-8.19-3.123-11.314,0.002c-1.499,1.5-2.342,3.534-2.342,5.654 c0,33.137,26.863,60,60,60s60-26.863,60-60S186.801,1.66,153.664,1.66z M193.287,80.838 c-10.592,21.871-36.908,31.015-58.778,20.423c-8.904-4.312-16.095-11.499-20.412-20.401c6.371,3.432,13.381,5.515,20.592,6.12 c12.063,1.097,23.998-3.169,32.632-11.664c13.512-14.532,15.773-36.253,5.544-53.256 C194.735,32.652,203.878,58.968,193.287,80.838z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-4" data-llp-duration="890" data-llp-delay="3560" fill-opacity="0" style="" />
</g>
</g>
</g>
</svg>
<p class="text-center m-xl-3 title">
outdoor
</p>
<p class="">Lorem Ipsum.</p>
<p class="m-1 card-information"></p>
<p class="card-information">P 2</p>
Saiba mais
</div>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#tent');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 4,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#tent");
let el = document.querySelector("#tent");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#casa');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#casa");
let el = document.querySelector("#casa");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
http://lazylinepainter.info/
Related
<div id="anim">
<svg>
<defs><clipPath id="__lottie_element_2"></defs>
<g>
<g class="aaaaa"></g>
<g id="bbbbb"></g>
<g id="ccccc"></g>
</g>
</svg>
</div>
Detect when I click on class="aaaa" inside id="anim" and throw an alert. alert("you have pressed class" aaaa)
Detect when I click on id="bbbbb" inside id="anim" and throw an alert. alert("you have pressed id" bbbbb)
thank you
window.addEventListener("load", function () {
let element = document.querySelector("div.anim > svg > g > g").getAttribute("id");
element.addEventListener("click", function() {
alert("You clicked");
});
You can use the closest() function to find the parent <g> that was clicked. The <g> does not itself take any click events, so you rely on the content of the <g>.
And you just need one event listener for the entire thing. e.target is the element that was clicked (depending on how you use pointer-events if that is something you can use in your case).
window.addEventListener("load", function() {
let element = document.querySelector("div#anim");
element.addEventListener("click", e => {
let gclicked = e.target.closest('g');
alert(`You have pressed class ${gclicked.getAttribute('class')}`);
});
})
<div id="anim">
<svg viewBox="0 0 30 10" width="300">
<g class="aaaaa">
<circle r="5" cx="5" cy="5" fill="red"/>
</g>
<g class="bbbbb">
<circle r="5" cx="15" cy="5" fill="blue"/>
</g>
<g class="ccccc">
<circle r="5" cx="25" cy="5" fill="orange"/>
</g>
</svg>
</div>
window.addEventListener("load", function() {
// `div.anim` means div with class anim
// why would you use `getAttribute` here?
let element = document.querySelector("div#anim > svg > g > g");
element.addEventListener("click", function() {
alert("You clicked");
});
})
<div id="anim">
<svg>
<!-- you forgot to close `<clipPath>` -->
<defs><clipPath id="__lottie_element_2"></clipPath></defs>
<g>
<g class="aaaaa"></g>
<g id="bbbbb"></g>
<g id="ccccc"></g>
</g>
</svg>
</div>
Alright, I have a gradient filter set up on some svgs like this:
<div id = "center">
<span name = "bluelight">
<div id = "svgContainer">
<div id = "inner">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 650">
<defs>
<filter id="Blur"><feGaussianBlur stdDeviation="25" /></filter>
<g id="" data-name="Layer 1"><rect class="cls-1" width="700" height="558"/></g><g id="Img" data-name="Layer 2"><path class="cls-2" d="M403.71,111.69q-47.58,19.77-94,42.26-45.18,22-89,46.69c-13.09,7.37-26.15,14.91-38.11,24A160,160,0,0,0,163.94,241a71.68,71.68,0,0,0-8.7,10.37,16.54,16.54,0,0,0,2.12,20.7c3.48,3.41,8.14,5,12.85,5.71l13,1.94,26,3.89,51.71,7.73L364.68,306.8l13,1.95-7.17-17.63A117.3,117.3,0,0,1,361.32,305l1.87-2.43c-10.79,14-24.25,25.51-37.89,36.59-13.79,11.19-28,22-40.41,34.74a151.85,151.85,0,0,0-20.2,25.28c-3.89,6.18-.36,16.17,7.17,17.62a91,91,0,0,1,18,5.5L287,421.08a93.25,93.25,0,0,1,20.12,11.77L304.72,431a90.48,90.48,0,0,1,14.91,14.56c1.82,2.24,5.73,3.51,8.49,3.51a12.22,12.22,0,0,0,8.48-3.51,12.1,12.1,0,0,0,3.52-8.49l-.43-3.19a11.93,11.93,0,0,0-3.09-5.29c-11.62-14.33-27.45-24.86-44.72-31.15a90.6,90.6,0,0,0-13.64-3.76l7.17,17.63q3.13-5,6.73-9.63l-1.88,2.43c11.28-14.54,25.42-26.48,39.66-38s28.95-22.83,41.52-36.31a139.45,139.45,0,0,0,19.8-26.54,11.88,11.88,0,0,0,.6-10.68c-1.31-3.1-4.21-6.41-7.78-6.95l-83.92-12.54-83.92-12.55L193,257l-11.77-1.76c-3.28-.49-6.76-.7-9.87-1.91l2.87,1.21a9.41,9.41,0,0,1-2-1.16l2.43,1.87a8.2,8.2,0,0,1-.78-.78l1.88,2.43a5.42,5.42,0,0,1-.55-.93l1.21,2.87a5.84,5.84,0,0,1-.29-1.09l.43,3.19a4.3,4.3,0,0,1,0-1l-.43,3.19a7.34,7.34,0,0,1,.38-1.37l-1.21,2.87a12.1,12.1,0,0,1,1.27-2.1l-1.87,2.43c6.15-7.92,13.78-14.75,21.68-20.88l-2.43,1.88c11.16-8.6,23.29-15.81,35.53-22.75q20.44-11.61,41.22-22.6,41.77-22.14,84.74-41.9,24.18-11.12,48.72-21.48l-2.86,1.21q4.41-1.86,8.83-3.69c3-1.26,5.45-2.58,7.17-5.52a12.3,12.3,0,0,0,1.21-9.25A12.15,12.15,0,0,0,413,112.9c-2.64-1.4-6.34-2.41-9.24-1.21Z"/>
</g>
</defs>
<use style="fill:pink;" filter="url(#Blur)" xlink:href="#Img"
transform="translate(0,0)"/>
<use style="fill:white;" xlink:href="#Img"/>
</svg>
the stdDeviation attribute controls how far out the glow goes:
I need to change this with jquery/js, so Ive tried:
$('#center').children().each(function(i, child) {
$(child).find('filter').attr("stdDeviation", "0");
and while this gets the attribute and works in code:
the visuals dont change (its triggered by scroll). why is this?
If you modify feGaussianBlur instead, it seems to work.
var _input = document.getElementsByClassName("dev")[0];
_input.addEventListener("input",function(){
document.getElementsByTagName("feGaussianBlur")[0].setAttribute("stdDeviation", this.value);
});
New Value: <input type="text" class="dev" value="25">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 650">
<defs>
<filter id="Blur"><feGaussianBlur stdDeviation="25" /></filter>
<g id="" data-name="Layer 1"><rect class="cls-1" width="700" height="558"/></g><g id="Img" data-name="Layer 2"><path class="cls-2" d="M403.71,111.69q-47.58,19.77-94,42.26-45.18,22-89,46.69c-13.09,7.37-26.15,14.91-38.11,24A160,160,0,0,0,163.94,241a71.68,71.68,0,0,0-8.7,10.37,16.54,16.54,0,0,0,2.12,20.7c3.48,3.41,8.14,5,12.85,5.71l13,1.94,26,3.89,51.71,7.73L364.68,306.8l13,1.95-7.17-17.63A117.3,117.3,0,0,1,361.32,305l1.87-2.43c-10.79,14-24.25,25.51-37.89,36.59-13.79,11.19-28,22-40.41,34.74a151.85,151.85,0,0,0-20.2,25.28c-3.89,6.18-.36,16.17,7.17,17.62a91,91,0,0,1,18,5.5L287,421.08a93.25,93.25,0,0,1,20.12,11.77L304.72,431a90.48,90.48,0,0,1,14.91,14.56c1.82,2.24,5.73,3.51,8.49,3.51a12.22,12.22,0,0,0,8.48-3.51,12.1,12.1,0,0,0,3.52-8.49l-.43-3.19a11.93,11.93,0,0,0-3.09-5.29c-11.62-14.33-27.45-24.86-44.72-31.15a90.6,90.6,0,0,0-13.64-3.76l7.17,17.63q3.13-5,6.73-9.63l-1.88,2.43c11.28-14.54,25.42-26.48,39.66-38s28.95-22.83,41.52-36.31a139.45,139.45,0,0,0,19.8-26.54,11.88,11.88,0,0,0,.6-10.68c-1.31-3.1-4.21-6.41-7.78-6.95l-83.92-12.54-83.92-12.55L193,257l-11.77-1.76c-3.28-.49-6.76-.7-9.87-1.91l2.87,1.21a9.41,9.41,0,0,1-2-1.16l2.43,1.87a8.2,8.2,0,0,1-.78-.78l1.88,2.43a5.42,5.42,0,0,1-.55-.93l1.21,2.87a5.84,5.84,0,0,1-.29-1.09l.43,3.19a4.3,4.3,0,0,1,0-1l-.43,3.19a7.34,7.34,0,0,1,.38-1.37l-1.21,2.87a12.1,12.1,0,0,1,1.27-2.1l-1.87,2.43c6.15-7.92,13.78-14.75,21.68-20.88l-2.43,1.88c11.16-8.6,23.29-15.81,35.53-22.75q20.44-11.61,41.22-22.6,41.77-22.14,84.74-41.9,24.18-11.12,48.72-21.48l-2.86,1.21q4.41-1.86,8.83-3.69c3-1.26,5.45-2.58,7.17-5.52a12.3,12.3,0,0,0,1.21-9.25A12.15,12.15,0,0,0,413,112.9c-2.64-1.4-6.34-2.41-9.24-1.21Z"/>
</g>
</defs>
<use style="fill:pink;" filter="url(#Blur)" xlink:href="#Img"
transform="translate(0,0)"/>
<use style="fill:white;" xlink:href="#Img"/>
</svg>
Let's say I have the following html context, which I don't have access to its creation :
<div id="outer">
<div id="chart-div">
<svg id="chart"></svg>
</div>
<div id="legend-div">
<svg id="legend"></svg>
</div>
</div>
What I'm trying to do is export this SVG to an image using canvg library, the problem here is that they are separated and so I get two canvas, and canvg library accepts a SVG definition string as input.
How can I modify the html elements above so that they are only one SVG? Using Javascript as this is a browser extension.
I have tried just switching the DIVs tags to SVG but it just broke everything and the SVG became blank
This is my solution to your problem: I make the outer div display:none, I'm creating another svg element (you may do it dynamicaly) end inside the #new svg I'm using the #chart and the #legend. I hope it helps.
svg{border:1px solid;}
#outer {display:none}
#outer div{position:absolute; width:500px;}
<div id="outer">
<div id="chart-div">
<svg id="chart" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20" />
</svg>
</div>
<div id="legend-div">
<svg id="legend" viewBox="0 0 300 150">
<rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
</svg>
</div>
</div>
<svg id="new" viewBox="0 0 300 150" width="500">
<use xlink:href="#chart" />
<use xlink:href="#legend" />
</svg>
This is a Javascript solution for merging two svg accessibles in the document through DOM manipulation.
var svgNS = "http://www.w3.org/2000/svg";
var outer = document.getElementById('outer');
// get chart content
var chart = document.getElementById('chart-div');
var chartSvg = chart.getElementsByTagName('svg')[0];
var chartContent = Array.from(chartSvg.childNodes);
// get legend content
var legend = document.getElementById('legend-div');
var legendSvg = legend.getElementsByTagName('svg')[0];
var legendContent = Array.from(legendSvg.childNodes);
// create a merged-div where we are going to merge the svgs
var merged = document.createElement('div');
merged.setAttribute('id', 'merged-div');
outer.appendChild(merged);
// createElementNS for svg
var mergedSvg = document.createElementNS(svgNS, 'svg');
mergedSvg.setAttribute('id', 'merged');
// keep the viewBox of the chart
mergedSvg.setAttribute('viewBox', chartSvg.getAttribute('viewBox'));
merged.appendChild(mergedSvg);
// adding the content of both svgs
for (let i = 0; i < chartContent.length; i++) {
mergedSvg.appendChild(chartContent[i]);
}
for (let i = 0; i < legendContent.length; i++) {
mergedSvg.appendChild(legendContent[i]);
}
// the unmerged svgs can be removed
chart.remove();
legend.remove();
<div id="outer">
<div id="chart-div">
<svg id="chart" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20" />
</svg>
</div>
<div id="legend-div">
<svg id="legend" viewBox="0 0 300 150">
<rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
</svg>
</div>
</div>
Resulting markup:
<div id="outer">
<div id="merged-div">
<svg id="merged" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20"></circle>
<rect fill="skyBlue" x="200" y="100" width="80" height="30"></rect>
</svg>
</div>
</div>
I'm trying to figure out how to add a unique prefix to ID's and other reference links.
I have multiple identical SVGs on a page. These SVGs serve as a wrapper (they're devices - laptop, phone, etc.) which have image link that is inserted into the SVG after load. The problem is, the ID's for these svgs are identical so they all conflict with each other. What I'm trying to do (but am open to better solutions) is to insert a unique ID to each id,xlink:href, url(#, etc. but pass over the <image> href attribute and fill and stroke attributes.
EDIT: I added/tweaked the code provided by #Temani, which got me closer to my desired result, however, I'm now getting all the ID's added to each SVG element. Formatted the code to be executable.
Desired output:
<div class="device" data-screen="[[IMAGE TO USE]]" data-name"[[UNIQUE ID]]">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="635" height="420" viewBox="0 0 635 420">
<defs>
<path id="[[UNIQUE ID]]-path-1"/>
<rect id="[[UNIQUE ID]]-path-3" />
<pattern id="[[UNIQUE ID]]-pattern-4">
<use transform="scale(13.1875)" xlink:href="#[[UNIQUE ID]]-image-5"/>
</pattern>
<image id="[[UNIQUE ID]]-image-5" href="[[IMAGE LINK THAT IS INSERTED AFTER LOAD]]"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect fill="#fff" stroke="#2D8EFF" />
<g >
<mask id="[[UNIQUE ID]]-mask-2" fill="#fff">
<use xlink:href="#[[UNIQUE ID]]-path-1"/>
</mask>
<g mask="url(#[[UNIQUE ID]]-mask-2)">
<mask id="mask-6" fill="#fff">
<use xlink:href="#[[UNIQUE ID]]-path-3"/>
</mask>
</g>
</g>
</g>
</svg>
</div>
Right now - both ID's (first and second) gets added to each SVG element. I also
$('.device').each(function() {
//we get the needed id using $(this) that refer to actual device
var id = $(this).data('name');
//we check all the element with ID
$(this).find("path, rect, pattern, image, mask").each(function() {
//now (this) refer to the actual element
if($(this).attr("id"))
$(this).attr("id", id+"-"+$(this).attr("id"));
});
//we update the <use>
$(this).find("use").each(function() {
//now (this) refer to the actual element
$(this).attr("xlink:href","#"+id+"-"+$(this).attr("xlink:href").substring(1));
});
// Also, hoping to combine g[mask], u[fill], etc into 1 function.
// Basically any attribute that starts with "url(#"
$(this).find("g[mask^='url']").each(function() {
$(this).attr("mask","url(#"+id+"-"+$(this).attr("mask").substring(5));
});
$(this).find("use[fill^='url']").each(function() {
$(this).attr("fill","url(#"+id+"-"+$(this).attr("fill").substring(5));
});
$(this).find("use[filter^='url']").each(function() {
$(this).attr("filter","url(#"+id+"-"+$(this).attr("filter").substring(5));
});
// grab data-screen value
var data = $(this).data('screen');
// replace this with the link inside svg
if (data != '') {
$(this).find("svg defs image").attr("href", data).attr("xlink:href", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="device" data-name="first" data-screen="image-1.png">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<rect id="w-circle-stroke-a" width="24" height="24"/>
<path id="w-circle-stroke-b" d="M12,2 C17.52,2 22,6.48 22,12 C22,17.52 17.52,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 Z M12,3.81818182 C7.48415409,3.81818182 3.81818182,7.48415409 3.81818182,12 C3.81818182,16.5158459 7.48415409,20.1818182 12,20.1818182 C16.5158459,20.1818182 20.1818182,16.5158459 20.1818182,12 C20.1818182,7.48415409 16.5158459,3.81818182 12,3.81818182 Z M10.5553177,13.4773237 L15.155405,8.80967806 C15.5597962,8.4027095 16.222261,8.39598875 16.6350615,8.79466684 C16.6382917,8.79778661 16.6600317,8.81952282 16.7002813,8.85987545 C17.0999062,9.26113743 17.0999062,9.90402237 16.7002813,10.3052843 L10.5553177,16.5 L7.29971874,13.2228714 C6.90252847,12.8240541 6.8997633,12.1859262 7.29348277,11.7837778 L7.33224151,11.7441893 C7.73340831,11.3344341 8.39555055,11.3228774 8.8111776,11.7183766 C8.81566955,11.722651 9.39704957,12.3089667 10.5553177,13.4773237 Z"/>
<image id="image-5" href="image-to-be-inserted.jpg"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="w-circle-stroke-c" fill="#fff">
<use xlink:href="#w-circle-stroke-b"/>
</mask>
<g fill="#2D8EFF" mask="url(#w-circle-stroke-c)">
<rect width="24" height="24"/>
</g>
<use fill="url(#pattern-4)" xlink:href="#path-3"/>
<use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
</g>
</svg>
</div>
<div class="device" data-name="second" data-screen="image-1.png">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<rect id="w-circle-stroke-a" width="24" height="24"/>
<path id="w-circle-stroke-b" d="M12,2 C17.52,2 22,6.48 22,12 C22,17.52 17.52,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 Z M12,3.81818182 C7.48415409,3.81818182 3.81818182,7.48415409 3.81818182,12 C3.81818182,16.5158459 7.48415409,20.1818182 12,20.1818182 C16.5158459,20.1818182 20.1818182,16.5158459 20.1818182,12 C20.1818182,7.48415409 16.5158459,3.81818182 12,3.81818182 Z M10.5553177,13.4773237 L15.155405,8.80967806 C15.5597962,8.4027095 16.222261,8.39598875 16.6350615,8.79466684 C16.6382917,8.79778661 16.6600317,8.81952282 16.7002813,8.85987545 C17.0999062,9.26113743 17.0999062,9.90402237 16.7002813,10.3052843 L10.5553177,16.5 L7.29971874,13.2228714 C6.90252847,12.8240541 6.8997633,12.1859262 7.29348277,11.7837778 L7.33224151,11.7441893 C7.73340831,11.3344341 8.39555055,11.3228774 8.8111776,11.7183766 C8.81566955,11.722651 9.39704957,12.3089667 10.5553177,13.4773237 Z"/>
<image id="image-5" href="image-to-be-inserted.jpg"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="w-circle-stroke-c" fill="#fff">
<use xlink:href="#w-circle-stroke-b"/>
</mask>
<g fill="#2D8EFF" mask="url(#w-circle-stroke-c)">
<rect width="24" height="24"/>
</g>
<use fill="url(#pattern-4)" xlink:href="#path-3"/>
<use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
</g>
</svg>
</div>
The issue is that you don't have to use $('.device') when inside and you need to refer to $(this) and since you have 2 each() nested you need to pay attention to the scope of this.
$('.device').each(function() {
//we get the needed id using $(this) that refer to actual device
var id = $(this).data('name');
//we check all the element with ID
$(this).find("path, rect, pattern, image, mask").each(function() {
//now (this) refer to the actual element
if($(this).attr("id"))
$(this).attr("id", id+"-"+$(this).attr("id"));
});
//we update the <use>
$(this).find("use").each(function() {
//now (this) refer to the actual element
$(this).attr("xlink:href","#"+id+"-"+$(this).attr("xlink:href").substring(1));
});
// grab data-screen value
var data = $(this).data('screen');
// replace this with the link inside svg
if (data != '') {
$(this).find("svg defs image").attr("href", data).attr("xlink:href", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="device" data-screen="[[IMAGE TO USE]]" data-name="[[UNIQUE ID]]">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="635" height="420" viewBox="0 0 635 420">
<defs>
<path id="path-1"/>
<rect id="path-3" />
<pattern id="pattern-4">
<use transform="scale(13.1875)" xlink:href="#image-5"/>
</pattern>
<image id="image-5" href="[[IMAGE LINK THAT IS INSERTED AFTER LOAD]]"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect fill="#fff" stroke="#2D8EFF" />
<g >
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<g mask="url(#mask-2)">
<mask id="mask-6" fill="#fff">
<use xlink:href="#path-3"/>
</mask>
</g>
</g>
</g>
</svg>
</div>
I made a little slide-show box thing that has an animated timer bar that resets each time the slide changes - you can see it working here: https://codepen.io/JTBennett/pen/JJzZqK
My issue is that the initial state of the first slide has its opacity set to 0, but I would like it to be visible from the start. I've tried setting the css just for that slide to opacity:1, but then it remains visible throughout the entire cycle for some reason.
I also tried to adjust the start of the loop, but it cuts out the previous slide entirely then.
I'm going to post just the javascript here because (I know it's spaghetti, I suck), but it may be easier to understand if you look at it in action on the codepen.
How can I make the initial opacity of the first slide 1 without it remaining throughout the loop?
$(document).ready(function(){
setInterval(function() {
$('.sb-1-bot > div:first')
.removeClass('sb-active')
.next()
.addClass('sb-active')
.end()
.appendTo('.sb-1-bot');
var all = $('.sb-1-icon svg');
var query1 = $('.sb-pg-1').css('opacity');
var icon1 = $('.sb-ic-1 svg');
var query2 = $('.sb-pg-2').css('opacity');
var icon2 = $('.sb-ic-2 svg');
var query3 = $('.sb-pg-3').css('opacity');
var icon3 = $('.sb-ic-3 svg');
var query4 = $('.sb-pg-4').css('opacity');
var icon4 = $('.sb-ic-4 svg');
var query5 = $('.sb-pg-5').css('opacity');
var icon5 = $('.sb-ic-5 svg');
if(query1 == 1) {
all.css('opacity','0');
icon1.css('opacity','1');
}
if(query2 == 1) {
all.css('opacity','0');
icon2.css('opacity','1');
}
if(query3 == 1) {
all.css('opacity','0');
icon3.css('opacity','1');
}
if(query4 == 1) {
all.css('opacity','0');
icon4.css('opacity','1');
}
if(query5 == 1) {
all.css('opacity','0');
icon5.css('opacity','1');
}
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 10000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}, 10000);
});
You don't want to set the opacity as the default state but you want to set the sb-active class as the default class for sb-pg-1 div.
$(document).ready(function() {
$(".sb-pg-1").addClass("sb-active");
setInterval(function() {
$(".sb-1-bot > div:first")
.removeClass("sb-active")
.next()
.addClass("sb-active")
.end()
.appendTo(".sb-1-bot");
var all = $(".sb-1-icon svg");
var query1 = $(".sb-pg-1").css("opacity");
var icon1 = $(".sb-ic-1 svg");
var query2 = $(".sb-pg-2").css("opacity");
var icon2 = $(".sb-ic-2 svg");
var query3 = $(".sb-pg-3").css("opacity");
var icon3 = $(".sb-ic-3 svg");
var query4 = $(".sb-pg-4").css("opacity");
var icon4 = $(".sb-ic-4 svg");
var query5 = $(".sb-pg-5").css("opacity");
var icon5 = $(".sb-ic-5 svg");
if (query1 == 1) {
all.css("opacity", "0");
icon1.css("opacity", "1");
}
if (query2 == 1) {
all.css("opacity", "0");
icon2.css("opacity", "1");
}
if (query3 == 1) {
all.css("opacity", "0");
icon3.css("opacity", "1");
}
if (query4 == 1) {
all.css("opacity", "0");
icon4.css("opacity", "1");
}
if (query5 == 1) {
all.css("opacity", "0");
icon5.css("opacity", "1");
}
var bar = $(".sb-pg-timer");
var origin = 0;
bar.animate(
{
width: origin
},
0,
function() {
$(this).animate(
{
width: "100%"
},
3000,
function() {
$(this).animate(
{
width: origin
},
0
);
}
);
}
);
}, 3000);
});
/*deleteme*/
body {font-family: 'Open Sans', sans-serif;color:#333;foont-size:12px;margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Oxygen', sans-serif;font-weight:300;letter-spacing:1px;color:#222;}
p {font-style:italic;}
/*deleteme*/
.sb-1-icon svg {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.sb-1 {margin:0;padding:0;}
.sb-1-top {
display:flex;
width:100%;
height:120px;
}
.sb-1-icon {
background:#fff;
padding:14px;
width:50px;
height:50px;
border:1px #ddd solid;
border-radius:50%;
margin:auto;
}
.sb-1-icon svg {opacity:0;}
.sb-ic-1 svg {opacity:1;}
.sb-1-line-2 {
position:absolute;
height:2px;
width:100%;
top:68px;
z-index:-1;
}
.divider {
position: relative;
height: 1px;
}
.div-transparent:before {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 1px;
background-image: linear-gradient(to right, transparent, #ddd, transparent);
}
.sb-1-bot {
height:200px;
text-align:center;
}
.sb-page {
position:absolute; width:100%; height:100%;opacity:0;}
.sb-active {opacity:1;}
.sb-pg-timer {
width:0%;
height:3px;
float:left;
background:#f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sb-1">
<div class="sb-1-top">
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
<div class="sb-1-icon sb-ic-1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#C9C9C9;" cx="253.04" cy="50.24" r="50.24"/>
<g>
<path style="fill:#002833;" d="M250.72,217.2L202.16,112c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S251.04,217.2,250.72,217.2z"
/>
<path style="fill:#002833;" d="M255.44,217.2L304,112c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S255.12,217.2,255.44,217.2z"/>
</g>
<polygon style="fill:#FF5F5F;" points="253.04,112 218.08,112 253.04,189.36 288,112 "/>
<circle style="fill:#C9C9C9;" cx="407.04" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M404.64,512l-48.56-105.2c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S404.96,512,404.64,512z"/>
<path style="fill:#002833;" d="M409.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S409.04,512,409.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="407.04,406.8 372.08,406.8 407.04,484.16 442,406.8 "/>
<circle style="fill:#C9C9C9;" cx="104.96" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M102.64,512L54.08,406.8c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S102.96,512,102.64,512z"/>
<path style="fill:#002833;" d="M107.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S107.04,512,107.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="104.96,406.8 70,406.8 104.96,484.16 139.92,406.8 "/>
</svg>
</div>
<div class="sb-1-icon sb-ic-2">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<rect x="251.28" y="28.4" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M260.72,455.28h-9.44v-18.96h9.44V455.28z M260.72,417.28h-9.44v-18.96h9.44V417.28z M260.72,379.36
h-9.44V360.4h9.44V379.36z M260.72,341.44h-9.44v-18.96h9.44V341.44z M260.72,303.44h-9.44v-18.96h9.44V303.44z M260.72,265.52
h-9.44v-18.96h9.44V265.52z M260.72,227.6h-9.44v-18.96h9.44V227.6z M260.72,189.6h-9.44v-18.96h9.44V189.6z M260.72,151.68h-9.44
v-18.96h9.44V151.68z M260.72,113.76h-9.44V94.8h9.44V113.76z M260.72,75.76h-9.44V56.8h9.44V75.76z"/>
<rect x="251.28" y="474.24" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<rect x="452.96" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M462.48,335.28h-9.44v-19.52h9.44V335.28z M462.48,296.24h-9.44v-19.52h9.44V296.24z M462.48,257.2
h-9.44v-19.52h9.44V257.2z M462.48,218.16h-9.44v-19.52h9.44V218.16z M462.48,179.04h-9.44v-19.52h9.44V179.04z"/>
<rect x="452.96" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M256,262.96l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,262.96z M231.04,247.92
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,247.92z M284.56,245.68l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,245.68z M198.72,228.32
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,228.32z M316.96,226.16l-4.96-8.08l16.16-9.76l4.88,8.08L316.96,226.16z M166.32,208.8
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,208.8z M349.28,206.64l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,206.64z M133.92,189.28
l-16.16-9.76l4.88-8.08l16.16,9.76L133.92,189.28z M381.68,187.04l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,187.04z M101.52,169.68
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,169.68z M414.08,167.52l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,167.52z M69.2,150.16
l-16.16-9.76l2-3.36l-2.96-5.52l16.72-8.88l4.4,8.32l-9.36,4.96L74,142.08L69.2,150.16z M446.4,148l-4.88-8.08l13.76-8.32l0.72,1.2
l1.44-2.64l9.92,5.28L446.4,148z M436.24,129.6l-16.72-8.88l4.48-8.32l16.72,8.88L436.24,129.6z M89.92,122.08l-4.4-8.32
l16.72-8.88l4.4,8.32L89.92,122.08z M402.88,111.84l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,111.84z M123.28,104.32l-4.4-8.32
l16.72-8.88l4.4,8.32L123.28,104.32z M369.44,94.16l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,94.16z M156.72,86.64l-4.4-8.32
l16.72-8.88l4.4,8.32L156.72,86.64z M336,76.4l-16.72-8.88l4.4-8.32l16.72,8.88L336,76.4z M190.16,68.88l-4.4-8.32l16.72-8.88
l4.4,8.32L190.16,68.88z M302.64,58.64l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,58.64z M223.52,51.12l-4.4-8.32l16.72-8.88
l4.4,8.32L223.52,51.12z M269.2,40.96l-15.44-8.16l1.44-2.64l-2.64-5.04L256,23.2l17.68,9.36L269.2,40.96z"/>
<path style="fill:#C9C9C9;" d="M256,491.76l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,491.76z M231.04,476.72
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,476.72z M284.56,474.56l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,474.56z M198.72,457.2
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,457.2z M316.88,454.96l-4.88-8.08l16.16-9.76l4.88,8.08L316.88,454.96z M166.32,437.6
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,437.6z M349.28,435.44l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,435.44z M133.92,418.08
l-16.16-9.76l4.88-8.08L138.8,410L133.92,418.08z M381.68,415.92l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,415.92z M101.52,398.56
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,398.56z M414.08,396.4l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,396.4z M69.12,378.96
l-16.16-9.76l2-3.36L52,360.32l16.72-8.88l4.4,8.32l-9.36,4.96l10.16,6.16L69.12,378.96z M446.4,376.8l-4.88-8.08l13.76-8.32
l0.72,1.2l1.44-2.64l9.92,5.28L446.4,376.8z M436.24,358.48l-16.72-8.88l4.48-8.4l16.72,8.88L436.24,358.48z M89.92,350.96
l-4.4-8.32l16.72-8.88l4.4,8.32L89.92,350.96z M402.88,340.72l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,340.72z M123.28,333.2
l-4.4-8.32L135.6,316l4.4,8.32L123.28,333.2z M369.44,322.96l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,322.96z M156.72,315.44
l-4.4-8.32l16.72-8.88l4.4,8.32L156.72,315.44z M336.08,305.28l-16.72-8.88l4.4-8.4l16.72,8.88L336.08,305.28z M190.16,297.76
l-4.4-8.32l16.72-8.88l4.4,8.32L190.16,297.76z M302.64,287.52l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,287.52z M223.52,280
l-4.4-8.32l16.72-8.88l4.4,8.32L223.52,280z M269.2,269.76l-15.44-8.16l1.44-2.64l-2.64-5.04l3.44-1.84l17.68,9.36L269.2,269.76z"
/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="457.76" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="457.76" cy="364.48" r="25.76"/>
</g>
<g>
<rect x="49.52" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M59.04,335.28h-9.52v-19.52h9.44v19.52H59.04z M59.04,296.24h-9.52v-19.52h9.44v19.52H59.04z
M59.04,257.2h-9.52v-19.52h9.44v19.52H59.04z M59.04,218.16h-9.52v-19.52h9.44v19.52H59.04z M59.04,179.04h-9.52v-19.52h9.44
v19.52H59.04z"/>
<rect x="49.52" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="54.24" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="54.24" cy="364.48" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="256" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="25.76" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="486.24" r="25.76"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-3">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#002833;" points="389.68,502.08 261.36,393.52 132.96,502.08 112.32,477.68 261.36,351.6 410.32,477.68 "/>
<rect x="21.36" y="30.72" style="fill:#8AD5DD;" width="469.36" height="341.84"/>
<g>
<rect y="9.92" style="fill:#002833;" width="512" height="21.36"/>
<rect y="372.56" style="fill:#002833;" width="512" height="21.36"/>
<rect x="165.36" y="452.56" style="fill:#002833;" width="192" height="10.64"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M99.12,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L180.96,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.4c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L85.12,164L99.12,164
L99.12,164z"/>
<path style="fill:#FFFFFF;" d="M215.36,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L297.2,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L201.44,164
L215.36,164L215.36,164z"/>
<path style="fill:#FFFFFF;" d="M331.6,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L413.44,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88L352.8,239.2h-12.4L317.68,164L331.6,164
L331.6,164z"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-4">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<polygon style="fill:#FF5F5F;" points="431.12,512 382.8,463.68 448.8,397.68 498.16,447.04 "/>
<rect x="341.617" y="351.998" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 881.5287 386.2147)" style="fill:#FF5F5F;" width="38.32" height="47.36"/>
</g>
<g>
<rect x="350.007" y="384.51" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 968.1555 422.1568)" style="fill:#002833;" width="93.279" height="54.159"/>
<circle style="fill:#002833;" cx="219.6" cy="205.76" r="205.76"/>
</g>
<circle style="fill:#EFEFEF;" cx="219.6" cy="205.76" r="184.24"/>
<rect x="140.88" y="201.28" style="fill:#FF5F5F;" width="26.24" height="71.76"/>
<g>
<rect x="97.2" y="230.56" style="fill:#8AD5DD;" width="26.24" height="42.4"/>
<rect x="184.64" y="161.36" style="fill:#8AD5DD;" width="26.24" height="111.6"/>
</g>
<rect x="228.32" y="89.6" style="fill:#FF5F5F;" width="26.24" height="183.36"/>
<rect x="272.08" y="126.64" style="fill:#8AD5DD;" width="26.24" height="146.4"/>
<rect x="315.76" y="185.6" style="fill:#FF5F5F;" width="26.24" height="87.68"/>
</svg>
</div>
<div class="sb-1-icon sb-ic-5">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#002833;" d="M0,355.28V31.36c0-5.76,4.72-10.48,10.48-10.48H501.6c5.68,0,10.4,4.72,10.4,10.48v323.92"/>
<g>
<path style="fill:#E8E8E8;" d="M512,355.28v41.76c0,5.76-4.72,10.48-10.48,10.48H10.48C4.72,407.52,0,402.8,0,397.04v-41.76H512z"
/>
<rect x="146.32" y="480.64" style="fill:#E8E8E8;" width="219.44" height="10.48"/>
</g>
<polygon style="fill:#C9C9C9;" points="329.12,480.64 182.88,480.64 193.28,407.52 318.72,407.52 "/>
<rect x="20.88" y="41.76" style="fill:#EFEFEF;" width="470.24" height="292.56"/>
<circle style="fill:#C9C9C9;" cx="167.28" cy="145.84" r="36.32"/>
<g>
<path style="fill:#002833;" d="M165.6,266.64l-35.12-76.08c0,0-36.8,0.48-36.8,34.32s0,41.68,0,41.68S165.84,266.64,165.6,266.64z"
/>
<path style="fill:#002833;" d="M169.04,266.64l35.12-76.08c0,0,36.8,0.48,36.8,34.32s0,41.68,0,41.68S168.72,266.64,169.04,266.64z
"/>
</g>
<polygon style="fill:#FF5F5F;" points="167.28,190.56 142,190.56 167.28,246.48 192.56,190.56 "/>
<g>
<rect x="282.48" y="135.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="167.2" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="198.56" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="229.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
</g>
</svg>
</div>
</div>
<div class="sb-1-bot">
<div class="sb-page sb-pg-1">
<h2>Dedicated Team</h2>
<p>All of our editors are experienced SEO & content professionals. We build our strategy around your goals and function as an extension of your company.</p>
</div>
<div class="sb-page sb-pg-2">
<h2>Market Research</h2>
<p>We learn about every facet of your industry and competitor strategies to make sure your brand can connect with your target markets first. We go the extra mile by taking advantage of new market opportunities.</p>
</div>
<div class="sb-page sb-pg-3">
<h2>Proven Strategy</h2>
<p>We know what works and what doesn’t. By staying on top of Google’s algorithm updates and using time-tested methods, we can create interesting evergreen content with continuously growing traffic.</p>
</div>
<div class="sb-page sb-pg-4">
<h2>SEO</h2>
<p>We go the extra mile by restructuring and optimizing your site. We also have extensive off-page resources to ensure your content ranks high.</p>
</div>
<div class="sb-page sb-pg-5">
<h2>Branding & Authority</h2>
<p>We perform extensive research to ensure your content will be contributing to your field rather than just diluting it. Brand awareness will grow significantly, and your status as a trusted source will grow with it.</p>
</div>
</div>
<div class="sb-pg-timer"></div>
</div>
<!---
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
-->
You are never changing the opacity on the text portion. You only change the class, adding and removing sb-active.
So, the opacity of the text is determined by the css. If you add opacity to the element, it will override the css.
Instead, add the sb-active class to the element initially.
EDIT:
working example: https://codepen.io/pen/MoRwpq
moved animateBar to a separate function to call initially.
function animateBar()
{
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 3000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}