Multiple SVG With External CSS

by Amy B

HTML

<body data-ng-app="svgApp">
  <div data-ng-controller="main">
    <div data-ng-repeat="circuit in circuits" data-ng-controller="circuitCtrl">
      <img data-ng-src="{{circuit.url}}" />
    </div>
  </div>
</body>

CSS

body {background-color:#FFF}
.outline{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	.bulb_base{fill:#CCCCCC;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
	.cover{fill:#FFFFFF;}
	.bulb_connect{stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	#bulb_bg{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	#On_text, #Off_text {visibility:hidden}
	.off #bulb_bg {fill:#808080;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	.on #On_text, .off #Off_text {visibility:visible}
	.on #bulb_bg {fill:#FCEE21;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}

JavaScript

var app =angular.module('svgApp', []);
app.controller('main', ['$scope', '$sce', main]);

function main($scope, $sce) {
		$scope.circuits = [
    	{url: $sce.trustAsResourceUrl("https://www.dropbox.com/s/rbmzil5a4kti2mo/ElectricalDiagram_Circuit_1.svg?raw=1")},
      {url:$sce.trustAsResourceUrl("https://www.dropbox.com/s/d1cfse0qotusorm/ElectricalDiagram_Circuit_2.svg?raw=1")}
    ]
}

app.controller('circuitCtrl', ['$scope', circuitCtrl]);
function circuitCtrl($scope) {
	$scope.toggleBulbState = function() {
  	if (!$scope.bulb) return;
    $scope.bulb.state=$scope.bulb.state=='on'?'off':'on';
    console.log('@@@');
  }
}