将JavaScript嵌入到SVG中

我需要制作更多交互式电子电路的图像。将JavaScript嵌入到SVG中

我的计划是使用标准的EDA工具绘制电路并将其存储为SVG文件。存储为SVG的文件可以通过任何现代浏览器打开。

我现在想要做的是在SVG中添加一些JavaScript代码。当用户将鼠标悬停在电路的某些部分上时，脚本必须弹出描述这些部分的工具提示。例如，当用户将鼠标放在IC顶部时，该IC的描述将立即弹出。

该电路在SVG XML中被合理注释。

从我迄今为止推断的结果来看，没有JavaScript的自动方式来找出当前悬停的鼠标盒/线是什么。当然，它会发现是否有一个查找表，其中映射的图像坐标与电路注释。

这意味着每当电路发生变化时，查找表也需要更新。

有没有更容易的方法找出（没有查找表）鼠标悬停在标注的框/线/组件？

来源

2014-02-20 Raj

如果你只需要简单的文字提示，见http://stackoverflow.com/questions/ 11251798 /表示-文本上的鼠标悬停标题元件不一致所有权属性此结果不是。 –

Upvoted。是的，这工作起来很轻松。 – Raj

使用HTML5，您可以将SVG放在HTML中;内联SVG。在那里你可以添加正常的浏览器元素事件的监听器，一切都会按照它应该的那样工作。

我写了一篇博客关于它前一段时间，这是源：

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

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

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

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

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

 
});

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

来源

2014-02-20 08:03:22 Philipp

将JavaScript嵌入到SVG中

回答

相关问题