將map.svg繪製到瀏覽器並在每個區域執行任務點擊

我必須創建一個可在桌面，Ipad和Android上工作的在線停車系統。我有一個用於停車區域的.svg格式地圖。將map.svg繪製到瀏覽器並在每個區域執行任務點擊

我的問題是：如何將該地圖渲染到瀏覽器中並在每個插槽上執行JavaScript任務單擊。

我正在開發使用asp.net的項目。目前我正在嘗試將.svg轉換爲畫布。

我是新來的這個圖形的東西，並堅持了一段時間。請以更好的方式幫助我，或爲我們提供此方法的示例鏈接。

感謝

2012-10-05 Monie corleone

在SVG的元素的DOM的成員，以及（如果已經插入這樣），所以喜歡的東西選擇他們tutorialjQuery或document.querySelector()是沒有問題的。但是，並非所有瀏覽器（IE瀏覽器都可以使用原始格式處理SVG）（禁止這種無縫的JavaScript集成）。

我在最近的一個項目中做了這個，它的工作就像一個魅力。

在Web上使用SVG時需要考慮的一些事情首先是SVG的大小。大文件往往會減慢的一切，特別是在應用JavaScript操作和事件時。更重要的是，儘可能保持您的SVG文件清潔。某些SVG軟件會插入「XML噪聲」節點，這對渲染不必要，並禁用將原始格式插入到DOM中。

您應該如何將SVG集成到DOM中，是將SVG文件的內容加載到當前DOM節點。我用JavaScript做了這個，但是這個方法對於輸出應該不重要。

示例;

... 
    <div class="svg-node" data-svg-file="/images/file.svg"></div> 
...

並使用jQuery加載它們並附加事件處理程序;

$(document).ready(function() { 

    var svgFile = $('.svg-node').attr('data-svg-file'); 

    $.ajax({ 
     'url': svgFile, 
     'type': 'get', 
     'dataType': 'text', 
     'success': function (svgContent) { 

      $('.svg-node').html(svgContent); 
      $('.svg-node #an-elements-id').on('click', handleEvent); 

     } 
    }); 

});

不幸的是，大多數網絡瀏覽器都有這種方法的一些問題。無法通過DOM處理SVG組，並且無法附加任何您希望的節點屬性 - 僅支持少數節點屬性。

但總而言之，這是一個簡單易行的實現，它在大多數瀏覽器中都能正常工作。

來源

2012-10-05 11:58:15

是的我試過你的方法來綁定事件到SVG文件。它的工作。謝謝。 –

嗨Björn，一個查詢。現在我已經加載parking.svg地圖。當汽車停在插槽中時，我必須將該插槽更改爲汽車圖像。我有沒有最好的方法來做到這一點，而不會干擾軸。因爲當我加載汽車內容時，它顯然會被繪製在保存在car.svg文件中的軸上。目前我正在使用填充來改變插槽的顏色。但我想在該位置加載汽車圖像。 –

@Moniecorleone - 因爲它是SVG，所以你可以簡單地將另一組節點連接到現有的結構中（將它想象成層）。所以你可以通過JavaScript加載另一個SVG文件，並將其附加到現有文檔。 –

下面是如何添加事件處理SVG圖形

來源

2012-10-05 11:55:52

將map.svg繪製到瀏覽器並在每個區域執行任務點擊

回答

相關問題