動畫導入SVG對象

我已經決定了，因爲我只需要簡單的動畫功能，爲我的SVG圖像使用svg.js代替raphael.js，它的大小，有一個漂亮的語法小得多。動畫導入SVG對象

我有SVG導入成功的工作，但我無法找出哪些對象我應該是指，以動畫它。

的進口後，我的代碼的最後位說

var rawSvg = 'svg raw data here' 
var draw = svg('paper').size('100%', '100%'); 
    draw.import(rawSvg);

我考察了谷歌瀏覽器中的元素，和所有我能看到的是SVG的對象，「G」，＃path1layer1和Path2993。所以試圖將動畫方法應用到它們中的每一個，但我得到一個錯誤，說該對象沒有動畫方法。那麼我應該將哪個對象綁定到動畫方法？

這是我試圖

path2993.animate().move(150, 150);

來源

2013-02-05 Khuram Malik

的svg.import.js插件已更新。現在，所有導入的元素都在import（）方法返回的對象中引用，如mentioned here：

var rawSvg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><line id="line1234" fill="none" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="138.682" y1="250" x2="293.248" y2="95.433"/><rect id="rect1235" x="22.48" y="19.078" fill="#F7931E" stroke="#C1272D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="94.972" height="94.972"/><path id="path1236" opacity="0.5" fill="#29ABE2" d="M189.519,131.983c0,5.523-4.477,10-10,10H92.257c-5.523,0-10-4.477-10-10V53.659 c0-5.523,4.477-10,10-10h87.262c5.523,0,10,4.477,10,10V131.983z"/><circle id="circle1237" opacity="0.8" fill="#8CC63F" cx="201.603" cy="159.508" r="69.067"/><polygon id="polygon1238" fill="none" stroke="#8C6239" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="286.331,287.025 227.883,271.365 212.221,212.915 255.009,170.127 313.459,185.789 329.119,244.237 "/></svg>'; 
var draw = svg('paper'); 
var store = draw.import(rawSvg); 
store.polygon1238.fill('#f06');

來源

2013-02-05 21:46:41 wout

OK，所以我更新了圖書館，現在我的代碼看起來像這樣 VAR平局= SVG（「紙」）尺寸（「100％」。，'100％'）; \t \t變種商店= draw.import（rawSvg）; 應該工作是嗎？雖然我仍然得到「對象現在有方法動畫」 store.animate（）。移動（150，150）; –

這是因爲「store」是一個包含導入元素的對象。你應該能夠像這樣定位它們：store.polygon1238.animate（200）.fill（'＃f06'）; – wout

我閱讀的文檔，它不是很清楚，我的最後一件事。但是，你不能添加一個id屬性到this.SVG對象，然後通過標準的DOM方法訪問svg元素嗎？或者你是否試圖檢索js對象本身？這不就是你所說的那種變化，還是爲時已晚？

來源

2013-02-05 19:06:44 Anthony

我真的不知道。我很高興能夠訪問SVG對象，我不需要訪問JS對象，因爲我只是想操縱DOM中的SVG。我到底在哪裏添加ID屬性？ –

我一直在檢查DOM屬性，ID顯示爲path2993，所以這很奇怪爲什麼這不起作用。我用Raphael.js做了同樣的事情，只是提供了路徑名，它工作正常。 –

你可以得到一個元素：SVG.get（「element_id」） – wout

的svg.js進口插件是非常年輕的。所有導入的元素實際上建有svg.js所以他們都在svg.js使用兒童（）方法暴露：

var draw = svg('paper'); 
draw.import('... svg data ... '); 
draw.children().forEach(function(element) { 
    console.log(element.attr('id'); 
});

但是，如果你想引用的元素分別最好是單獨創建它們而不是導入一個巨大的文件的SVG。假設您想要使用Inkscape中生成的路徑，只需創建單個形狀並將其保存爲純svg。打開SVG文件，找到<path>標籤並複製d="..."屬性的內容，這可能是這個樣子：

M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z

然後你就可以製作和動畫路徑：

var pathData = 'M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z'; 
var draw = svg('paper'); 
var path = draw.path(pathData).size(30).move(10,10); 
path.animate().move(100,100);

來源

2013-02-05 21:16:33 wout

動畫導入SVG對象

回答

相關問題