的jQuery插件SVG：如何顯示預定義的SVG圖像

我想顯示使用jQuery SVG在HTML頁面中.svg文件（http://keith-wood.name/svg.html）。它應該很簡單，但我無法讓它工作。的jQuery插件SVG：如何顯示預定義的SVG圖像

我得到的唯一的輸出是一個大箱子（這是我的div通過CSS樣式）的字樣，「加載時出錯：」在箱子裏。我已經在Chrome和Firefox上試過了。在Chrome中，我必須將其作爲「chromium-browser --disable-web-security」運行。

下面的代碼：

<html> 
<head> 

    <style type="text/css"> 
     #canvas { width: 100%; height: 100%; border: 1px solid #484; } 
    </style> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.svg.min.js"></script> 
    <script type="text/javascript" src="jquery.svgdom.min.js"></script> 
    <script type="text/javascript" src="jquery.svganim.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready (function() { 
      $('#canvas').svg({loadURL: 'lion.svg'}); 
     }); 

    </script> 
</head> 
<body> 
    <div id='console'></div> 
    <div id='canvas'></div> 
</body>

來源

2011-03-05 Pogcotn

有一點要注意的是，輸入的網址使用jquery.ajax調用加載。所以我不認爲它會工作，如果lion.svg是本地的。對我來說，它的工作原理，如果我這樣做：

<html> 
<head> 

    <style type="text/css"> 
     #canvas { width: 100%; height: 100%; border: 1px solid #484; } 
    </style> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script> 
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script> 
    <script type="text/javascript"> 

     $(document).ready (function() { 
      $('#canvas').svg({loadURL: 'http://keith-wood.name/lion.svg'}); 
     }); 

    </script> 
</head> 
<body> 
    <div id='console'></div> 
    <div id='canvas'></div> 
</body>

來源

2011-03-05 21:11:32 SiggyF

啊 - 現在看起來很明顯。謝謝。我還發現了一個很巧妙的方法來解決它爲當地的發展。如果你已經安裝了Python，轉到文件所在的目錄，然後運行「蟒蛇-m SimpleHTTPServer」。 – Pogcotn 2011-03-06 05:29:54

你不必使用腳本來包括獨立SVG文件，但你可以，如果你想（如你的榜樣）。我個人覺得它清潔/容易只是包括由參考SVG（例如<object data="my.svg">），但它是由你來選擇任何你想要的方式。

這裏是some more ways to include svg（來自SVG Primer），它不需要使用腳本。

來源

2011-03-06 07:15:30

的jQuery插件SVG：如何顯示預定義的SVG圖像

回答

相關問題