Manipulate SVG element using external jQuery? - javascript

I've designed logo using Illustrator and I saved as SVG file. Inside SVG file I created style for rotate animation1 and animation2 using classes for a different groups and I called svg file in html via tag. Animation1 is active as default and animation2 isn't. What I want is to toggle this classes (class1 for group1 and class2 for gorup2) when I click on this logo using external jQuery. My SVG file is:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="120px" viewBox="0 0 362 363" enable-background="new 0 0 362 363" xml:space="preserve">
<defs>
<style type="text/css">
tspan{
font-family: 'Lato', sans-serif;
}
.animation1 {
-webkit-animation: animCircle 3s linear infinite;
-o-animation: animCircle 3s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
#-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
.animation {
-webkit-animation: animCircle 5s linear infinite;
-o-animation: animCircle 5s linear infinite;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
#-webkit-keyframes animCircle{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animCircle{
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
</style>
<script type="text/javascript" xlink:href="js/custom.js" xlink:actuate="onLoad" xlink:show="other" xlink:type="simple" />
</defs>
<g id="emblem" class="animation1">
<g id="iconLogo">
<path fill="#005B9A" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" d="M357.67,148.25v67.5h-16.15
c-4.24,20.25-12.21,39.12-23.17,55.87l11.44,11.44l-47.73,47.73l-11.44-11.44c-16.75,10.96-35.62,18.93-55.87,23.17v16.15h-67.5
v-16.15c-20.25-4.24-39.12-12.21-55.87-23.17l-11.44,11.44l-47.73-47.73l11.44-11.44C32.69,254.87,24.72,236,20.48,215.75H4.33
v-67.5h16.15c4.24-20.25,12.21-39.12,23.17-55.87L32.21,80.94l47.73-47.73l11.44,11.44c16.75-10.96,35.62-18.93,55.87-23.17V5.33
h67.5v16.15c20.25,4.24,39.12,12.21,55.87,23.17l11.44-11.44l47.73,47.73l-11.44,11.44c10.96,16.75,18.93,35.62,23.17,55.87H357.67z
"/>
<path fill="#FFFFFF" d="M208.754,208.408c-12.424,12.424-31.678,13.873-45.693,4.327l-5.042,5.042l-9.546-9.546l5.042-5.042
c-9.546-14.015-8.096-33.269,4.327-45.693c14.057-14.057,36.854-14.057,50.912,0C222.811,171.553,222.811,194.35,208.754,208.408z"
/>
</g>
<g>
<circle fill="none" cx="183.297" cy="182.953" r="109.277"/>
<text transform="matrix(0.8249 -0.5653 0.5653 0.8249 109.9386 100.7383)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427">V</tspan><tspan x="27.717" y="0.077" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="13.856">E</tspan><tspan x="52.298" y="5.961" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="27.614">K</tspan><tspan x="76.389" y="18.466" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="41.684">T</tspan><tspan x="97.016" y="36.296" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="57.125">O</tspan><tspan x="114.044" y="63.021" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="48.1427" rotate="72.517">R</tspan></text>
<circle fill="none" cx="183.297" cy="182.953" r="133.77"/>
<text transform="matrix(0.2461 0.9692 -0.9692 0.2461 49.5323 199.7095)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40">m</tspan><tspan x="37.252" y="-1.18" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-13.269">a</tspan><tspan x="60.306" y="-7.04" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-22.408">ลก</tspan><tspan x="77.09" y="-14.247" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-29.238">i</tspan><tspan x="89.377" y="-20.906" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-37.504">n</tspan><tspan x="108.688" y="-36.317" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-46.873">s</tspan><tspan x="121.576" y="-50.158" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-55.687">k</tspan><tspan x="134.513" y="-69.532" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-65.856">a</tspan><tspan x="143.672" y="-91.19" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-74.068"> </tspan><tspan x="147.53" y="-104.779" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-80.884">r</tspan><tspan x="150.427" y="-122.863" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-89.86">a</tspan><tspan x="150.245" y="-147.132" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-100.445">d</tspan><tspan x="145.187" y="-171.404" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-108.708">i</tspan><tspan x="140.896" y="-184.64" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-116.823">o</tspan><tspan x="129.464" y="-206.605" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-127.571">n</tspan><tspan x="114.182" y="-225.557" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-135.775">i</tspan><tspan x="104.422" y="-235.227" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-143.335">c</tspan><tspan x="85.943" y="-248.721" fill="#FFFFFF" font-family="'TrebuchetMS'" font-size="40" rotate="-153.366">a</tspan></text>
</g>
</g>
</svg>
Any help?

Related

change(edit) svg dashed line circle animate from hover run to infinite run

greeting
the next code(two circle) it was run when mouse pointer hover over it, so the circle color change from one to another. i edit it so it now look like fan or some rotation animation, but it still need mouse pointer to run.
i hope find help for edit it so it auto run, and keep repeat(loop).
<html>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<defs>
<style>
.another-circle {
stroke-dasharray: 10;
stroke-dashoffset: 500;
transition: stroke-dashoffset 1s linear ;
}
.another-circle:hover {
stroke-dashoffset: 0;
}
</style>
</defs>
<circle cx="50" cy="50" r="36" fill="transparent" stroke="red" stroke-width="4" />
<circle transform="rotate(-90 40 40)" class="another-circle" cx="30" cy="50" r="36" fill="transparent" stroke="blue" stroke-width="60" />
</svg>
</body>
</html>
thanks in advance

What about using animation instead? It will run without hovering or using JavaScript.
Instead of animating the dasharray (dashoffset) I will go for transform/rotate. The dasharray is a bit tricky in this case because it is cut off.
.another-circle {
stroke-dasharray: 10;
transform-origin: center;
animation: rotateme 1s linear infinite;
}
#keyframes rotateme {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 100 100" xml:space="preserve">
<circle cx="50" cy="50" r="36" fill="none" stroke="red" stroke-width="4" />
<circle class="another-circle" cx="50" cy="50" r="36" fill="none" stroke="blue" stroke-width="60" pathLength="200" />
</svg>

How to apply template in onclick method

So i have a xslt file with more than two circles which differentiate through their id. When I click on one circle, I want the other circles to collapse and to move the clicked circle to a specific position. When I click on the circle again, I want all other circles to show again on the right position.
How do i do that?

After you have generated the SVG using XSL it is probably better to do all the interactive part using JavaScript and CSS. This could be an example:
var svg = document.getElementById('svg01');
svg.addEventListener('click', e => {
if (e.target.nodeName == 'circle') {
svg.querySelectorAll('circle').forEach(c => c.classList.remove('active'));
e.target.classList.add('active');
svg.classList.toggle('collaps');
}
});
svg circle {
transition: all .5s ease;
}
.collaps circle {
r: 1px;
opacity: 5%;
cx: 1px;
cy: 1px;
}
.collaps circle.active {
r: 40px;
opacity: 100%;
cx: 50%;
cy: 50%;
}
<svg xmlns="http://www.w3.org/2000/svg" id="svg01" viewBox="0 0 100 100" height="400">
<circle cx="20" cy="20" r="5" fill="red"/>
<circle cx="10" cy="30" r="5" fill="red"/>
<circle cx="50" cy="20" r="5" fill="red"/>
<circle cx="80" cy="40" r="5" fill="red"/>
<circle cx="70" cy="10" r="5" fill="red"/>
</svg>
Update
OP would like to include a text also. So, here I placed the circle and the text in a <g> element. I scale and translate each <g> element. Problem is that you cannot mix SVG tranforms and CSS transforms, so all the initial positions are also done in CSS. Using XSL you could make a <style> element that takes each id from the XML element, something like: <style>g#id-of-element {translate: transform(10px, 50px)} ... </style> as an alternative to all my nth-child selectors. Btw: scaling and translating at the same time is a bit tricky...
var svg = document.getElementById('svg01');
svg.addEventListener('click', e => {
if (e.target.nodeName == 'circle') {
let g = e.target.closest('g');
svg.querySelectorAll('g').forEach(g => g.classList.remove('active'));
g.classList.add('active');
svg.classList.toggle('collaps');
}
});
svg g {
transition: all .5s ease;
transform-origin: center;
}
svg g:nth-child(1) {
transform: translate(20px, 20px);
}
svg g:nth-child(2) {
transform: translate(10px, 30px);
}
svg g:nth-child(3) {
transform: translate(50px, 20px);
}
svg g:nth-child(4) {
transform: translate(80px, 40px);
}
svg g:nth-child(5) {
transform: translate(70px, 10px);
}
svg.collaps g {
transform: translate(-25%, -25%) scale(.5);
opacity: 5%;
}
.collaps g.active {
transform: scale(8) translate(45%, 45%);
opacity: 100%;
}
<svg xmlns="http://www.w3.org/2000/svg" id="svg01" viewBox="0 0 100 100" height="400">
<g>
<circle cx="5" cy="5" r="5" fill="red" />
<text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
</g>
<g>
<circle cx="5" cy="5" r="5" fill="red" />
<text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
</g>
<g>
<circle cx="5" cy="5" r="5" fill="red" />
<text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
</g>
<g>
<circle cx="5" cy="5" r="5" fill="red" />
<text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
</g>
<g>
<circle cx="5" cy="5" r="5" fill="red" />
<text transform="translate(5 5)" font-size="4" dominant-baseline="middle" text-anchor="middle" pointer-events="none">Text</text>
</g>
</svg>

I can suggest three options:
(a) Write Javascript code to make changes to the HTML page when the event occurs (you can still use XSLT to generate the HTML page in the first place).
(b) Write Javascript code to invoke a new XSLT transformation that modifies the HTML page when the event occurs, using the XSLT processor API.
(c) Write the whole application in XSLT 3.0 using Saxon-JS, including the event handling, as suggested in comments by Martin Honnen.
Which of these appeals to you largely depends on whether you're more comfortable (and more productive) writing Javascript or XSLT -- perhaps also with a thought to the future maintainability of the code.

How can I start this animation when it is visible? [duplicate]

This question already has answers here:
Activate CSS3 animation when the content scrolls into view
(6 answers)
Closed 3 years ago.
.responsive {
width:200px;
float:left;
margin-top: 750px;
margin-bottom: 750px;
}
.st0 {
fill: #ffffff;
}
.st1 {
fill: none;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st2 {
fill: #ffffff;
stroke: #afafaf;
stroke-width: 4;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #2646ff;
stroke-width: 7;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
#responsive .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 0;
animation: responsive 4s ease-in-out 0s;
animation-direction: reverse;
}
#keyframes responsive {
to {
stroke-dashoffset: 1932;
}
}
<div class="responsive">
<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 1200 780"
style="enable-background:new 0 0 1200 780;"
xml:space="preserve"
>
<g id="Layer_1"></g>
<g id="Layer_6">
<g>
<g>
<path
class="st0"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
<path
class="st1"
d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
/>
</g>
<line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
<ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
</g>
</g>
<g id="Layer_5">
<g>
<g>
<path
class="st0"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
</g>
</g>
<g id="Layer_4">
<g>
<g>
<path
class="st0"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
<path
class="st1"
d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
/>
</g>
<line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
</g>
</g>
<g id="responsive">
<g>
<path
class="st3"
d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2"
/>
</g>
</g>
</svg>
</div>
Scroll down in the snippet to view the svg + animation.
I want to start this animation when svg (animation) is in view. How can I do this? I came across a lot of javascript code but the problem is it's all too complicated with different kind of classes etc. I just do wanna start the animation 1 time and then keep it in the ending state (so not looping or anything).
I gave the section .responsive some margin top and bottom, normally there is content in between the white areas.

If you wanna a simple solution, then WOW.js is your choice :)
Steps to add animation for your svg:
Install wow.js as it said in documentation of plugin.
Add wow classname to your animation wrapper, and start css animation on
.animated #responsive .st3 {
stroke-dasharray: 1932;
stroke-dashoffset: 0;
animation: responsive 4s ease-in-out 0s;
animation-direction: reverse;
}
This is example of how your wow.js init should look like :)
wow = new WOW(
{
boxClass: 'wow', // add this className to animation wrapper
animateClass: 'animated', // class added by lib, when your item are in view
offset: 0, // number of px before item appear on screen and animation starts
mobile: true, // default
live: true // `true` if you add items on page dynamically
}
)
wow.init();

