AngularJS Example

by Lore ZZ

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg.js"></script>
<div ng-app="myApp">
  <svg style="width:400px;height:400px" snap-test></svg>
  <svg style="width:200px;height:200px" snap-test></svg>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<style>

JavaScript

angular.module('myApp', [])
  .directive('snapTest', function() {
    return function(scope, element, attrs) {
        var s = Snap(element[0]);
        var bigCircle = s.circle(150, 150, 100);
        bigCircle.attr({
            fill: "#bada55",
            stroke: "#000",
            strokeWidth: 5
        });
        var smallCircle = s.circle(100, 150, 70);
    }
  });