Embedding JavaScript in SVG

Question

I have a need to make images of electric circuits that am creating more interactive.

My plan is to draw the circuit using a standard EDA tool and store it as a SVG file. The file stored as SVG can then be opened by any modern browser.

What I would like to do now is to add a bit of JavaScript code into the SVG. When users hover mouse over certain sections of the circuit, the script must pop up tooltips describing those sections. As an example, when user places mouse on top of an IC, description of that IC is to pop up immediately.

The circuit is reasonably annotated in the SVG XML.

From what I have inferred so far, there is no automatic way of the JavaScript finding out what box/wire is the mouse currently hovering over. Of course it would find out if there was a look up table which mapped image coordinates with circuit annotations.

What this means is that every time the circuit changed, the look up table would also need to be updated.

Is there an easier way of finding out (without lookup tables) the annotated box/wire/component which the mouse is hovering over?

If you only need simple text tooltips, see http://stackoverflow.com/questions/11251798/showing-text-on-mouseover-title-element-inconsistent-title-attribute-does-not. — Erik Dahlström, Feb 20 '14 at 12:05

Philipp Gayret · Answer 1 · 2014-09-30T08:23:45.773

With HTML5 you can just place your SVG in your HTML; inline SVG. There you can add listeners for normal browser element events and everything will work as it should.

I wrote a blog about it a while ago, this is the source:

angular.module('yenlo.blog', []);

angular.module('yenlo.blog').controller('ChartController', function($scope, $timeout){

 $scope.items = [
  { height: 100, color: 'red', content: 'A' },
  { height: 120, color: 'green', content: 'B' },
  { height: 140, color: 'blue', content: 'C' }
 ];

 setInterval(function(){
  $scope.items.forEach(function(item){
   item.height += ( Math.random() - 0.5 ) * 5;
  });
  $scope.$digest();
 }, 100);

 $scope.selected = $scope.items[0];
 $scope.select = function(item){
  $scope.selected = item;
 };

});

<!DOCTYPE html>
<html>
  <body ng-app="yenlo.blog" ng-controller="ChartController">
 <svg height="200" width="100">
  <rect ng-repeat="item in items"
   ng-attr-x="{{ $index * 33 }}"
   ng-attr-y="{{ 200 - item.height }}"
   ng-attr-height="{{ item.height }}"
   ng-attr-fill="{{ item.color }}"
   ng-click="select(item)"
   width="30"/>
 </svg>
 <p>
  Currently watching {{ selected.content }}, at {{ selected.height }}
 </p>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  </body>
</html>

Embedding JavaScript in SVG

1 Answers1