在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中的'