在html页面中减少SVG文件 [英] Redering 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标签，例如

1) If I use img tag like

<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>

我可以点击链接。

但是这里的问题来了，图片应该渲染成宽度815像素和高度815像素的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到高度和宽度的div 815px和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.

推荐答案

您可以将svg文件作为DIV的innerHTML加载为XML使用 XMLHttpRequest 然后计算svg的 viewBox ，以便它填充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.

我测试了下面的HTML 4.0严格与broswers IE11 / CH31 / FF23，它工作很好。

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屋！