I need a little bit of help.
In the following code, I want to control the rotation of the star via onmouse-event.
If you move the mouse over the star, it is supposed to rotate.
I thought about changing the transform in attributeName to something different when the mouse is not over the star via roationon()/off() functions so that the rotation doesn't work but I have no idea how to do that.
I appreciate every help I can get.
Thanks
<!DOCTYPE html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html>
<body>
<script>
function rotationon() {}
function rotationoff() {}
</script>
<svg height="2000" width="2000">
<polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" transform="translate(100, 100)" onmouseover="rotationon()" onmouseout="rotationoff()" >
<animateTransform
attributeName="transform"
begin="0s"
dur="5s"
type="rotate"
from="0 100 100"
to="360 100 100"
repeatCount="indefinite"
/>
</polygon>
</svg>
</body>
</html>
There's a few different ways to approach this, depending on what its going to integrate with, and how well it will play with other browsers.
My gut instinct would be to say ultimately, its worth using one of the SVG libs out there, like Raphael, snap.svg, Pablo.js etc. They will help with some of the issues likely to be faced.
You can also just use pure SVG like I mentioned http://jsfiddle.net/xaM6q/
However, to use the method you are trying, you may want to use something like beginElement() and endElement, so the code could look something like the following...fiddle at http://jsfiddle.net/xaM6q/2/
<script>
function rotationon(evt){
document.getElementById('myanim').beginElement();
}
function rotationoff(){
document.getElementById('myanim').endElement();
}
</script>
<svg height="2000" width="2000">
<g transform="translate(100,100)">
<polygon id="stern1" points="100,10 40,180 190,60 10,60 160,180" fill="yellow" onmouseover="rotationon()" onmouseout="rotationoff()" >
<animateTransform
id="myanim"
attributeName="transform"
begin="indefinite"
dur="5s"
type="rotate"
from="0 100 100"
to="360 100 100"
fill="freeze"
repeatCount="indefinite"
/>
</polygon>
</g>
Couple of things worth noting. I've added a g element to help keep the transformation in place, as you probably want that (without it, you may find it moves away). Also the animation may be a bit erratic depending how you want it to stop (I've added 'fill=freeze'), and what happens with events mid animation.
Its worth knowing all of this to get to know SVG animations, but as mentioned, I would probably still look at using a 3rd party lib and control the rotation manually, rather than using the animate tag, so you can halt/restart a rotation at any angle easily.
Related
Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>
So I managed to do something after some editing to your SVG.
To achieve what you're asking you'll need to use / have :
- the SVG mask attribute
- A very large shape for the mask ( as much large as the max scale you want to use on the visible shape )
- The shape that you want to resize
- Resize the shape with transforms
Your SVG should looks like the following
<svg>
<defs>
<mask id="theMask">
<path fill="#ffffff" d=""/>
</mask>
</defs>
<g mask="url(#theMask)">
<path fill="#ffffff" id="shapetoresize" d=""/>
</g>
</svg>
I posted a pen as a "Proof of concept"
Feel free to fork it and use it to achieve what you're trying to do.
Codepen
note: as pointed out by #thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.
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 a site with a series of elements that, when clicked on, add inline svg code to that element. The svg essentially animates an "iris wipe" to tunr the element white. Code from a separate html document is the loaded into a series of divs. When all the images are done loading, I want to append a mask to the svg code to iris wipe it back to how it was.
I am using waitForImages.js to check when the images are done loading. This is working successfully. The mask is also being added to the svg correctly. However, the mask animates.
Here is the initial code for adding the svg:
$("#selProject").append('<svg id="circleCont" x="0px" y="0px" viewBox="0 0 360 360" enable-background="new 0 0 360 360"><circle class="circ" cx="50%" cy="50%" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="100%" dur="0.2" begin="0s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="100" dur="0.2" begin="0s" fill="freeze"/></circle><circle class="circ" cx="50%" cy="50%" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="100%" dur="0.2" begin="0.1s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="200" dur="0.2" begin="0.1s" fill="freeze"/></circle><circle class="circ" cx="50%" cy="50%" r="0.01" fill="#FFFFFF" mask="url(#mask1)"><animate attributeName="r" from="0.01" to="100%" dur="0.3" begin="0.2s" fill="freeze"/></circle></svg>')
This is probably not the cleanest way to do it, but is the way I knew how.
Later, after some other code / loading the other html document using ajax
$("#selProject").waitForImages(function() {
$("#projectPageInfo").waitForImages(function() {
$("svg").append('<mask id="mask1"><rect fill="white" width="100%" height="100%" /><circle id="circmask" class="circ" cx="50%" cy="50%" r="0.01" fill="#000000"><animate attributeName="r" from="0.01" to="100%" dur="0.3" begin="0s" fill="freeze"/></circle></mask>');
});
});
The mask worked correctly when it was apart of the initial svg code being added, and animated as it should have. However, I needed it not to happen until the images have loaded, and now, despite the mask being added to the svg successfully, it does not animate. What am I missing?
I suspect it's the typical jQuery problem. JQuery cannot be relied on to do the right thing with SVG elements. jQuery is designed to work with HTML, not SVG whose elements are in a different namespace.
The first append works because the browser knows what to do with the <svg> element, and does the right thing. However the second append fails because the <mask> element will be created in the default (ie. HTML) namespace rather than the SVG one.
If you look at the DOM properties of the appended <mask> element in your browser's dev tools, you will probably find that it has the wrong (ie. not SVG) namespace.
As a solution, I would try adding the <mask> back in to the original SVG and only set the mask attribute when you want the mask to be used. In other words, remove:
mask="url(#mask1)"
then when you want the mask to be applied:
document.getElementById("id-of-masked-circle").setAttribute("mask", "url(#mask1)");
Looking for ideas on how to animate what looks like a laser drawing out a word in a cursive font using SVG. The animation can be done with SMIL or JavaScript I don't care - though I think it would be easier with SMIL.
I am pretty sure if I could just get the letters represented as a path I could figure out how to animate a line from a fixed point to the word path - even if the path is non-continuous.
Any ideas?
EDIT
My demo was very basic, essentially I wrote animate functions for each letter and arranged their timing. Here is the letter X for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<path id="word" stroke="red" d="M10 10 L40 40 M40 10 L10 40" />
<line x1="10" y1="10" x2="25" y2="50" stroke="blue" stroke-width="0.5">
<animate attributeName="x1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="y1" begin="0s" dur="1s" values="10; 40;" />
<animate attributeName="x1" begin="1s" dur="1s" values="40; 10;" />
<animate attributeName="y1" begin="1s" dur="1s" values="10; 40;" />
<set attributeName="visibility" to="hidden" begin="2s" />
</line>
</svg>
I am sure we can all agree that this is not an ideal long term solution... I thought it would be relatively easy to animate one end of a LINE along a path but I am having problems just getting the path...
Extract the paths from the glyphs in question, then apply a dash-array animation as seen in this example on each of the paths.
From a high level perspective, I would think you would want to do something like render the font to a canvas, then use the pixel information to generate the animation sequence. A simple algorithm could just trace from left to right, it would be a good deal harder to figure out a single stroke path, but that is doable as well.
You don't mention any idea of what platform or any time constraints, so its hard to get much closer than that.
One possibility... SVG Fonts are, I understand, stored as a sequence of SVG commands used to draw individual characters. The vector-based nature of drawing in SVG would seem like it would be amenable to 'tracing out' characters in realtime; you might be able to make a conversion utility to pre-convert SVG fonts to simple paths.
I have this SVG circle with an animation.
<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />
</circle>
It works fine. I want to make the exact same thing using javascript so if I click a button, it would create the same circle with the same animation.
here is my try:
var animateMotion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
animateMotion.setAttribute("dur","8s");
animateMotion.setAttribute("d", "M 0 0 H 300 Z");
animateMotion.setAttribute("repeatCount","indefinite");
//assuming that I already created my circle
myCircle.appendChild(animateMotion);
var animateMotion = document.createElementNS('http://www.w3.org/2000/svg','animateMotion');
animateMotion.setAttribute("dur","3s");
animateMotion.setAttribute("repeatCount","1");
var mpath = document.createElementNS('http://www.w3.org/2000/svg','mpath');
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#YourPath");
animateMotion.appendChild(mpath);
Looks like animateMotion elements are bugged in Webkit, when dinamically created (see SVG elements will not Animate when added dynamically), and unsupported in IE. I think you're better off using pure javascript animation using a library like d3.
Maybe this is your problem:
In XML:
<animateMotion path= ... />
In JS:
animateMotion.setAttribute("d", ... ); //Should this be "path"?
Hope it helps,
regards m93a.
If just the click is important, it can be solved by using the begin attribute in your animateMotion:
<svg height="500" width="500" id="foo">
<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" begin="foo.click"/>
</circle>
</svg>
Should work with a button as well, if the button has an identifier, e.g. id="startbutton", then it should be begin="startbutton.click
Another alternative with inline javascript can be found here: http://svg-whiz.com/svg/PausePlay.svg
cheers
if you want the animate as soon as <animateMotion> element append page,
set <animateMotion> 'begin' to 'indefinite' and begin the animate call its .beginElement();
var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();
Here you can get number of examples regarding svg using javascript.
You can get help from there.