Question

我有一个SVG文件，我必须在网页中显示它。 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>

我可以点击链接。

但问题来了，Image应该渲染成宽度为815px且高度为815px的div。如果我使用img标签它是完美的渲染，但如果我使用对象标签，正在加载完整的图像。图像通常是巨大的文件，可能是4500px的宽度和高度。我将使用缩放功能清楚地显示用户图像。

我需要解决方案将SVG渲染为高度和宽度为815px的div，svg文件中的链接应该是可点击的。我使用的是HTML4，我无法升级到HTML5。

Answer 1

如果内容加载存在差异，则表明您有一些从svg文件引用的图像。当您使用＆lt; img＆gt;时，由于安全限制，浏览器将阻止任何此类外部引用。用于嵌入svg。但是，当您使用＆lt; object＆gt;。

时，相同的svg将加载所有此类资源

如果差异是可见大小，那么这可能是一个CSS问题，在这种情况下调整css直到你让svg显示在815x815px应该就够了。但是，您可能需要添加viewBox属性（如果这是您的坐标系，则将其设置为0 0 815 815），以使svg自动缩放到给定的css视口。

Answer 2

您可以使用svg标记并将其放在embed标记中。

要缩放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 x 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很慢（特别是在转换和重绘时，如果你这样做）。

Answer 3

您可以使用 XMLHttpRequest 将svg文件作为DIV的innerHTML加载为XML然后计算svg的 viewBox ，使其填充DIV并对齐top /底部加左/右，维护纵横比。要做到这一点，你必须能够通过它的id或标签名称获取svg元素加载后，您应该能够根据需要将svg元素直接链接到打开的窗口。

我使用broswers IE11 / CH31 / FF23在HTML 4.0严格测试了以下内容，它运行良好。

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%")

}

在html页面中渲染SVG文件

3 个答案: