Animate SVG

Playing with animating an interior part of an SVG.

by Travis Almand

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="external" viewBox="0 0 300 300">
        <polygon id="box" points="137.9,20.5 137.9,61 63.7,61 63.7,236.4 
		236.2,236.4 236.2,162.5 279.5,162.5 279.5,279.5 20.5,279.5 20.5,20.5 	"/>
	<polygon id="arrow" points="279.5,150 236.2,106.8 171.6,171.7 128.3,128.4 
		193.2,63.7 150,20.5 279.5,20.5 	"/>
    </symbol>
</svg>

<div id='svg'>
    <svg class='test_svg'><use xlink:href="#external"></use></svg>
</div>

CSS

#svg {
    border: 1px solid black;
    height: 300px;
    position: relative;
    width: 300px;
}
#svg svg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#arrow, #box { pointer-events: none; }
#arrow {
    transform: translate3d(-27px, 27px, 0) scale3d(0.75, 0.75, 1);
    transform-origin: 215px 85px;
}

.change_arrow #arrow {
    fill: green;
    transform: translate3d(0px, 0px, 0) scale3d(1, 1, 1);
    transition: all 0.5s;
}}

JavaScript

var $svg = $('#svg');
var $box = $('#box');
var $arrow = $('#arrow');
var $text = $('#text');

$svg.on('mouseenter', function () {
    $svg.toggleClass('change_arrow');
}).on('mouseleave', function () {
    $svg.toggleClass('change_arrow');
});