如何在服務器上轉換內聯SVG？

我需要在一些其他元素上將生成的內聯SVG設置爲background-image，如in this example所示。由於這隻適用於Chrome，我需要其他方式將客戶端繪製的SVG設置爲background-image。如何在服務器上轉換內聯SVG？

另一種可能更簡單的內聯SVG是RaphaelJS演示，作爲seen here。

<svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.90625px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><rect x="0" y="0" width="640" height="480" r="10" rx="10" ry="10" fill="#ffffff" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect><circle cx="320" cy="240" r="60" fill="#223fa3" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0.5;" stroke-width="80" stroke-opacity="0.5"></circle></svg>

是否有可能在服務器上聯SVG（由RaphaelJS在客戶端上創建）轉換爲一個「真正」的SVG文件？這是一個Windows（.NET/c＃）服務器環境，應在其上進行轉換。

編輯

正如羅伯特Longson發現我失蹤了charset=，另外它看起來像我使用了錯誤的函數（encodeURI）來編碼聯SVG。

只是爲了完整起見這裏設定的是對我的作品

var svgUrl = 'url("data:image/svg+xml;charset=utf8,' + encodeURIComponent($('#raphaelPaper').html()) + '")'; 
$('#pictureDummy').css('background-image', svgUrl);

來源

2013-06-19 pantarhei

你爲什麼不簡單的得到''' Blackhole

@Blackhole它看起來像內聯的' pantarhei

我剛剛找到一個名爲'Raphael.Export'的圖書館。看起來它可以將客戶端生成的SVG導出到.svg文件。但不知道它是否適用於我生成的東西。嘗試一下。 – pantarhei

它僅適用於Chrome的作品，因爲你的數據的URL是invalid的background-image的代碼片段。它應該像這樣開始...

data:image/svg+xml;charset=utf8,%3Csvg

您錯過了charset=的一部分。您可以考慮將其報告爲blink bug。

這裏有一個corrected version

來源

2013-06-19 13:52:39

看起來你的提示通常解決了我的問題。不過，我在IE上生成SVG時遇到了問題。您的更正版本在IE上運行良好。但是，如果我在IE上動態創建SVG，它不會再通過設置背景圖像來工作。看看jsfiddle在註釋結尾處的IE版本不工作。它適用於我測試過的其他瀏覽器。 IE中產生的SVG與我用於初始問題和修正版本的SVG完全不同。任何想法可能與IE的問題？ http://jsfiddle.net/tBc3g/ – pantarhei

隨意問另一個問題。很難在評論中提問並回答。 –

我在此創建了一個跟進問題。如果能看一看，會很棒。我無法找出IE發生了什麼問題。 http://stackoverflow.com/questions/17269613/inline-svg-not-working-as-background-image-in-ie – pantarhei

如何在服務器上轉換內聯SVG？

回答

相關問題