動態SVG圖像生成問題

我正在嘗試編寫一個基於用戶輸入生成SVG圖像的服務器端腳本（PHP）。我使用下面的代碼：動態SVG圖像生成問題

<?php 

echo '<?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<head><meta http-equiv="Content-Type" content="svg+xml" /></head> 

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 

</svg>'; 

?>

我讀的地方，MIME類型必須是SVG + XML的，所以我試着將它設置在內容類型，你可以在上面看到。 Firefox正在接收正確的代碼，但圖像未呈現。有人知道這裏要改變什麼嗎？

來源

2009-10-26 Kshitij Saxena -KJ-

根據SVG page on wikipedia，應將SVG作爲image/svg+xml。
參見：1.2 SVG MIME type, file name extension and Macintosh file type

下列元：

<meta http-equiv="Content-Type" content="svg/xml" />

沒有定義內容從服務器提供服務的方式 - 它更多的方式，讓這些信息，HTML頁面，當你無法定義它的投放方式...
而且，我不知道，如果meta元素是在SVG specifications有效 - 我讓你檢查^^

您需要做的是，在這裏，從您的服務器發送HTTP標頭，指示您的數據的內容類型。

這是使用PHP header函數完成的;你的情況：

header('Content-type: image/svg+xml'); 

echo '<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
</svg>';

注：

我已刪除了<meta>和<head>標籤;不知道，如果<head>應該被刪除，但是，因爲它是空的....
我已經添加了調用header功能
SVG的紅色圓圈正確Firefox瀏覽器顯示的 - 因此，似乎工作;-)

希望這有助於！

來源

2009-10-26 05:44:13

謝謝:)我被困在這個很長的時間。它現在完美。 – 2009-10-26 06:08:01

@Pascal：是的，SVG中沒有'head'，並且'meta'元素的用法不同。 – Boldewyn 2010-02-18 09:28:20

我最近成功地在xhtml文檔中使用svg。

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

訣竅是爲每個項目使用svg：前綴。它需要知道由瀏覽器正確解析的名稱空間。

然後我doscovered Raphael Javascript庫http://raphaeljs.com/這使得處理svg對象非常容易。

我希望它能幫助

來源

2009-10-26 06:23:55 luc

您不需要在每個元素上使用前綴，只需將xmlns =「http://www.w3.org/2000/svg」放在最外層的 2009-10-26 11:47:11

... modulo正確的xmlns值 – 2009-10-26 11:48:53

哦，真的，我需要更改xmlns：svg嗎？ – luc 2009-10-26 11:56:11

只是說這個：

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

將工作與此相同：

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head><title>test</title></head> 
    <body> 
    <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg> 
    </body> 
</html>

你可以自己判斷哪個更可讀/乾淨。如果你使用了許多svg片段，那麼在某些情況下，像第一個例子中那樣將xmlns聲明放在html根元素上是有意義的。

來源

2009-10-26 18:35:38

動態SVG圖像生成問題

回答

相關問題