javascript - 单击时用另一个 SVG 元素替换

标签 javascript jquery html svg jquery-svg

您好,我正在尝试从 SVG 格式的 inkscape 图像创建一些交互式内容。 我正在通过 svg.load 从 http://keith-wood.name/js/jquery.svg.js 加载 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>           

最佳答案

由于该元素是在页面加载时呈现的,因此您应该监听对已经存在的父元素的点击;例如文档:

// 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 );

  });

});

关于javascript - 单击时用另一个 SVG 元素替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20613829/

相关文章:

javascript - 如何使用 jquery 将与类名相关的样式添加到元素?

javascript - 我是否以正确的方式构建我的应用程序? - Backbone .js

javascript - Webpack/ES6 动态导入

javascript - 从 DIV 创建数组,然后检查相似性

html - 将 html 内容与站点的其余部分隔离

javascript - 显示属于两个div的区域

html - 下拉菜单 z-index

javascript - 处理日期对象 javascript 与 java

javascript - parse.com get 无法读取未定义的属性 'indexOf'

javascript - 获取上一页 URL 而不是当前页面