在html頁面重寫SVG文件

我有一個SVG文件，我必須在網頁上顯示它。 SVG文件包含一些鏈接，點擊鏈接時，頁面應該在新窗口中打開。在html頁面重寫SVG文件

1）如果我使用img標籤一樣

<img id="zoom_mw" src="NC_013929_Annotation_details.svg" alt="The CRISPRmap" 
    data-zoom-image="NC_013929_Annotation_details.svg">

我無法點擊的鏈接。

2）爲了克服這個問題，我使用

<object type="image/svg+xml" data="NC_013929_Annotation_details.svg"></object>

我能點擊的鏈接。

但是，這裏的問題來了，圖像應該呈現爲寬度815px和高度815px的div。如果我使用img標籤，它完全呈現，但如果我使用object標籤，則會加載完整圖像。圖像通常是巨大的文件可能是4500px的寬度和高度。我將使用縮放功能清晰地顯示用戶圖像。

我需要解決方案將SVG渲染爲高度和寬度815px的div，並且svg文件中的鏈接應該是可點擊的。我使用的是HTML4，我無法升級到HTML5。

來源

2014-01-16 nutim

可以使用的XMLHttpRequest然後計算視框的SVG的，使其充滿DIV和對齊頂部/底部加上左/右，maintainig寬高比加載SVG文件作爲DIV作爲XML的innerHTML 。要做到這一點，你必須能夠通過它獲得svg元素id或標記名稱加載後，你應該能夠直接鏈接svg元素來根據需要打開窗口。

我測試了下面的HTML 4.0中嚴格的與Broswers IE11/CH31/FF23，它很好地工作。

function loadSVGasXML() 
{ 
    var SVGFile="mySVGFile.svg" 

    var loadXML = new XMLHttpRequest; 
    function handler() 
    { 
     if(loadXML.readyState == 4) 
     { 
      if (loadXML.status == 200) //---loaded ok--- 
      { 
       var xmlString=loadXML.responseText 
       svgDiv.innerHTML=xmlString 
       /* to get id 
       var parser = new DOMParser(); 
       XMLDoc=parser.parseFromString(xmlString,"text/xml").documentElement ; 
       SVGId=XMLDoc.getAttribute("id") 
       */ 
       fitSVGinDiv() 
      } 
     } 
    } 
    if (loadXML != null) 
    { 
     loadXML.open("GET", SVGFile, true); 
     loadXML.onreadystatechange = handler; 
     loadXML.send(); 
    } 
} 


function fitSVGinDiv() 
{ 
    var divWH=815 

    //var mySVG=document.getElementById(SVGId) 
    //---or if no id--- 
    var mySVG=document.getElementsByTagName("svg")[0] 
    var bb=mySVG.getBBox() 
    var bbw=bb.width 
    var bbh=bb.height 

    //--use greater of bbw vs bbh-- 
    if(bbw>=bbh) 
    var factor=bbw/divWH 
    else 
    var factor=bbh/divWH 

    var vbWH=divWH*factor 

    var vbX=(bbw-vbWH)/2 
    var vbY=(bbh-vbWH)/2 

    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH) 

    mySVG.setAttribute("width","100%") 
    mySVG.setAttribute("height","100%") 

}

來源

2014-01-16 21:05:44

非常感謝您的解決方案弗朗西斯。它工作正常。 – nutim

您可以使用svg標籤並將其放置在嵌入標籤中。

要擴展您的svg，您可以像這樣將屬性添加到svg標籤。

<svg version="1.1" id="Container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="1000px" viewBox="0 0 1920 1000" enable-background="new 0 0 1920 1000" xml:space="preserve">

這將擴展您的SVG 1920×1000

爲了保證您的鏈接，點擊就可以一個onclick屬性添加到你想點擊的SVG組，並將它調用JavaScript函數打開新窗口。

<g onclick="open_link('http://stackoverflow.com')"> 
    <!-- Your SVG geometry to click on goes here --> 
</g> 

function open_link(url) 
{ 
    var win=window.open(url, '_blank'); 
    win.focus(); 
}

無論鏈接是在新標籤頁還是窗口中打開，都是瀏覽器設置特定的，您無法控制它。 svg是否能夠很好地呈現，甚至完全是瀏覽器特定的。根據我的經驗，Chrome在渲染svg的時候最好使用最新版本的IE，Firefox可以，Safari速度慢（特別是在轉換和重繪時，如果你這樣做的話）。

來源

2014-01-16 02:33:41 jeremyjjbrown

代替使用''和'onclick'，使用''和'的xlink的：href' /'target'。另外，HTML 4中的'