Is it possible to animate SVG path without use of stroke ? [duplicate] - javascript

This question already has answers here:
How to animate handwriting text on the web page using SVG?
(2 answers)
Closed 6 years ago.
There is my svg:
<svg class="num-frame" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="326.229px" height="242.623px" viewBox="0 0 326.229 242.623" enable-background="new 0 0 326.229 242.623" xml:space="preserve">
<g id="Layer_1">
<g id="Layer_1_1_">
<path class="pathe" stroke-width="4" d="M268.971,60.112c-82.83-148.908-248.519,111.12-145.339,150.875c80.484,30.996,200.946-39.396,168.728-132.591
C261.292-11.486,94.387,6.078,87.437,102.417c-7.715,106.967,139.807,153.589,213.991,93.134c0.709-0.575-0.242-1.804-0.982-1.27
c-59.93,43.702-153.784,28.327-194.988-34.033c-36.732-55.58,0.429-114.795,58.131-131.517
C223.1,11.48,289.667,41.227,294.159,107.434c4.34,63.967-59.375,93.766-112.195,103.209
c-33.778,6.039-74.836,1.325-84.991-36.949c-7.695-28.985,5.878-62.127,19.867-86.895c34.6-61.241,105.552-97.912,150.95-26
C268.258,61.552,269.403,60.889,268.971,60.112L268.971,60.112z" />
</g>
</g>
</svg>
I need to make an animation, that will look like hand drawing this circle (line animation), I know have to make it with help of stroke but than the path will lost it's orginal shape, so I want animate orginal shape (path) in way like with stroke.

You could make put a simpler path on top of that one with a white stroke, and use the 2nd path's stroke-dasharray to do the animation that reveals the path underneath.
By simpler, I mean that the 2nd path would have a single stroke and no fill. Just make sure the stroke-width is wide enough to cover the widest part of the path underneath.

Related

Save end of SVG animation as png (quickly)

The following animated svg shows a point that is translated from left to right:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="432px" height="574px" viewBox="0 0 432 574">
<path d="M217.074,165.651c-36.607,0-66.268,29.589-66.268,66.307c0,36.597,29.66,66.274,66.268,66.274c36.642,0,66.367-29.678,66.367-66.274C283.441,195.241,253.716,165.651,217.074,165.651" fill="#CC0000">
<animateTransform attributeName="transform" type="translate" from="0" to="90" dur="0.01s" fill="freeze"/>
</path>
</svg>
I need to save the svg in the form it looks like at the end of the animation as png/jpg.
My current approach is to set a very short duration for the animation, stop it in the end using fill="freeze" and then take an automated screenshot in Chrome using Javascript. However, one screenshot takes around 0.3 seconds and I need to do it for thousands of svg's so I need to accelerate this. Is there another way to achieve that? Thank you!
There does not seem to be a way to achieve this.
My workaround in the end was to write a function that interpolates the animateTransform statements, inserts them into the SVG code, and stores one SVG per interpolation step.
The drawback is that this only works for animateTransform statements.

How to get bounding coordinates from an SVG path

I'm working on a project that requires bounding draggable elements inside complex shapes, defined ideally by SVG Path elements, using Javascript.
I'm open to other ways of defining the bounds but SVG would tie in better with the source material.
I've tried using pathSegList however this returns undefined, and I've read it's deprecated.
How would I go about getting a list of coordinates from an SVG path element, which I could translate to X/Y coordinates for Javascript?
You can use the .getBBox() method on the path element. Take a look at the snippet:
console.log(document.getElementById('mypath').getBBox());
<svg width="300" height="100" viewBox="0 0 300 100" style="background:#efefef">
<path id="mypath" d="M20,20 L40,20 40,40, 20,40 Z" fill="red" />
</svg>

How to draw an SVG Polyline in right to left direction using D3

I have an SVG Polyline in Left to Right (LTR) mode as follows:
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points="05,30
15,30
15,20
25,20
25,10
35,10" />
</svg>
How to draw this same line in Right to Left (RTL) mode? Should I be using transform or translate properties?
The solution to my question was to simply re-draw the SVG's mirror image. This can be done by using transform, translate and scale properties as below:
transform = "translate($width, 0) scale(-1,1)"
Here, scale() function is used as a mirror function by scaling by -1 along either the x-axis or y-axis.
Code:
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points="05,30
15,30
15,20
25,20
25,10
35,10" transform="translate(50,0) scale(-1, 1)"/>
</svg>
Note: As Robert mentioned in the comments, the global direction attribute is only applicable to text elements but not to the graphic elements. So, in my js file, I check if the direction is rtl or not and then display the mirrored svg if it is true.
The link for the fiddle is here: https://jsfiddle.net/ShellZero/vzaoysw7/5/
The following two links helped me out in solving my problem:
[1] https://sarasoueidan.com/blog/svg-transformations/
[2] https://www.w3.org/TR/SVG/coords.html#Introduction

Adapt Div area to Background img size

I haven't found any solution for this problem but I'm sure that one exists.
I have 4 divs with background images, together comprising a graphical option wheel.
The problem is that each div's background image is triangular, but the area that is occupied by the div is bigger and is a square. When I pass the cursor over each div, it is not working well, because the first div overlaps on top of the second, the second over the third, etc.
I thought about using z-index but that won't work because the first and the second div overlap one another, and so do the third and fourth.
I'm not sure if I've explained my problem very well. If you don't understand something, please let me know.
Here is an image to help you understand what I mean.
Thanks!!
UPDATE WITH CODE
Here is my code:
https://jsfiddle.net/ialex90/x7mx1zqu/
You can only achieve this effect with SVG. See the following base implementation that illustrates how you can both apply CSS and JS to irregular shapes using SVG:
$('path').click(function(e) {
alert(e.target.id);
});
path {
stroke:red;
stroke-width:1;
fill:rgba(255,0,0,0.15);
transition:fill 0.5s;
}
path:hover {
fill:rgba(255,0,0,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 500 250" width="500" height="250">
<g>
<path id="quadrant1" d="M0,250 A250,250 0 0,1 73,73 L161,161 A125,125 0 0,0 125,250 z" />
<path id="quadrant2" d="M73,73 A250,250 0 0,1 250,0 L250,125 A125,125 0 0,0 161,161 z" />
</g>
</svg>

Double arc shape with CSS jquery or javascript

How can I create an arc shape like this:
With CSS or jquery or javascript
You don't even need CSS/JS to draw this. Just use an <svg> element.
<svg width="270" height="120">
<path
d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
stroke-width="3"
stroke="#A5423A"
fill="none"
/>
</svg>
You could use SVG for this. There is an arc path command which you could use.
As your comment states, you want to place content inside the arc and you want them to rotate.
Content like text or image could be placed inside the svg.
Rotation can be achieved with transform=rotate(..).
If you want to do more animations with SVG you could have a look at D3.js. If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.
#AlliterativeAlice is correct.
But for this shape I would use two arcs instead of a lot of C paths.
I also prefer to use relative paths instead of absolute one.
So my solution used arcs and lines instead of only Bezier Curves.
<svg width="300px" height="300px" viewBox="0 0 100 100">
<path d="m 10,60
a 50 50 0 0 1 80,0
l -10,10
a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

Categories