使用jQuery加載外部SVG並更改SVG

我需要加載現有的SVG文檔以進行一些修改：更改顏色並用矩形替換所有圓。使用jQuery加載外部SVG並更改SVG

我讀了一篇關於使用javascript訪問SVG節點或Raphael擴展或jQuery SVG的lout。

我決定使用jQuery SVG，因爲（在我讀過的其中一個文檔中有寫入:)不能用Raphael更改現有的，加載的SVG。我不確定，如果這是真的。

另一方面，有些東西寫道：jQuery SVG插件已過時？！

我不確定，如果這是正確的。

現在，我使用jQuery SVG插件來加載SVG。該SVG是由許多圈子的，就像這樣：

<svg version="1.1" width="" height=""> 
<rect class="background" x="0" y="0" width="136" height="136" style="fill:white"/> 
<circle class="dot" cx="10" cy="10" r="2"/> 
<circle class="dot" cx="14" cy="10" r="2"/> 
<circle class="dot" cx="18" cy="10" r="2"/> 
<circle class="dot" cx="22" cy="10" r="2"/> 
    [...] 
<style> 
    .dot {fill:#000000;} 
</style> 
</svg>

現在，應該是可能的：1。）通過改變類dot和 2）替代由矩形各界更改各界的顏色。

要達到的第一個目標，我用svg.style()，像這樣：

mainSVG = $("#placehoplder").svg('get'); 
mainSVG.load(data, {addTo: true, changeSize: false}); 
mainSVG.style('.dot {fill:'#f4a200'}');

這工作，但它增加了一個額外的樣式元素/節點到SVG。

所以第一個問題是：如何改變/覆蓋退出的樣式元素？

要達到第二個目標：我不知道該如何處理。

我不知道如何選擇一般的SVG元素。使用谷歌，我仍然一次又一次找到相同的stackoverflow問題，這並沒有幫助我。另外jQuery SVG文檔對我的知識點沒有幫助。（因爲基本缺失）

例如，這個簡單的測試來改變所有圈子的半徑不起作用。

allCircles=$('*[class~="dot"]'); 
mainSVG.change(allCircles,{r:10});

所以第二問題是：如何爲了選擇一組SVG元素（按類別或元件型）來改變它們（或者可以我必須遍歷槽？）？

謝謝。

來源

2012-09-06 The Bndr

搜索網站爲電子商務一段時間後，我毅然選擇了以下解決方案：

所以第一問題是：如何改變/覆蓋退出的風格元素？

更改退出樣式元素很困難，例如使用JS更改HTML樣式元素。我選擇以下方式（因爲它看起來是最好的選擇）。Finaly它刪除舊的風格和添加新：

沒有風格標籤
在服務器端創建SVG定義的默認樣式爲JavaScript對象
svgStyle = {'.dot':{'fill':'white'}}
創建方法將svgStyle轉變成HTML源代碼，這回mySvgStyle=' .dot {fill:white}
加載SVG和樣式元素應用到SVG
mainSVG.style(mySvgStyle);

現在：所有的時間，我喜歡改變SVG風格，我刪除舊樣式SVG元素$('style', mainSVG.root()).remove();，修改svgStyle JS對象（添加或刪除屬性）並創建新的SVG樣式標記（請參閱＃3和＃4中，以上面的列表）

如何選擇一組SVG元素（按類別或元件型）來改變它們（或者可以我必須遍歷槽？）？

看起來，迭代是最早的方式。 jQuerySVG插件接縫不可能處理DOM（SVG）元素組。

來源

2012-09-11 12:45:37

使用jQuery加載外部SVG並更改SVG

回答

相關問題