AngularJS SVG Directive

by Alex Mouton

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app='app'>
    <svg>
        <rect class='static' x='60px' y='20px' width='40px' height='40px'></rect>
        <box></box>
    </svg>
</div>

CSS

.box {
    fill: red
}
.static {
    fill: green
}

JavaScript

var myApp = angular.module('app', []);

var justrect = "<rect class='box' x='20px' y='20px' width='40px' height='40px'></rect>";

myApp.directive('box', function () {
    return {
        template: justrect,
        replace: true
    };
});