Doesnt appear to be working #1
Comments
|
I literally cannot get any file generated from svgator to work with this example but the svgator logo example works fine.. please help someone! I have no idea what the issue is, as I say surely its a matter of changing the filename and svg ID in index.html |
|
I'm sorry it wasn't explicitly stated, but the current example only works if you do an export with "Animation type: JavaScript" and "Animation start: On click". You can also check out pages about programmatic animation: |
|
Also, please note that the examples you see on the programmatic animation pages are referring to inline SVGs. If you still want to include the SVG in an tag, ideally you would do something like this: <!DOCTYPE html>
<html>
<head>
<title>Testing SVG</title>
<script>
//Wait for the document to load
document.addEventListener("DOMContentLoaded", function() {
//grab the <object> element
let object1 = document.getElementById('animated-svg');
//Wait for the content of the <object> to load
object1.addEventListener("load", function() {
//grab the <svg> element
let svg = object1.contentDocument.getElementById('e5478wvxh25l1');
//Wait for the SVGtor player to be ready for use
svg.svgatorPlayer.ready(function(player) {
//inset your code here; i.e.
player.play();
});
});
});
</script>
</head>
<body>
<object id="animated-svg" type="image/svg+xml" data="animated.svg" style="height: 857px;"></object>
</body>
</html>Also it's good to know that this will not work if the SVG is on a different (sub)domain. |
|
Ok thanks, I eventually have the onclick working (by adjusting the settings as you said although it states to use programmatic rather than onclick on this page https://www.svgator.com/help/getting-started/animate-programmatically which is a contradiction.. no?) but I actually need the animation to trigger on mouseover of a div and also (for a different animation) when a div comes into view.... your advice on how I can achieve this would be much appreciated, thanks in advance! Also is there really no real support available? I havent received any replies to my emails, once again many thanks in advance! |
As I previously mentioned, the onclick solution is (years) old and the programmatic one is only 2 months old. If you want to trigger on mouseover AND scroll into view, you would need to handle those events manually and decide when to do what. Here's a working JavaScript example: //Wait for the document to load
document.addEventListener("DOMContentLoaded", function() {
let object1 = document.getElementById('animated-svg');
//Wait for the content of the "object" to load
object1.addEventListener("load", function() {
let svg = object1.contentDocument.getElementById('e5478wvxh25l1');
//Wait for the SVGtor player to be ready for use
svg.svgatorPlayer.ready(function(player) {
mapDocumentEvents(player);
});
});
});
function mapDocumentEvents(player) {
let object1 = document.getElementById('animated-svg');
let svg = object1.contentDocument.getElementById('e5478wvxh25l1');
checkIfElementIsInView(object1, player);
//listen for the "scroll" event on the document
document.addEventListener('scroll', () => {
checkIfElementIsInView(object1, player);
});
//Listen for the mouseenter event on the SVG
svg.addEventListener('mouseenter', () => {
player.play();
});
//Listen for the mouseleave event on the SVG
svg.addEventListener('mouseleave', () => {
player.pause();
});
}
function checkIfElementIsInView(obj, pl) {
let rect = obj.getBoundingClientRect();
/*
Check if the element is visible completely.
Use other values instead of 0 and "window.innerHeight"
if you want to start/pause the animation when the element
is only partially visible
*/
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
pl.play();
} else {
pl.pause();
}
}
|
I dont understand how I cant get this to work for another svg.. I change the filename and id to the id set inside the svg.. and export the svg as programmatic ..but for some reason it wont work?
The text was updated successfully, but these errors were encountered: