raphael svg import size

我從Illustrator-image創建了SVG文件。我使用這個：https://github.com/wout/raphael-svg-import來導入和顯示矢量圖像。raphael svg import size

我讀了SVG文件的文本，並將其提交給了進口函數：

var mygetrequest = new XMLHttpRequest(); 
var svgdata = mygetrequest.responseText; 
paper.importSVG(svgdata); //where paper is my Raphael canvas

所有工作非常漂亮。

但我似乎無法找到任何信息或提示如何更改圖像的設置和視圖？例如，我非常喜歡它來填充它的容器，無視這個大小。

任何想法？文檔可以幫助我一路走來？任何東西，真的...

來源

2011-08-23 DummeDitte

有兩個想法，我可以爲您提供：

1）也許的SVG導入考慮到原來的大小和爲你做縮放。但是，在Illustrator中編輯時，可能有更大的文檔，這會混淆svgImport？

2）否則，您可以將紙張作爲一個集合導入。並縮放集合。（我不確定沒有一個例子可以玩，什麼centerx和centery應該是）。

[編輯（批准後）] 看來拉斐爾使您能夠得到一組的邊框：

var bbox = set.getBBox(); 
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example: 
paper.rect(bbox.x, bbox.y, bbox.width, bbox.height).attr('border', 'red');

所以我說，你可以：

獲取進口邊界框SVG集
使用set.translate將邊界框的中心與紙張中心對齊（例如，對於x平移使用類似(paperwidth/2) - (bbox.x + bbox.width/2)的東西）。
根據與紙張尺寸相比的邊界框尺寸進行縮放。您可能希望在保持寬高比的同時進行縮放，因此您必須使用最接近1（ paper.width/bbox.width和paper.height/bbox.height）的那個。
（注：現在的紙張使用中心作爲縮放的中心 - 因爲你翻譯你的設置其實這是SVG的中心設定爲好）

我這樣做，從我的頭頂，因此可能不是100％準確的，但如果你有這個想法，你可能會擺脫毛病。

來源

2011-08-23 14:22:05 Jochem

@ 1 - 無論如何，糾正這一點不會讓我改變不同容器的外觀。但是2。我有一種感覺，這不是解決問題最方便的方法，但現在它起作用了，我很高興！ – DummeDitte

非常有幫助。「直接」解決方案的問題並不那麼明顯，問題是svg的大小是多少。除了文檔大小之外，任何軟件的唯一線索就是各個svg元素邊界框的「極端」。我有一些想法讓它更具普遍性，並將它們作爲EDIT發佈在問題中。 – Jochem

我有一個類似的問題。我所做的是在Inkscape（SVG編輯器程序）中打開SVG，改變它的大小直到它確定...但是可能有更好的方法！

來源

2011-08-23 14:16:08

這樣會毀了SVG的整個目的，因爲它意味着要在不同的縮放中使用幾個地方。感謝您的意見，但！ – DummeDitte

我和原來的海報有完全一樣的問題。我和他做的事情是一樣的。即使在我閱讀了Jochem的解決方案/想法之後，我遇到了幾天仍無法解決的問題。

我的具體問題是，在Internet Explorer（所有版本）中，圖像保持渲染超出邊界，特別對齊到包含div的右下角。

嘗試使用轉換將圖像居中放置到其容器中並不起作用，也不容易理解Raphael的轉換實現。
我意識到raphael-svg-import庫是不完整的，無法使用svg組和文檔不存在。

在這個問題上花了這麼多時間之後，我的高級開發人員得出結論說這個插件有缺陷並且無法使用。

到目前爲止，我一直無法找到符合我特定要求的替代解決方案（由於公司政策，我們無法使用Flash）。對於那些沒有這種限制的人，我推薦Google的SVGWeb

雖然這不是OP問題的答案，但我的發現可能會爲將來可能遇到此問題的人節省一些時間。

來源

2012-03-16 16:19:52 dnshio

raphael svg import size

回答

相關問題