最近因為做SVG 方面的開發工作，所以研究起SVG 的一些東西。

手頭上使用的資料是SVG 官方的文檔，《SVG essentials 》，《基于XML 的SVG 應用指南》。

網上說，firefox,opera, 都可以直接支持SVG ，當然安裝了SVG 插件的IE 也行。

馬上開始行動，代碼之前，了無秘密。 寫一個最簡單的SVG 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg ?? width="1024" ?? height="768"> ??? <rect ?????? style="opacity:1;fill:#00ff00" ?????? id="rect2160" ?????? width="540" ?????? height="511.42856" ?????? x="42.857143" ?????? y="158.07646" /> </svg>

?

使用安裝了Adobe SVGViewerd 的IE 瀏覽器打開，可以正常顯示，如下圖：

?

再使用 firefox 打開，不行，不可以正常顯示， firefox 把它當作 xml 文件來顯示了，如下圖：

?

?

上網查資料，網上都說： firefox 可以直接支持 SVG ，具體怎么支持 SVG ，都沒提到。而且，好像沒人遇到我這樣的問題。是不是其他人見到別人說支持，也就人云亦云，說支持，而自己沒去檢驗過。關于這點不可考究。

既然遇到問題，就解決它。首先我找了其他 SVG 的編輯軟件來看看。首先使用開源的 Inkspace 軟件。用它編輯了一個 SVG 文件，然后用 firefox 打開，可以正常顯示。這證明了， friefox 是可以正常支持 SVG 的。具體為什么，繼續研究。

? 我對比了 Inkspace 生成的文件源代碼和我寫的 SVG 文件源代碼，發現 Inkspace 生成的文件里面多了一行東西：

xmlns="http://www.w3.org/2000/svg"

?

我把這行代碼加入到我的 SVG 文件中，編程下面的樣子：

?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg

?? width="1024"

?? height="768" xmlns="http://www.w3.org/2000/svg">

??? <rect

?????? style="opacity:1;fill:#00ff00"

?????? id="rect2160"

?????? width="540"

?????? height="511.42856"

?????? x="42.857143"

?????? y="158.07646" />

</svg>

?

保存后再用 Firefox 打開， OK, 這次可以正常顯示了，如下圖：

?

做技術，我們要知其因。為什么加上那一行代碼以后就可以正常顯示了呢？

查資料

我在 《SVG essentials 》查到這么一段：

SVG uses the URI http://www.w3.org/2000/svg for its namespace. The URI is just an

identifier — opening that page in a Web browser reveals some links to the SVG, XML

1.0, and Namespaces in XML specifications. Programs processing documents with

multiple vocabularies can use the namespaces to figure out which vocabulary they are

handling at any given point in a document.

SVG applies the namespace in the root element of SVG documents:

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

....

</svg>

大意是說： SVG 使用 http://www.w3.org/2000/svg 這個鏈接來標識文件是 SVG 的命名空間，這個鏈接是一個標志而已，用來告訴打開文件的軟件：這個文件是 SVG 文件，而不是把它當成 XML 文 件打開。另外，如果要在SVG加入圖片的鏈接，還要加上這一句，xmlns:xlink="http://www.w3.org/1999 /xlink"。Opera好像不支持圖片的鏈接。而firefox和Opera都好像不支持中文文字的字體的各種參數的設置。哪位大蝦知道的麻煩告訴 我。

?

?

PS ：轉走的記得標明出處。

http://blog.csdn.net/Feisy/archive/2008/06/19/2564509.aspx

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的关于SVG文件在Firefox中正确显示的研究的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。