需要使用jQuery，javascript或任何其他插件修复SVG DOM [英] need to fix SVG DOM using jQuery , javascript or any other plugin

问题描述

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

I'm creating a family tree using SVG, a small structure is given below. I need help to add specific class(say 'selected') on mouse over on the class - "node", on every first "rect" of "g" which is the parents of the current hovered "node".

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

$this.addClass('classname') is not working. So I m using $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不友好：（

I think jQuery is not friendly with SVG :(

推荐答案

这对我有用。

$(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！