Interactive SVG

by Amy B

HTML

<body data-ng-app="svgTest">
<div data-ng-controller="bulbController"  
><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 400 300" style="enable-background:new 0 0 400 300;" xml:space="preserve">
<style type="text/css">
	.outline{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	.bulb_base{fill:#CCCCCC;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
	#bulb_bg{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	#On_text, #Off_text {visibility:hidden}
	.cover{fill:#FFFFFF;}
	.bulb_connect{stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	.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;}
</style>
<g id="Circuit_1">
	<polyline class="outline" points="158.3,137.1 311.3,137.1 311.3,261.2 83.3,261.2 83.3,137.1 117.4,137.1 154.4,108.1 	"/>
	<g id="battery">
		<rect x="188.5" y="258" class="cover" width="15.1" height="6"/>
		<line class="outline" x1="190.5" y1="250" x2="190.5" y2="274"/>
		<line class="outline" x1="201.5" y1="244" x2="201.5" y2="278"/>
	</g>
	<g id="Bulb" class="" ng-class="bulb.state" data-ng-click="toggleBulbState()" transform="translate(201, 41)">
		<path id="bulb_bg" d="M63.5,35.1c0-18.6-13.6-33.6-30.8-33.6C15.6,1.5,1.5,16.6,1.5,35.1c0,13.7,7.1,25.4,18.1,30.7v21.6h25
		V65.8C55.6,60.5,63.5,48.8,63.5,35.1z" />
		<rect x="28.4" y="90.1" class="bulb_connect" width="6.8" height="5.6"/>
		<path class="bulb_base" d="M44.6,88.4c-2.6,1-6.6,2.3-11.7,2.4c-6.1,0.2-10.9-1.3-13.7-2.4c0-5.9,0-11.8,0-17.7
		C21.2,71.9,25.8,74,32,74c6.1,0,10.5-2.1,12.6-3.3C44.6,76.6,44.6,82.5,44.6,88.4z"/>
		<g id="Off_text">
			<path class="text" d="M12.3,39.9c0-9.9,15.1-10.5,15.6-0.6c0.2,4.9-2.7,8.3-7.6,8.3C15.5,47.6,12.3,44.6,12.3,39.9z...

JavaScript

angular.module('svgTest', []).
controller('bulbController', ['$scope', bulbController]);

function bulbController($scope) {
	$scope.bulb = {};
  $scope.toggleBulbState = function() {
  	$scope.bulb.state = $scope.bulb.state=='on'?'off':'on';
  }
}