Question

我正在使用SVG创建一个家谱，下面给出了一个小结构。我需要帮助在鼠标上添加特定的类（比如'selected'） - “节点”，在“g”的每个第一个“rect”上，它是当前悬停的“节点”的父亲。

$ this.addClass（'classname'）不起作用。所以我使用$ this.attr（'class'，'classname'）

无能为力：我需要像父母一样的函数（在jQuery中）或类似方法来获取当前悬停的“rect”的所有父“g”。

目前的工作 - click here

样本结构。

<svg style="width:100%;height:455px" id="svg_root" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g id="viewport" >
        <g id="1">
            <rect class="node" y="0" x="0" width="160" height="35" />
            <text class="prof_name" y="14" x="34">Name</text>
            <g id="2">
                <rect class="node" y="40" x="30" width="160" height="35" />
                <text class="prof_name" y="54" x="64">Name</text>
                <g id="7">
                    <rect class="node" y="80" x="90" width="160" height="35" />
                    <text class="prof_name" y="94" x="94">Name</text>
                </g>
            </g>
        </g>
        <g id="18">
            <rect class="node" y="120" x="0" width="160" height="35" />
            <text class="prof_name" y="134" x="34">Name</text>
        </g>
    </g>
</svg>

我认为jQuery对SVG不友好:(

Answer 1

我建议你使用一个jQuery插件，让你可以与SVG画布进行交互。正好这一个http://keith-wood.name/svg.html（SVG DOM选项卡）

SVG DOM与jQuery所针对的HTML DOM不同   设计的。特别是，任何可以动画的属性都是   存储为对象而不是纯字符串。这包括课程   属性。因此，jQuery的与函数一起使用的函数不起作用   在SVG节点上。

要解决此问题，您可以使用jQuery SVG DOM扩展。

<script type="text/javascript" src="jquery.svgdom.js"></script>

Answer 2

您可以使用raphael.js添加事件处理程序。 e.g。

var paper = new Raphael( "id", 200, 200 );
var rect = paper.rect( 0, 0, 160, 35 );

rect.mouseover( function( ) {
    // do stuff
});

更多信息和演示here。

关于家谱如何运作的小提琴here

<强>更新

虽然Raphael.js不提供查找svg元素父级的函数，但您仍可以通过向raphael元素添加自定义属性来跟踪您的族树。

我创建了一个示例here来说明如何实现这一目标。希望它有所帮助。

Answer 3

这适合我。

$(window).ready(function(){
    $('#viewport .c_node').mouseenter(function(e) {
        paint_parent(e.target.parentNode);
    });
$('#viewport .c_node').mouseleave(function(e) {
        $('#viewport g').each(function(index, element) {
            $(element).attr('class',"");
        }); 
    });
});
function paint_parent(element){
        if(element.id!="viewport"){ // to the parent id viewport
        $('#'+element.id).attr('class',"cnode_parent");
        paint_parent(element.parentNode);
        }
    }

需要使用jQuery，javascript或任何其他插件修复SVG DOM

3 个答案: