I am having very simple animation of path element. Animation applies to stroke-dashoffset attribute. Problem that I am facing is that I can't get animation progress after pause animation.
Here is my SVG code and javascript which actually do nothing but pause and start animation:
setTimeout(function(){
$('.svg')[0].pauseAnimations();
// get current stroke-dashoffset value ??
// $('#stroke')[0]['stroke-dashoffset'].animVal - it doesn't work
$('.svg')[0].unpauseAnimations();
}, 500); // 500 is testing value (!) it can be anything
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="svg">
<path d="M47.488,10.079A40,40,0,0,0,16.302,71.551" id="stroke" style="stroke-width: 10px; fill: none; stroke: #333;" stroke-dasharray="83.07828521728516px 83.07828521728516px" stroke-dashoffset="-83.07828521728516px">
<animate attributeName="stroke-dashoffset" id="anim2" dur="1000ms" from="-83.07828521728516px" to="-39.095663631663605" fill="freeze"></animate>
</path>
</svg>
I know how to get animation progress when using <circle> element: https://stackoverflow.com/a/17217470/1736186 but I don't know how to get stroke-dashoffset value in <path>.
I can get it done by combining timeout with min/max stroke-dashoffset and calculate approximate progress, but I believe (hope) I am missing something and it can be done easily with animVal.
So please don't post an answer with that kind of solution, because I know how to do it by myself.
Quite interesting, I didn't know there weren't an animVal for all animatable attributes, but it seems that stroke-dashoffset attribute, is directly converted to its style equivalent.
So for your problem, a simple solution is to request the computed style of your element :
setTimeout(function(){
$('.svg')[0].pauseAnimations();
// get current stroke-dashoffset value
console.log( getComputedStyle($('#stroke')[0]).strokeDashoffset );
$('.svg')[0].unpauseAnimations();
}, 500); // 500 is testing value (!) it can be anything
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="svg">
<path d="M47.488,10.079A40,40,0,0,0,16.302,71.551" id="stroke" style="stroke-width: 10px; fill: none; stroke: #333;" stroke-dasharray="83.07828521728516px 83.07828521728516px" stroke-dashoffset="-83.07828521728516px">
<animate attributeName="stroke-dashoffset" id="anim2" dur="1000ms" from="-83.07828521728516px" to="-39.095663631663605" fill="freeze"></animate>
</path>
</svg>
Related
I'm trying to plot the trefoil knot parametrized like in its wiki, using svg.js (but I can change the tool if it's necessary). The problem is that I can't achieve marking the zones where it overlaps like is done here.
I want to think the person that did that example plotted it in a smart way avoiding to deal with each of those spaces one by one, because otherwise doing something like that svg would be a bit expensive (in relation of time) if you need to change of model (or just another knot).
Does anyone know how was it done or was it solved by hand dealing with each space one by one?
The basic idea would be to mask the interruptions. For DRY code, define the rendered path first as templates for reuse.
path {
fill: none;
stroke: black;
}
mask rect {
fill: white;
}
.shadow {
stroke-width: 20;
}
.knot {
stroke-width: 10;
}
<svg style="width:100px;" viewBox="0 0 100 100">
<defs>
<!-- path templates for multiple use -->
<path id="lower" d="M10 10 90 90" />
<path id="higher" d="M10 90 90 10" />
<mask id="mask">
<!-- white background: everything is visible -->
<rect width="100%" height="100%" />
<!-- black line: masked out space for higher path -->
<use href="#higher" class="shadow" />
</mask>
</defs>
<!-- lower path with masked-out gap -->
<use href="#lower" mask="url(#mask)" class="knot" />
<!-- higher path uninterrupted -->
<use href="#higher" class="knot" />
</svg>
I'm trying to put an icon inside an SVG circular graph so that it will display like this: SVG graph example.
No matter what I do, there's always a slight gap between one side of the inner icon and the SVG path that displays like this. I think the issue has to do w/the fact that the arc degree for the SVG circular graph isn't a perfect circle
Here's everything I've already tried:
Created a static png of the inner icon image so that it wasn't a perfect circle + then wrapped the SVG around it
Created SVG in illustrator with the inner icon as a png with two outer paths: one for the grey fill all around and one for the green fill to represent 50%. When I export the file, the d parameter is displaying based on coordinates, not percentages.
<path d="M82,153.53C122.23,153.41,153.2,121,153.46,82,153.69,43.3,122.59,10.94,82,10.49"
fill="none" stroke="#7aef93"
stroke-miterlimit="10" stroke-width="15" />
I started playing around w/this on CodePen, but didn't get very far.
Is this even possible to achieve? I'd really appreciate any and all help/feedback!
This is a fast solution, I don't know is it good. You should add class circle to the second svg like this:
<svg class="circle" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="59" fill="#F07C7C" stroke="#D0CFCF" stroke-width="2"/>
<rect x="22" y="22" width="75" height="75" fill="url(#pattern2)"/>
<defs>
<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image2" transform="scale(0.00390625)"/>
</pattern>
<image id="image2" width="256" height="256"
xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
And then you should add this css:
.circle {
position: absolute;
top: 25px;
left: calc(50% - 108px);
}
This should make a second svg inside first svg.
I'm trying to create a box that is opaque, but has a block of text in it that you can see through (to like the background image of the page or some element underneath).
It's hard to explain so I've made some crude diagrams:
I am attempting to use SVG files to do this and use Javascript/jquery to modify the rectangle width and height but I'm not proficient at the SVG format... I've managed to piece this together using the evenodd filter:
https://jsfiddle.net/PhoenixFieryn/sqvLgqbq/
<svg id="coverimage" width="80pcm" height="30cm" viewBox="0 0 2000 2000" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc>
<defs>
<rect x="1" y="1" width="2000" height="1000"
fill="white" stroke="blue" />
</defs>
<g fill-rule="evenodd" fill="white" >
<path d="M0 0 h1000 v1000 h-1000z M841,396.8c-2.4-4-1.6-8.8,2.4-11.2c68-44,95.2-105.6,95.2-172.8c0-116-96.8-205.6-211.2-205.6H610.6H469.8
h-6.4c-4,0-5.6,1.6-8.8,6.4L315.4,320c-4,6.4-8,6.4-11.2,0l-140-306.4c-2.4-4.8-4.8-6.4-8.8-6.4H9c-5.6,0-8.8,4-6.4,9.6l264,554.4
c1.6,4,5.6,6.4,9.6,6.4h66.4c4,0,7.2-1.6,8.8-5.6l110.4-230.8v228.4c0,4.8,3.2,8,8,8h146.4c4.8,0,8-3.2,8-8V426.4c0-4.8,3.2-8,8-8
h42.4c4,0,8,1.6,9.6,5.6l76,148c1.6,4,5.6,5.6,9.6,5.6h158.4c5.6,0,8.8-4,5.6-9.6L841,396.8z M701.8,276h-69.6c-4.8,0-8-3.2-8-8
V158.4c0-4.8,3.2-8,8-8h75.2c36.8,0,68,28.8,68,62.4C775.4,244,750.6,276,701.8,276z"/>
</g>
I don't know how to modify the size/position of the text and rectangle independently well. I can barely understand what I wrote and why the margin is so big.
If anyone could help me, through this or any other method, thank you!
Edit: someone pointed out that there may be a duplicate, but that solution does not work in Firefox unfortunately. I am looking for a cross “platform” solution. But thanks for the link, it’s very helpful nonetheless.
My suggestion is to create a mask using the text. We then create a blue rectangle that we mask with the our text mask.
We can postion the SVG and have it size the way we want using SVG width and height. But we also make the blue rectangle very large and have the SVG set to overflow: visible. This allows us to easily have the SVG size be responsive and also have the blue extend to all the way to the edges of the screen.
body {
background-image: url('http://austinhou.com/img/cover.jpg');
background-size: cover;
margin: 0;
padding: 0;
}
#coverimage {
width: 40%;
height: 100vh;
overflow: visible;
}
<body>
<svg id="coverimage" viewBox="0 0 950 600" preserveAspectRatio="xMinYMid meet">
<defs>
<mask id="vr">
<rect x="0" y="-1000%" width="1000%" height="3000%" fill="white"/>
<path fill="black" d="M841,396.8c-2.4-4-1.6-8.8,2.4-11.2c68-44,95.2-105.6,95.2-172.8c0-116-96.8-205.6-211.2-205.6H610.6H469.8
h-6.4c-4,0-5.6,1.6-8.8,6.4L315.4,320c-4,6.4-8,6.4-11.2,0l-140-306.4c-2.4-4.8-4.8-6.4-8.8-6.4H9c-5.6,0-8.8,4-6.4,9.6l264,554.4
c1.6,4,5.6,6.4,9.6,6.4h66.4c4,0,7.2-1.6,8.8-5.6l110.4-230.8v228.4c0,4.8,3.2,8,8,8h146.4c4.8,0,8-3.2,8-8V426.4c0-4.8,3.2-8,8-8
h42.4c4,0,8,1.6,9.6,5.6l76,148c1.6,4,5.6,5.6,9.6,5.6h158.4c5.6,0,8.8-4,5.6-9.6L841,396.8z M701.8,276h-69.6c-4.8,0-8-3.2-8-8
V158.4c0-4.8,3.2-8,8-8h75.2c36.8,0,68,28.8,68,62.4C775.4,244,750.6,276,701.8,276z" transform="translate(-210 0)"/>
</mask>
</defs>
<rect x="0" y="-1000%" width="1000%" height="3000%" fill="#09f" mask="url(#vr)"/>
</svg>
</body>
JSFiddle version
I figured out a problem with SVG I couldn't solve yet. Given is a svg with multiple animations depending on each other with the begin attribute. So the animations got different ID's like 'circle' and begin tags with values like 'circle.end'. These svg is rendered / used multiple times on the page. In the first point is it not valid to have a id multiple times. At the second point all svg's doing the animation depending on circle.end when I start it with circle.beginElement() of the first svg.
So how can I start an animation depending on another animation without using id's or how can I start the animation on only one svg?
Here is a sample code
<svg>
<defs>
<path d="asdasd" id="circle-image">
<animateTransform id="circle" attributeName="transform" type="translate" from="0, 0" to="15, 0" begin="indefinite"/>
<animateTransform attributeName="transform" type="translate" from="15, 0" to="0, 0" begin="circle.end"/>
</path>
</defs>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="first">
<use xlink:href="#circle-image"/>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="second">
<use xlink:href="#circle-image"/>
</svg>
I want to somehow trigger .first #circle animation and .second #circle animation. The depending animation should only trigger within it's use element and not globally for all.
Can someone help here?
Thanks in advance
Regards Thomas
I have been searching for a good example on how to animate a svg path morph. I know how to do do pretty complex ones using SMIL, but snap.svg is new and shiny, and everyone seems to love it, so I'd like to take a look. I can't find a good example anywhere on how to do n animated path morph anywhere. Hopefully a snap.svg guru could point me in the right direction?
here's a link to the svg image and the code for it:
link to image
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
<path id="thing" d="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z">
<animate id="myAnimationElement" dur="2s" begin="0" repeatCount="indefinite" attributeName="d"
values="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z;
M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z;"/>
</path>
</svg>
Not quite sure if you mean you just want the current animation in Snap or something different. Just to give an example of how one would typically do some animation...
s = Snap(400, 620);
var path = s.path("M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z");
path.animate({ d: "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z" }, 1000, mina.bounce);
jsfiddle
Edit: There needs to be the same amount of points on the path to morph from/to.
If you're looking for something only for SVG Morph, you may not need the entire SnapSVG library, you can use KUTE.js. Really, take a look at this (Best viewed in Chrome and Firefox):
<div style="width: 220px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>
</svg>
</div>
<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>
<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1, morphIndex: 127}).start();
document.addEventListener('click', function(){
!tween.playing && tween.start();
}, false);
</script>
It's free and really easy to use.