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
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
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>
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';
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>
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.