我尝试将svg图形添加到html页面。SVG中的不同元素具有mouseover属性,只有当SVG插入<object>标记中时,这些属性才起作用。当使用<img>标记插入鼠标时,鼠标悬停不起作用。
我的问题是,svg图形相当大(故意的),占页面宽度的100%:

<object data='mydrawing.svg' width="100%" type="image/svg+xml"></object>

这样,svg的高度就大于页面的高度。问题是webkit浏览器(我尝试过Chrome和Safari)似乎在页面限制下“剪切”了SVG文件。在另一种情况下,当我向下滚动时,我直接到达页面的页脚,而不是绘图的底部。
这就是它的样子:
它应该是这样的:
如果我使用firefox或者svg被插入到<img>标记中(但是在这种情况下,如上所述,mouseover不再工作),我就没有问题了。
知道怎么解决我的问题吗?

最佳答案

您可以使用XMLHttpRequest将SVG文件作为XML加载到您的web页面中,并且可以将其安排为填充屏幕。此外,svg文件中的所有事件都可用。
使用svg文件尝试下面的示例(对于IE/FF/CH/OP测试为OK)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body style='overflow:hidden'>
<div id="svgDiv" style='position:absolute;top:0px;left:0px'></div>
<script>
//----onload---
function loadSVGasXML()
{
    var SVGFile="yourSVGFile.svg"

    var loadXML = new XMLHttpRequest;
    function handler()
    {
        if(loadXML.readyState == 4)
        {
            if (loadXML.status == 200) //---loaded ok---
            {
                var xmlString=loadXML.responseText
                svgDiv.innerHTML=xmlString
                sizeFull()
            }
        }
    }
    if (loadXML != null)
    {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}
//--onload, onresize----
function sizeFull()
{
    var mySVG=document.getElementsByTagName("svg")[0]
    var svgW=window.innerWidth
    var svgH=window.innerHeight
    var bb=mySVG.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height

    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}
window.onresize=sizeFull
document.addEventListener("onload",loadSVGasXML(),false)
</script>
</body>
</html>

10-06 05:28
查看更多