Drawing of SVG path does not start from 0

I am drawing some SVG-paths using CSS animations. It all works fine when drawing all the paths at the same time. When adding a delay to the animation, some of the parts of the paths are visible before starting the animation. They then suddenly disappear and the animation goes on just like I want it to.
Here is a codepen of it happening: Check here
// SVG code
var svgs = document.getElementsByTagName('svg');
function selfdraw(name){
for(var i=0; i<name.length; i++){
name[i].classList.add('draw');
}
}
/* SVG Styles */
svg *{
fill:none;
stroke:none;
stroke-dasharray: 0% 100%;
}
.draw .st0 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.draw .st1 {
stroke: #3DBAC4;
stroke-width:5;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 2s;
}
.draw .st2 {
stroke: #3DBAC4;
stroke-width:5;
stroke-linecap:square;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 3s;
}
.draw .st3 {
stroke: #8BD6DC;
stroke-width:3;
stroke-miterlimit:10;
-webkit-animation: self-draw 3s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-delay: 4s;
}
#-webkit-keyframes self-draw{
0% { stroke-dasharray: 0% 100% }
100% { stroke-dasharray: 100% 0% }
}
<div style ="max-width:200px;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 180 554" style="enable-background:new 0 0 180 554;" xml:space="preserve">
<path class="st0" d="M50.38,130.89l0.3-109.65l84.9,0.68l-0.3,109.65L50.38,130.89z"/>
<g>
<g>
<line class="st1" x1="69.19" y1="103.99" x2="116.08" y2="104.24"/>
</g>
<g>
<line class="st1" x1="69.28" y1="87.07" x2="116.17" y2="87.32"/>
</g>
<g>
<line class="st1" x1="69.37" y1="70.15" x2="116.26" y2="70.4"/>
</g>
<g>
<line class="st1" x1="69.46" y1="53.22" x2="116.35" y2="53.48"/>
</g>
</g>
<g>
<line class="st2" x1="82.77" y1="300.98" x2="79.54" y2="265.43"/>
</g>
<g>
<g>
<path class="st2" d="M104.68,507.15H85.32c-5.96,0-10.8-4.84-10.8-10.8v-20.83c-10.83-6.95-17.52-19.11-17.52-32
c0-20.95,17.05-38,38-38s38,17.05,38,38c0,12.89-6.68,25.05-17.52,32v20.83C115.48,502.31,110.64,507.15,104.68,507.15z"/>
</g>
</g>
<g>
<g>
<line class="st1" x1="73.82" y1="446.52" x2="116.13" y2="446.45"/>
</g>
</g>
<g>
<g>
<path class="st2" d="M104.62,518.15H85.38v-33.28h19.24V518.15z"/>
</g>
</g>
<polyline class="st1" points="80.36,432.84 92.5,484 97.5,484 110.06,432.39 "/>
<path class="st3" d="M94.86,143.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M94.86,337.85c-1.5,2.41-1.49,5.41,0.02,7.82c0.42,0.67,0.89,1.29,1.33,1.89c0.82,1.1,1.59,2.13,1.72,3.01
c0.16,1.13-0.85,2.7-1.84,4.21c-1.48,2.27-3.15,4.85-1.97,7.67c0.52,1.24,1.3,2.27,2.06,3.27c0.64,0.84,1.24,1.63,1.56,2.41
c0.36,0.88-0.06,2.23-1.22,3.8c-1.53,2.07-3.26,4.42-2.86,7.11c0.28,1.88,1.39,3.37,2.47,4.81c0.42,0.57,0.82,1.1,1.16,1.65
c0.69,1.11,0.69,2.44-0.01,3.56c-0.34,0.54-0.73,1.06-1.15,1.62c-1.08,1.45-2.21,2.95-2.48,4.85"/>
<path class="st3" d="M142.84,376.94c-0.27,1.32-0.2,2.61-0.14,3.86c0.05,1.05,0.1,2.05-0.07,2.87c-0.2,0.93-1.31,1.81-3.15,2.45
c-2.43,0.85-5.19,1.82-6.37,4.26c-0.82,1.71-0.75,3.57-0.67,5.36c0.03,0.71,0.06,1.38,0.03,2.02c-0.06,1.31-0.81,2.4-2.02,2.93
c-0.58,0.25-1.2,0.47-1.86,0.69c-1.71,0.59-3.49,1.2-4.78,2.61"/>
<path class="st3" d="M170.49,420.46c-0.86,1.04-1.41,2.2-1.95,3.33c-0.45,0.95-0.88,1.85-1.42,2.5c-0.61,0.73-2.01,0.98-3.94,0.67
c-2.55-0.4-5.43-0.85-7.63,0.74c-1.53,1.12-2.34,2.79-3.12,4.41c-0.31,0.64-0.6,1.24-0.92,1.79c-0.67,1.12-1.85,1.73-3.16,1.63
c-0.63-0.05-1.28-0.16-1.97-0.27c-1.79-0.29-3.64-0.59-5.45,0.04"/>
<path class="st3" d="M169.88,474.23c-1.33,0.23-2.51,0.76-3.64,1.27c-0.96,0.43-1.87,0.84-2.7,0.98c-0.94,0.16-2.16-0.56-3.43-2.04
c-1.68-1.95-3.58-4.17-6.29-4.38c-1.89-0.14-3.59,0.61-5.24,1.33c-0.65,0.29-1.26,0.56-1.87,0.76c-1.24,0.42-2.53,0.12-3.46-0.81
c-0.45-0.45-0.87-0.95-1.33-1.48c-1.17-1.38-2.39-2.81-4.17-3.5"/>
<path class="st3" d="M21.69,479.37c0.92-0.98,1.55-2.11,2.16-3.2c0.51-0.92,0.99-1.79,1.57-2.4c0.66-0.69,2.07-0.85,3.97-0.42
c2.51,0.56,5.37,1.2,7.66-0.25c1.6-1.02,2.52-2.64,3.4-4.2c0.35-0.62,0.68-1.2,1.04-1.73c0.74-1.08,1.95-1.61,3.26-1.42
c0.63,0.09,1.27,0.24,1.95,0.39c1.77,0.41,3.59,0.82,5.44,0.31"/>
<path class="st3" d="M15.18,429.81c1.28-0.43,2.36-1.13,3.41-1.8c0.89-0.57,1.72-1.11,2.52-1.37c0.9-0.29,2.22,0.23,3.7,1.51
c1.95,1.68,4.16,3.59,6.87,3.4c1.89-0.14,3.46-1.13,4.98-2.1c0.6-0.38,1.16-0.74,1.73-1.03c1.16-0.6,2.48-0.5,3.54,0.29
c0.51,0.38,1,0.81,1.53,1.27c1.36,1.19,2.78,2.43,4.65,2.84"/>
<path class="st3" d="M41.1,379.47c1.25,0.5,2.53,0.68,3.77,0.84c1.04,0.14,2.03,0.27,2.81,0.59c0.88,0.36,1.54,1.62,1.84,3.54
c0.39,2.55,0.84,5.43,3.02,7.04c1.53,1.12,3.37,1.38,5.15,1.63c0.7,0.1,1.36,0.19,1.99,0.34c1.27,0.29,2.21,1.23,2.51,2.52
c0.14,0.62,0.24,1.27,0.34,1.96c0.27,1.79,0.54,3.65,1.7,5.18"/>
<line class="st2" x1="63" y1="243.52" x2="125" y2="243.52"/>
<polygon class="st2" points="131.5,214.5 56.5,214.5 52.5,243.5 61.5,243.5 70.27,325.92 117.74,325.92 126.41,243.5 135.5,243.5
"/>
</svg>
</div>
<button onclick="selfdraw(svgs)">CLICK ME</button>
I would like all the paths to be invisible from the start, and then draw themselves out nicely. I don't see what I have done wrong.

