在 Snap SVG 加载函数中使用 jQuery答案

【问题标题】：Using jQuery in Snap SVG load function在 Snap SVG 加载函数中使用 jQuery
【发布时间】：2014-10-25 13:49:06
【问题描述】：

所以我有这个问题。我想用 Snap 库制作一个页面，但我没有找到任何方法来选择所有元素，除了我是 f.e. 的那个。盘旋在上面。 JQuery 应该很适合这个东西，但我不知道如何在 SVG Snap 加载函数中运行它：/ 我的代码是：

<script>
var s = Snap("#svg");
Snap.load("fin.svg",onSVGLoaded);

function onSVGLoaded(d){
    var all = d.selectAll(".plasmid");
    s.append(all);
    var mono = s.select("#mono");
    mono.drag();

$(mono).click(function(){
    $(this).fadeOut("slow");
    });
};
</script>

其中fin.svg是外部svg文件，.plasmid是svg文件中的一个类，包含图形的所有部分，mono是图形的一部分。 mono.drag() 部分正在工作，但 jQuery 的东西不是。你能帮忙吗？

【问题讨论】：

我不确定 jquery 是否适用于 SVG，如果不是，您可能想使用 jsquery svg，如 keith-wood.name/svg.html，或者只使用 Snap 点击处理程序和动画方法。

标签： javascript jquery svg snap.svg

【解决方案1】：

如果你有这个：

<object class="someselector" data="external.svg"></object>

你可以使用 jQuery：

<script>
$(window).load(function(){
    var a = ($(".someselector").contents().find('svg'))[0];
    var s = Snap(a);
    var something = s.someSnapfunctions();
    });
</script>

对于 iframe 和 svg，始终使用 $(windows).load 和 contents()

您可以在 $(window).load 中使用 jQuery 的函数，例如：

$('.someselector').load(function(){
// do something

var b = ($(".someselector").contents().find('svg').find('anotherselector'));
b.each(function(){
    Snap($(this)[0]).attr({
         fill: "#bada55" // change color!
    });
});

【讨论】：