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

我使用SVG創建了一個家族樹，下面給出了一個小結構。我需要幫助添加特定的類（說'選擇'）在鼠標上的類 - 「節點」，每當作爲當前徘徊的「節點」的父母的「g」的每個第一個「矩形」。需要使用jQuery，JavaScript或任何其他插件修復SVG DOM

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

無效：我需要一個像父母（ - 在jQuery中）或類似的方法來獲取當前徘徊的所有父母「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 :(

來源

2012-11-12 Arjun Raj

你看過[raphael.js]（http://raphaeljs.com/）。真的很好的圖書館與svg工作。與IE7和IE8兼容。 – Bruno

_this沒有真正的幫助很多:(._ –

這對我的作品。

$(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-13 12:44:09

你可以使用Raphaël.js添加事件處理器。例如

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

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

更多信息和演示here友好。

一小提琴如何你的家譜可能工作here

UPDATE

雖然Raphael.js沒有提供的功能找到你仍然可以通過添加自定義屬性拉斐爾元素跟蹤你的家庭樹一個SVG元素的父。

我已經創建了一個示例here以顯示如何實現此目的。希望它有幫助。

來源

2012-11-12 21:39:06 Bruno

它不是關於mouseover事件（這在jQuery中也能正常工作）。我需要像父，父母等SVG DOM輔助函數....在Rahel文檔中，我不能找到一些對我有用的功能。 –

我建議你使用一個jQuery插件，讓你與SVG畫布交互。正是這一個http://keith-wood.name/svg.html（SVG DOM標籤）

的SVG DOM是將HTML DOM爲其jQuery的是設計不同。特別是，可以動畫的任何屬性都是而不是普通字符串存儲爲對象。這包括類屬性。因此，jQuery在類中使用的函數在SVG節點上不起作用。

要解決此問題，您可以使用jQuery SVG DOM擴展。

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

來源

2012-11-13 09:09:15 nkamm

它記錄不完整。請推薦一些類似於jQuery中父母（）的函數或其他一些方法來實現它。 –

如果你使用keith woods'jquery.svg.js，$（'rect'）。父母（）應該工作。如果你需要的話，你只需要dom擴展就可以獲得$ this.addClass（'classname'）。 – commonpike

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

回答

相關問題