I need to make the note traverse along the path that is drawn, i found a way in by translating the path to the starting position of the note. But is there a workaround by which I can keep the position of the path fixed yet make the note traverse along the path.
My code
<svg width="900" height="900" viewBox="0 0 900 900" xmlns:xlink="http://www.w3.org/1999/xlink">
<g >
<path id="motion" fill="none" stroke="#000000" stroke-miterlimit="10" class="st0" d="M0,306c0,0,155-108.6,313.8-65.3s123.7,101,256.7,105.2S733.1,191.2,792,188.2" />
</g>
<g id="car" transform="translate(-100,150)">
<path id="note" fill="red"transform="scale(.5,.5)" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
</g>
<animateMotion xlink:href="#car" dur="5s" begin="click" fill="freeze" repeatCount="indefinite" origin="(0,6)">
<mpath xlink:href="#motion" />
</animateMotion>
</svg>
JSFiddle example
Related
I am not very familiar in working with SVG and am trying to animate a <path> line:
The following is what I am trying to achieve
The orange circle at the end should run along the blue line, however I cannot figure out how to get the loop at the end of the line (the red block in the middle can be ignored, it is a custom icon).
so far I have the following:
<svg width="192" height="160" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
<animateMotion dur="1s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path"/>
</animateMotion>
</circle>
<path id="path" d="M10 50 Q 95 150 180 120" stroke="red" stroke-width="2" fill="none"/>
</svg>
Here is codepen for the same: https://codepen.io/undert0w/pen/jOVVJMe
How can I extend the blue line with a loop and have the orange circle follow the blue line?
(ps. I am using Angular if it makes any difference)
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path"/>
</animateMotion>
</circle>
<path id="path" d="M61,50c0,0,76,143,163,103S288-1,411,50s180,90,113,165s-203-16-207-53s163-99,154-30c0,0-14,55-30,55
s-33.5-6.7-76-23s-29-87.1-76-23.6S224,229,177,213s-91,2-59-64s27-87,68-91s9,35,82,36s55,14,112-20S480-35,528,31s38,106,5,127
s-43,50-27,62s45,19,45,19" stroke="red" stroke-width="2" fill="none"/>
</svg>
The easiest way is to draw the line you want in Illustrator, then save it as SVG
after that just click: SVG Code and take the code of path between d="...."
!!Remember!! to adjust the viewBox area
Here is a code that's done this way.
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
<animateMotion dur="1s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path"/>
</animateMotion>
</circle>
<path id="path" d="M61,50c0,0,76,143,163,103S288-1,411,50s180,90,113,165s-203-16-207-53s163-99,154-30" stroke="red" stroke-width="2" fill="none"/>
</svg>
Not sure if I got the question right. But if you are trying to create a loop path with the blue line.
Try creating the path in any svg editor and copy the source.
You can understand clearly from this recording.
https://youtu.be/vjLCAMaBr4A
I'm trying to show parts of an image with a fade in animation. So this is what I've done:
I created an SVG with 2 paths (2 parts of the image that I want to show with a fade in animation)
I clipped the SVG to the image
The result is: the image has a mask and only those 2 parts are shown.
Everything's good but now I have to animate them and I cannot find enything that help me. Can you?
This is my code
<style>
img {
clip-path: url(#clip);
width: 100%;
}
</style>
<img src="https://wikitesti.com/wp-content/uploads/2020/11/yellow-is-the-color-of.jpg"/>
<svg xmlns="http://www.w3.org/2000/svg"
width="3.33333in" height="2.5in"
viewBox="0 0 1000 750">
<clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.001, 0.0013333333333333)">
<path id="path" d="M 416.00,140.00
C 426.58,139.14 423.70,137.74 438.00,138.00
440.13,138.04 442.65,137.95 444.26,139.60
446.32,141.71 446.00,146.23 446.00,149.00
446.00,149.00 446.00,175.00 446.00,175.00
446.00,175.00 452.00,230.00 452.00,230.00
452.00,230.00 452.00,242.00 452.00,242.00
452.00,242.00 454.66,271.00 454.66,271.00
454.66,271.00 454.09,277.00 454.09,277.00
454.09,277.00 458.25,312.00 458.25,312.00
459.85,321.79 462.98,335.77 463.00,345.00
463.00,345.00 465.00,372.00 465.00,372.00
465.02,385.91 468.58,409.91 462.00,422.00
462.00,422.00 435.08,408.00 435.08,408.00
435.08,408.00 435.08,397.00 435.08,397.00
435.08,397.00 436.82,381.00 436.82,381.00
436.82,381.00 433.17,360.00 433.17,360.00
433.17,360.00 431.48,338.00 431.48,338.00
431.48,338.00 424.17,308.00 424.17,308.00
424.17,308.00 424.95,294.00 424.95,294.00
424.95,294.00 424.95,283.00 424.95,283.00
424.95,283.00 424.09,273.00 424.09,273.00
424.09,273.00 421.91,239.00 421.91,239.00
421.91,239.00 421.00,227.00 421.00,227.00
421.00,227.00 421.00,202.00 421.00,202.00
421.00,202.00 420.00,190.00 420.00,190.00
420.00,190.00 420.00,179.00 420.00,179.00
420.00,179.00 419.00,165.00 419.00,165.00
419.00,165.00 417.79,148.00 417.79,148.00
417.79,148.00 416.00,140.00 416.00,140.00 Z" fill="#C4C4C4"/>
<path class="fade-in three" id="path2" d="M 530.00,168.00
C 530.00,168.00 588.00,168.00 588.00,168.00
588.00,168.00 588.00,468.00 588.00,468.00
588.00,468.00 530.00,468.00 530.00,468.00
530.00,468.00 530.00,168.00 530.00,168.00 Z" fill="#C4C4C4" />
</clipPath>
</svg>
Thank you.
[EDIT]
I tried to do something like this:
<path....>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</path>
But it seems like if path is clipped opacity doesn't work
[EDIT]
I have to animate them with different duration and delay so I cannot just animate the image
[DESIRED RESULT]
This should be the final results. Same picture, different masks and different fade in effect time
SOLVED!!!
Solution is not clipping the path to the image but setting the image as path background and then animate the path.
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg"
width="50%" height="50%"
viewBox="0 0 1000 750">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1000" height="750">
<image href="image_to_mask.jpg" x="0" y="0" width="1000" height="750" />
</pattern>
</defs>
<path id="path1" opacity="0" d="M 296.00,277.00
C 296.00,277.00 699.00,277.00 699.00,277.00
699.00,277.00 699.00,353.00 699.00,353.00
699.00,353.00 296.00,353.00 296.00,353.00
296.00,353.00 296.00,277.00 296.00,277.00 Z" fill="url(#img1)">
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="0.5s" fill="freeze"/>
</path>
<path id="path2" opacity="0" d="M 222.00,466.00
C 222.00,466.00 792.00,466.00 792.00,466.00
792.00,466.00 792.00,580.00 792.00,580.00
792.00,580.00 222.00,580.00 222.00,580.00
222.00,580.00 222.00,466.00 222.00,466.00 Z" fill="url(#img1)">
<animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="0.5s" begin="0.5s" fill="freeze"/>
</path>
</svg>
I have a repeating 20-second svg animation. Halfway (10 seconds) it should abruptly hide one path-element called leftside. When the animation finishes and repeats, it should show the element again. How can I achieve this?
Right now, I got the first loop working. But the reset when the animation repeats isn't working unfortunately.
This is what I have:
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<animateMotion id="movement"
xlink:href="#vehicle"
dur="20s"
begin="0;movement.end+4s"
fill="freeze"
keyPoints="0;1;0"
keyTimes="0;0.5;1"
calcMode="spline"
keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="10s;movement.begin+10s;" repeatCount="indefinitive" fill="freeze" />
<animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" repeatCount="indefinitive" fill="freeze" />
</svg>
Mybe so?
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle" stroke-width="2" stroke="red">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<!-- Two dash move forward 10s -->
<animateMotion id="movement_forward"
xlink:href="#vehicle"
dur="10s"
begin="0;movement_back.end"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<!-- One dash goes back 10 seconds -->
<animateMotion id="movement_back"
xlink:href="#rightside"
dur="10s"
begin="movement_forward.end"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
begin="0;movement_back.end" - the restart of the first animation starts after the end of the second animation
begin="movement_forward.end - thus, two animations loop. When the first animation ends, the second animation begins
For uneven movement on different sections of the path, you need to change the attribute values:
keyPoints="0;0.2;0.4;0.8;1"
keyTimes="0;0.495;0.6;0.75;1"
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle" stroke-width="2" stroke="red">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<!-- Two dash move forward 10s -->
<animateMotion id="movement_forward"
xlink:href="#vehicle"
dur="10s"
begin="0;movement_back.end"
keyPoints="0;0.2;0.4;0.8;1"
keyTimes="0;0.495;0.6;0.75;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<!-- One dash goes back 10 seconds -->
<animateMotion id="movement_back"
xlink:href="#rightside"
dur="10s"
begin="movement_forward.end"
keyPoints="1;0.8;0.4;0.2;0"
keyTimes="0;0.495;0.6;0.75;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
This is hard to follow for me, but I got this solution:
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<animateMotion id="movement"
xlink:href="#vehicle"
dur="20s"
begin="0;movement.end+4s"
fill="freeze"
keyPoints="0;1;0"
keyTimes="0;0.5;1"
calcMode="spline"
keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="movement.begin+10s; 20s" fill="freeze" />
<animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" fill="freeze" />
</svg>
A couple of points:
If you want to repeat the animation, the keyword is indefinite, not indefinitive.
You apparently wanted to set the leftside animation to indefinite. This would apply to the opacity animation itself, with a 0.01s duration. This means that, after being triggered, the animation would be repeating itself every 0.01s in a blinking pattern.
I believe the issue here is related to the interplay between both leftside animations, and which one has the preference at each time. However, it looks like a complex issue, and I do not understand it fully (explained here).
I have following svg code works great in Chrome, but the marker did not show in Firefox. Is there someone know why? Thanks!
<svg id="exhibition_svg" width="1235" height="487" class="exhibitionSvg"
viewBox="-139.2135523613963,-60,806.4271047227926,318"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="bgPoint" width="800%" height="800%" x="-200%" y="-200%">
<feGaussianBlur stdDeviation="1" width="800%" height="800%" x="-300%"
y="-300%">
</feGaussianBlur>
</filter>
<marker id="app5end-arrow-active" viewBox="0 0 14 14" refX="7" refY="7"
markerWidth="3" markerHeight="3" orient="auto" filter="url(#bgPoint)">
<g>
<circle cx="7" cy="7" r="5" fill="#122C34" stroke="#3AD5C9" stroke-width="1">
</circle>
<circle cx="7" cy="7" r="2" fill="#122C34" stroke="#3AD5C9" stroke-width="2">
</circle>
</g>
</marker>
</defs>
<g>
<path class="connect_line" d="M245,153L250,153L283,153L283,153"
stroke="#0F364B" fill="none" stroke-width="7" rotate="auto"
marker-end="url(#app5end-arrow-active)"
marker-start="url(#app5end-arrow-active)">
</path>
</g>
</svg>
I also put it on codepen: https://codepen.io/rrandom/pen/yXrRZQ , please have a look
If I zoom in and slide my mouse on this rectangles someone of them will stay half-capacity. How can it to fix, to have got ideal situation, as it would be if slide mouse slowly. For example code like this, open with FireFox:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<g id="switcher" cursor="pointer" stroke-width="0.1">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.02;1.02;1" repeatCount="3" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
</rect>
</g>
</defs>
<line x1="-200" y1="0" x2="200" y2="0" stroke-width="1" stroke="blue" />
<line x1="0" y1="200" x2="0" y2="-200" stroke-width="1" stroke="blue" />
<line x1="-200" y1="200" x2="200" y2="200" stroke-width="1" stroke="blue" />
<line x1="-200" y1="-200" x2="200" y2="-200" stroke-width="1" stroke="blue" />
<g transform="translate(0,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(-200,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(200,-200)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(0,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(-200,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
<g transform="translate(200,0)" >
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#switcher" />
</g>
</g>
</svg>
</body>
Well, I have no experience in SVG, and this may be bad practice, but if you add an additional <set.. /> to reverse the opacity animation on mouseout, the animation stops being "sticky" (at least it does on my computer running Firefox 32 beta):
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>