0

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

$this.addClass('classname') 不起作用。所以我使用 $this.attr('class','classname')

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

当前工作 -点击这里

样本结构。

<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 不友好 :(

4

3 回答 3

2

我建议您使用 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>
于 2012-11-13T09:09:15.887 回答
0

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

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

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

更多信息和演示在这里。

你的家谱如何在这里工作的小提琴

更新

尽管 Raphael.js 不提供查找 svg 元素父级的功能，但您仍然可以通过向 raphael 元素添加自定义属性来跟踪您的家谱。

我在这里创建了一个示例来展示您如何实现这一目标。希望它有所帮助。

于 2012-11-12T21:39:06.260 回答
0

这对我有用。

$(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);
        }
    }
于 2012-11-13T12:44:09.337 回答