在html页面中渲染SVG文件 [英] Rendering SVG file in html page

问题描述

我有一个要在网页中显示的SVG文件.SVG文件包含一些链接，单击链接后，应在新窗口中打开页面.

I have one SVG file that I have to show it in webpage. SVG files contains some links, on clicking links, page should be opened in new window.

1)如果我使用

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

我无法单击链接.

2)为了克服这个问题，我正在使用

2) To overcome this problem I am using

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

我可以单击链接.

但是问题来了，图像应该呈现为宽度815px和高度815px的div.如果使用img标签，则可以完美呈现，但是如果使用对象标签，则将加载完整图像.图片通常是巨大的文件，宽度和高度可能为4500px.我将使用缩放功能清楚地显示用户图像.

But here the problem comes, Image should be rendered into a div of width 815px and height 815px. If I use img tag it is perfectly rendering but if I use object tag, full image is loading. Image is normally huge file may be 4500px width and height. I will use zoom feature to show user image clearly.

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

I need to solution to render SVG into a div of height and width 815px and links in svg file should be clickable. I am using HTML4, I cannot upgrade to HTML5.

推荐答案

您可以使用 XMLHttpRequest 将svg文件作为DIV的innerHTML加载为XML，然后计算 viewBox svg，因此它会填充DIV，并对齐上/下加上左/右，并保持纵横比.为此，您必须能够通过其ID或标签名称获取svg元素加载后，您应该可以根据需要直接将svg元素链接到打开的窗口.

You can load your svg file as the innerHTML of your DIV as XML using XMLHttpRequest Then compute the viewBox of the svg so it fills the DIV and is aligned top/bottom plus left/right, maintainig aspect ratio. To do this you must be able to get the svg element via it id or tag name After its loaded you should then be able to link svg elements directly to open windows as needed.

我用浏览器IE11/CH31/FF23在HTML 4.0中严格测试了以下内容，并且效果很好.

I tested the following in HTML 4.0 strict with the broswers IE11/CH31/FF23 and it works nicely.

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！