跨瀏覽器SVG> HTML

彼得Collingridge，一個非常尊敬的堆棧溢出成員已經產生了我們的SVG，我們問了Stack，從圖像提供。跨瀏覽器SVG> HTML

你可以看到它在這裏工作： [刪除鏈接]

現在我整天蒐羅，試圖找到這個轉換爲HTML的最佳方式，以便我們可以添加事件，實際上它嵌入在我們的HTML。雖然我意識到它可以直接嵌入到最新的瀏覽器中，顯然，即9現在可以兼容從vml升級的svg。

我看過svgweb，基思木材和編碼閱讀raphael，也充足。

我只是不能複製正是我們想要在HTML中，在所有瀏覽器，ESP：FF，Chrome和IE 8 +

任何人都可以點我在正確的方向。此外，我從未使用svg文件，因此不知道如何將onclick和事件處理程序添加到您在示例中看到的每個元素。

請任何幫助表示讚賞。

它將運行的網站使用jQuery庫，如果多數民衆贊成在任何幫助。

來源

2011-05-15 422

我認爲嘗試將SVG嵌入到yoru HTML中會更有成效，而不是試圖將SVG轉換爲HTML。您提到了svgweb和Ample SDK，但是您沒有描述這些解決方案以何種方式失敗。請提供更多信息。謝謝。 – jbeard4 2011-05-15 14:02:37

另外，爲什麼要刪除鏈接到SVG？無論如何，它仍然可用時查看這篇文章的修訂：http://stackoverflow.com/posts/6006566/revisions – jbeard4 2011-05-15 14:03:51

定期處理程序如onclick似乎工作正常。只需添加如

<path onclick="alert('Text here');"> 
    ... 
</path>

Firefox每晚，Internet Explorer 9和Chrome支持這一點很好。 Windows上的Safari 5根本不渲染SVG。

來源

2011-05-15 05:03:15 Soumya

是的，我正在玩添加到標題：xmlns：xlink =「http://www.w3.org/ 1999/xlink「然後將鏈接包裝爲如下鏈接：我的問題是如何在html頁面中添加此內容，並且它與3我提到的瀏覽器ie ie 還有如何爲我在此評論中發佈的鏈接創建一個onclick事件 – 422 2011-05-15 05:12:21

我直接通過電子郵件發送，但如果其他人有興趣將SVG整合到HTML中，這是我的方法。

添加的onclick事件爲SVG

由於Soumya92說，你可以直接添加到這些SVG元素，如：

<path onclick="alert('Alert!');"/>

對於更復雜的功能，你可以添加ECMASscript（基本的Javascript ）加入SVG。例如。

<svg> 
<script type="text/ecmascript"> 
    <![CDATA[ 
     function myfunction(evt){ 
     alert(evt.target.getAttributeNS(null, "alert_text")); 
     } 
    ]]> 
    </script> 

    <path id="my_path" alert_text="Alert!" onclick="myfunction(evt)" d="..."/> 
</svg>

要調用存在於HTML調用JavaScript函數：

top.myfunction()

操縱SVGs從HTML 嵌入SVG在HTML中：

<embed name="mySVG" src='svg_filename.svg'></embed>

確保HTML和SVG在同一個文件夾中，否則Javascript將無法訪問它。使用JavaScript訪問SVG元素添加功能的HTML腳本元素：

function ready(){ 
    svgdoc = document.svg_map.getSVGDocument(); 
    svgRoot = svgdoc.documentElement; 
}

並與SVG中調用此：

function init(evt) { 
    top.ready() 
}

而且SVG元素本身，例如內調用此

<svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.2" 
    onload="init(evt)">

最後，您現在可以選擇和操作SVG元素。例如：

svgdoc.getElementById('my_path').setAttributeNS(null, "fill", "#ff0000");

我認爲這應該涵蓋大多數基本選項。它絕對適用於最新版本的Firefox。它應該適用於Chrome，但只有在Web服務器上的文件 - 如果它們只在您的計算機上，那麼它會阻止Javascript從另一個文件訪問一個文件。我不能擔保其他瀏覽器。

來源

2011-05-15 16:36:55

有點遲，但是在大多數現代瀏覽器（包括IE）上是否支持這種方法？ – Blender 2011-12-09 17:00:43

跨瀏覽器SVG> HTML

回答

相關問題