Question

我尝试将svg绘图添加到html页面。 SVG中的不同元素具有鼠标悬停属性，仅当SVG插入<object>标记内时才有效。使用<img>标记插入鼠标悬停时无效。

我的问题是，svg绘图相当大（故意）并占用了100％的页面宽度：

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

通过这样做，svg的高度大于页面的高度。问题是webkit浏览器（我试过Chrome和Safari）似乎＆＃34; cut＆＃34;页面限制的SVG文件。在另一方面，当我向下滚动时，我直接到达页面的页脚，而不是我绘图的底部。

这就是它的样子：

这就是它的外观：

如果我使用firefox或者svg插入<img>标记中，我没有问题（但在这种情况下，正如我上面提到的，鼠标悬停不再起作用了。）

知道如何解决我的问题吗？

Answer 1

您可以使用 XMLHttpRequest 将SVG文件作为XML加载到您的网页中，并且可以将其安排为填充屏幕。此外，svg文件中的所有事件都可用。

使用svg文件尝试以下示例。（IE / FF / CH / OP测试正常）

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

使用<object> </object>插入时，SVG在webkit浏览器中不可滚动

1 个答案: