0

I am working on using external svg groups marked by ID for initiation of event via mouseover initiator using SnapSVG library.

Here is a part of the external SVG code:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230 230" enable-background="new 0 0 230 230" xml:space="preserve">
<g id="outter" class="all">
<path fill="#FFED9F" d="M43.893,79.064c-21.801,10.734-36.47,30.805-36.47,53.792c0,22.981,14.668,43.053,36.469,53.791
c21.801-10.738,36.468-30.807,36.468-53.791C80.361,109.869,65.692,89.801,43.893,79.064z"/>
</g>
<g id="leaf" class="all">
<path fill="#2ECC71" d="M43.891,91.462c-16.776,8.263-28.063,23.704-28.063,41.394c0,17.688,11.288,33.131,28.063,41.395
c16.777-8.264,28.063-23.703,28.063-41.395C71.955,115.169,60.667,99.727,43.891,91.462z"/>
<path opacity="0.2" d="M15.828,132.855c0,17.688,11.288,33.131,28.063,41.395V91.462C27.115,99.725,15.828,115.166,15.828,132.855z"/>
</g>
</g>
</svg>

And here is the html section:

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="google-site-verification" content="KdV7EMXqTSj0PRKumPI3ztKMfT9-kJyYvkmaQNPfdtE" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="snap.svg-min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<title>Synbio.cz</title>    
</head>

<body>
<div id="svgupperdiv">
<svg id="svgupper" viewBox="0 0 230 230" preserveAspectRatio="xMaxYMin meet" height="60%" width="60%"></svg>
</div>
<script>

var p = Snap("#svgupper");

Snap.load("listeklogo2.svg",onSVGLoaded2);

function onSVGLoaded2(e){
    var all = e.selectAll(".all");
    p.append(all);
    var leaf = p.select("#leaf");
    var outter = p.select("#outter");
    outter.attr({opacity: 0});

    leaf.mouseover(lfunction);

    function lfunction(){
        outter.animate({opacity:1},210,mina.easout);
    }
};
</script>
</body>
</html> 

I really don't know what to do with it :/

2
  • it would be helpful if we can see it running somewhere, does it show any error in the console ?
    – Ian
    Dec 26, 2015 at 9:46
  • Just tried it on my own hosting, and it seems to work fine eg svg.dabbles.info/test/test.html so maybe its your hosting or local files or something. You need to look in the dev console for errors. There is also a slight error with the svg, you have an extra </g> but I don't think that would be an issue really (although you will want to correct that)
    – Ian
    Dec 26, 2015 at 9:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.