[英]Replace an SVG element with another on click
嗨,我正在尝试以SVG格式从inkscape图像创建一些交互式内容。 我正在通过http://keith-wood.name/js/jquery.svg.js上的 svg.load加载一个SVG文件
我想在加载的svg中添加一个onclick监听器,这样我可以在单击后加载不同的SVG。 我该怎么做呢? 以下评论中的方法失败了。
<script type='text/javascript'>
//<![CDATA[
function drawSwitch(svg) {
var switchElement = svg.load('./3phase_switch.svg', {
addTo: true,
changeSize: true
});
//switchElement.addEventListener("click", return function(){switchElement.setAttributeNS(null, "fill", "green");}, false);
}
$(window).load(function () {
$(function () {
$('#svgbasics').svg({
onLoad: drawSwitch
});
});
}); //]]>
</script>
由于元素是在页面加载时呈现的,因此您应该监听已经存在的父元素的单击; 例如document
:
// Use this same as $(document).ready()
jQuery(function( $ ){
// Listen for a click on the document but get only clicks coming from #svgbasics
$(document).on('click', '#svgbasics', function(){
// this === #svgbasics element
drawSwitch( this );
});
});
这就是我最终做到的,我通过Chrome开发人员检查了这些元素。 工具,并在SVG中找到要用作目标侦听器(#layer1)的元素的名称。 使用下面的代码,我可以在两个不同的SVG之间来回切换
function drawOpenSwitch(svg){
var closed=false;
var changeSwitch = function (){
$('#layer1').click(function() {
if(!closed){
svg.clear();
switchElement=svg.load('./3phase_switch_closed.svg', {onLoad: changeSwitch, addTo: true, changeSize: true});
}else{
svg.clear();
switchElement=svg.load('./3phase_switch.svg', {onLoad: changeSwitch, addTo: true, changeSize: true});
}
closed=!closed;
})};
var switchElement=svg.load('./3phase_switch.svg', {onLoad: changeSwitch, addTo: true, changeSize: true});
}
$(window).load(function(){
$(function() {
$('#svgbasics').svg({onLoad: drawOpenSwitch});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.