在SVG中嵌入JavaScript

wz8daaqr 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(208)

我需要制作电路的图像，使其更具交互性。
我的计划是使用标准的EDA工具绘制电路，并将其存储为SVG文件。存储为SVG的文件可以通过任何现代浏览器打开。
我现在想做的是在SVG中添加一些JavaScript代码。当用户将鼠标悬停在电路的某些部分时，脚本必须弹出描述这些部分的工具提示。例如，当用户将鼠标放在IC顶部时，该IC的描述将立即弹出。
在SVG XML中对电路进行了合理的注解。
从我到目前为止的推断来看，JavaScript没有自动的方法来找出鼠标当前悬停在哪个框/线上。当然，它会找出是否有一个查找表，该表将图像坐标与电路注解Map在一起。
这意味着每次电路改变时，查找表也需要更新。
有没有更简单的方法来找出（没有查找表）鼠标悬停的注解框/线/组件？

JavaScript

来源：https://stackoverflow.com/questions/21901640/embedding-javascript-in-svg

2条答案

按热度按时间

ljsrvy3e1#

使用HTML5，您可以将SVG放在HTML中;inline SVG。在那里你可以为普通的浏览器元素事件添加监听器，一切都将正常工作。
前一阵子我写了一篇关于它的博客，这是来源：

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>

赞(0）回复(0）举报 2023-04-04

sqxo8psd2#

您可以在SVG中使用<script>元素。
请参考以下文章并举例说明：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script

赞(0）回复(0）举报 2023-04-04