如何操作導入的SVG文件中的內部元素

我正在使用SVG.js庫來操縱一個現有的SVG文件。我用Inkscape創建了這個圖像：http://svgur.com/i/100.svg 如何操作導入的SVG文件中的內部元素

我想要做的是訪問內部的粉紅色矩形並設置動畫效果，但我甚至不知道如何選擇該特定元素。

我有一個簡單的「的test.html」：<div id="drawing"></div>

，然後我可以成功加載與以下行的圖像：

var draw = SVG('drawing').size(500, 500); 
var use = draw.use('svg8', BASE_URL + '/app/test/test.svg'); 
use.move(0, 0);

如何我現在可以訪問內部元素<rect id="rect4928"></rect> SVG文件？

非常感謝。

來源

2017-03-17 rocotocloc

經過大量的搜索和試驗，我不確定這是可能的。爲了我的目的，我放棄了sgvjs，並使用類似getSVGDocument的東西與香草JavaScript。 – HeadCode

下面是一個可以做你想做的例子：http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg – HeadCode

如果你只是要與香草JS，你可以做這樣的事情。您不必創建唯一的ID。

嵌入你有對象標記svgs

<object id="svg1" data="100.svg" type="image/svg+xml"></object> 
<object id="svg2" data="100.svg" type="image/svg+xml"></object>

然後使用這個JavaScript。

window.onload = function(){ 
    var c = document.getElementById("svg1").contentDocument; 
    var rect = c.getElementById("rect4928"); 
    rect.setAttribute("style", "fill: green;"); 

    var c2 = document.getElementById("svg2").contentDocument; 
    var rect = c2.getElementById("rect4928"); 
    rect.setAttribute("style", "fill: green;"); 
}

來源

2017-03-25 05:30:13 HeadCode

這確實比我的解決方案更好。非常感謝你。 – rocotocloc

@rocotocloc我們都在這方面學到了一些東西。 :-) – HeadCode

你可以添加ID，以該元素和去：

var element = SVG.get('purple_rect'); 
element.move(30,30);

這是從文檔，你可以輕鬆地操縱元素。這裏是codepen示例 http://codepen.io/anon/pen/peKzYM#anon-login

來源

2017-03-23 17:55:43

你的例子只有在svg xml直接嵌入頁面。如果使用對象或div標籤顯示svg，則不起作用。 – HeadCode

經過這幾天的研究，我意識到不可能做我想做的事情。當您通過<use>屬性導入一個特定的SVG圖像時，此圖像將作爲一個單一元素導入，所有內部元素都將轉到陰影DOM並且無法再訪問它們。您可以在這篇文章中讀取CSS很好的解釋和可能的解決方法：https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

在我的情況下，即使<use>元素已經把在常規的DOM所有的內部元件，它會一直不夠。我需要完全相同的圖像在相同的HTML中出現8次，並且我還需要單獨修改每個SVG圖像的所有內部元素（上面的示例只是一個簡化版本，在真實場景中，我有一個大約15我必須改變的內部元素：改變顏色，旋轉......）。出於這個原因，我必須爲每個內部元素分配一個唯一的ID，例如，如果我有一個具有15個內部元素的SVG重複8次，最後我需要125個唯一的ID。

我最終做的是在Inkscape中創建這8個圖像中的一個。之後，我構建了一個簡單的Java程序來製作原始文件的8個副本，併爲所有將在最終HTML中共存的元素提供唯一的ID。一旦我有8個具有唯一ID的SVG副本，我就直接將它們中的每一個嵌入到HTML中，現在我可以輕鬆地使用vanilla JS訪問所有東西（我不再需要SVG.js）

可以看到我試圖做的最後結果：https://jsfiddle.net/6shzx7Lk/

在最終的圖片中，我有8個藍色的SVG文件，8個黃色和2個灰色塊。例如，您可以看到每個藍色圖像都有10個綠色點，如果您檢查源代碼，您可以看到每個點都有唯一的ID。通過這種方式，我可以輕鬆修改所有8個藍色圖像中的每個綠色點（並且與其餘元素相同）。我還可以通過根據用戶屏幕尺寸排列不同的元素來調整Bootstrap的最終圖像大小。

我不知道是否有更好的方法來實現這一點，但在SVG最後幾天玩了這個之後，這是我爲我的特定問題找到的解決方案。

非常感謝您的幫助。

來源

2017-03-24 08:10:40 rocotocloc

如何操作導入的SVG文件中的內部元素

回答

相關問題