How can I put an animation in the path of my circular progress bar?

I have a circular progress bar that has two paths. On one of those paths increases in length as the data comes in, eventually turning the entire circle red.
SVG HTML
<path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" stroke-width="4" fill-opacity="0">
</path>
<path id="path2" d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#EB483F" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 295.416, 295.416; stroke-dashoffset: 250"></path>
</svg>
CSS (Just makes loading of red path smoother)
#path2 {
-webkit-transition-property: stroke-dashoffset; /* Safari */
transition-property: stroke-dashoffset;
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 0.3s;
}
.viewbox {
width: 50%;
}
https://jsfiddle.net/z5yb5kr9/
I would like for the remaining gray portion to have an animation such as a small div running through it lighting it up. Something similar to this
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader
I believe that I need to add some sort of keyframe animation and put the div inside the Path of the svg but I am not sure exactly what the method for doing so is.

Here's one way you could do the pulsing anumation on a circular progress bar.
In order to get the pulse effect showing inside a growing progress bar, the most obvious way is to create the pulse effect as it's own animation, then mask it with the actually progress arc.
Firstly, let's start with the plain red progress bar. I've added a grow animation for testing.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#EB483F" stroke-width="6" fill="none"/>
</svg>
Next, let's create our pulse animation which mimics the example you gave in an answer that was deleted.
.viewbox {
width: 50%;
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</svg>
It's just a translucent circle (with a dash animation) on a red background.
The penultimate step is to convert the first example into the form we need for a mask. In masks, black is transparent and white is opaque.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</svg>
The final step is to combine the last two steps. We turn the previous step into a proper <mask> and use it to mask the pulse animation.
.viewbox {
width: 50%;
}
#progress {
stroke-dasharray: 296 296;
stroke-dashoffset: 296;
animation: grow 5s ease-out infinite;
}
#keyframes grow {
100% { stroke-dashoffset: 0; }
}
#pulse {
stroke-dasharray: 0 0 0 296;
animation: pulse 1.5s linear infinite;
}
#keyframes pulse {
33% { stroke-dasharray: 0 0 148 296; }
66% { stroke-dasharray: 0 50 200 296; }
100% { stroke-dasharray: 0 296 0 296; }
}
<svg class="viewbox" viewBox="0 0 100 100">
<defs>
<mask id="progress-as-mask" >
<rect width="100" height="100" fill="black"/>
<circle id="progress" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="6" fill="none"/>
</mask>
</defs>
<circle id="grey" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)"
stroke="#A9B0B7" stroke-width="4" fill="none"/>
<g mask="url(#progress-as-mask)">
<rect width="100" height="100" fill="#EB483F"/>
<circle id="pulse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="white" stroke-width="8" stroke-opacity="0.4" fill="none"/>
</g>
</svg>
You weren't entirely clear on what you wanted. But hopefully, this has at least got you started.

Categories