How to use stroke-offset to animating path in this SVG - javascript

How can I use stroke-offset to animating path in this SVG? I very appreciate it if anyone can help me.
<svg xmlns="http://www.w3.org/2000/svg" id="logo" width="200" viewBox="0 0 132.64 140.91">
<path id="path1" d="M123.26 15.4C115.58 5 103.78 0 87.17 0H0v6.73h87.17c15.08 0 25.63 4.35 32.26 13.3 7.25 9.78 7.93 18.38 7.93 38.71v23.32c0 20.4-.68 29-7.93 38.83-8.65 11.67-20.62 13.29-32.26 13.29H5.27V33.26H0v107.65h87.17c12.21 0 26-1.83 36.08-15.39 8.95-12.08 9.39-23.79 9.39-43.46V58.74c0-19.6-.44-31.28-9.38-43.34z" fill="#f96464"/>
<path id="path2" d="M109.31 25.48c7.84 9.08 7.76 19.83 7.76 32v25.89c0 12.13 0 22.91-7.83 32-6.79 7.85-15 8.16-25.69 8.16H15.8V33.26h-7v96.42h78.37c11.74 0 22.23-1.79 29.7-11.88 6.11-8.24 7-15 7-35.74V58.74c0-20.72-.87-27.39-7-35.63-6.87-9.22-17.76-11.89-29.7-11.89H0v6.19h83.55c10.67 0 18.97.23 25.76 8.07z" fill="#00aad8"/>
<path id="path3" d="M103.41 33.8c4.67 5.41 4.88 11.38 4.87 23.29v26.32c0 12.09-.2 18.14-4.94 23.62-4.09 4.73-9.42 5.25-19.79 5.25h-59v-79h-5.24V119h64.24c10.75 0 17.69-.46 23.33-7 6.68-7.72 6.68-16.94 6.67-28.62V57.09c0-11.52 0-20.62-6.6-28.28-5.7-6.58-12.61-6.91-23.4-6.91H0v6.73h83.55c10.69 0 15.8.49 19.86 5.17z" fill="'#b7c406"/>
</svg>
This path is drawn with fill. So, I can not use 'stroke-dashoffset'.

Related

changing svg icon color into different color

Is there any way i could achieve this (see pictures), i have tried with fill="white" but that wont give white color to those parts where i want it, its easier to understand with picture below:
what i have done at the moment:
what i want to achieve:
my code:
import React from "react";
function Graph() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
);
}
export default Graph;
You can use react style to insert color to background
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
style={{ backgroundColor: "black" }}
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
I think your snippet is mostly fine as it is.
If you change all 3 fill="white" to black, and set a white background, it will look as expected

Drawing a box with two sides as an Arc in javascript/svg

I am trying to make a shape like this
and i managed to get this sofar
But i cant get the right arc to go outwards instead of inwards.
I cant find any help online how to do this. I tried rotation and playing around with the rx,ry but no luck.
Here is the JSFiddle to it
JsFiddle
<svg height="200" width="300">
<g stroke="none" fill="blue">
<path d="
M 150 0
a 1 1 0 0 0 0 100
l -100 0
a 1 1 0 0 0 0 -100
l 100 0
Z
"/>
</g>
</svg>
On the first arc, you simply need to flip the sweep-flag to "clockwise":
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
<svg height="200" width="300">
<g stroke="none" fill="blue">
<path d="
M 150 0
a 1 1 0 0 1 0 100
l -100 0
a 1 1 0 0 0 0 -100
l 100 0
Z
"/>
</g>
</svg>

css transition finished before the seconds specified

created SVG circle using path, filled the stroke with animation for particular seconds. the animation finished before the specified seconds gets over. how to resolve
<svg class="progress" id="value-svg" viewBox="0 0 115 115" data-value="66">
<path class="bg"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1" />
<path class="meter"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1"
stroke-dasharray="318" stroke-dashoffset="318" />
<text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">04:00</text>
</svg>
and set stroke-dashoffset from script
value[i].style.transition = value[i].style.WebkitTransition = `stroke-dashoffset ${this.waitime}s ease-in-out`;
value[i].style.strokeDashoffset = '0';

Drawing a partial circle using SVG arcs

I want to draw a partial arc using SVG. According to the docs, the centre of the circle is calculated automatically. But my arc overflows the circle. It is easier to demonstrate it with a picture:
<svg width="500px" height="500px" viewBox="0 0 100 100" style="border: navy solid 1px;">
<g transform="translate(10 10) scale(0.5 0.5)">
<path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
<path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
</g>
</svg>
Here is the link to the codepen link.
You can draw arcs before blue circle (as I draw red one) or make redrawing of circle segment (the last line - I made it green to emphasize but must be blue). So combination of circle arc + segment gives moon crescent form
<path d="M50 50 L50 0 A1 1 0 0 1 100 50 Z" fill="red" opacity="0.7"></path>
<path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
<path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
<path d="M50 0 A50 50 0 0 0 0 50 Z" fill="green"></path>

SVG does not display

The following SVG does not display, what is the problem? It should display with size 40x40px with a color.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="20 20 40 40" fill="#14cc9e">
<path d="M1096 301.5a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z"></path>
</svg>
You can use the command transform = 'translate (-1090 -275)
The fill command works in the svg file header, but it's more correct to move it to the patch
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" style="border:1px solid red;">
<g transform="translate(-1090 -275)">
<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path>
</g>
</svg>
To find the image, it is convenient to use a frame that shows the boundaries of svg in the browser window.
style="border:1px solid red;"
After debugging, the frame can be removed.
The second option
You can also shift the image using parameters min-x, min-y viewBox="1090 275 40 40"
<svg width="40px" height="40px" viewBox="1090 275 40 40" >
<path fill="#14cc9e" d="M1096 301.5 a5.5 5.5 0 1 0 10.96-.66c-.09-.7.16-1.42.66-1.93l4.58-4.58a2.7 2.7 0 0 1 2.12-.79 5.26 5.26 0 0 0 5.46-6.76l-3.17 3.17c-1.6.35-3.9-1.98-3.56-3.56l3.17-3.17a5.36 5.36 0 0 0-5.23 1.32 5.29 5.29 0 0 0-1.52 4.32c.05.67-.2 1.33-.67 1.81l-4.69 4.7c-.5.51-1.22.76-1.94.67a5.5 5.5 0 0 0-6.17 5.46zm3 .58l.7-2.63 2.63-.7 1.92 1.92-.7 2.63-2.63.7z">
</path>
</svg>
You're setting the svg background color with fill. As far as I know this doesn't work. Try using property background-color instead.

Categories