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

【问题标题】：SVG not scrollable in webkit browsers when inserted using <object>使用 <object> 插入时，SVG 在 webkit 浏览器中不可滚动
【发布时间】：2014-02-06 20:12:19
【问题描述】：

我尝试将 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> 标记中，则没有问题（但在这种情况下，如上所述，鼠标悬停不再起作用）。

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

【问题讨论】：

我相信
@nrathaus 在这种情况下，它不再加载文件......
我不明白你的意思，HTML5 允许你将
@nrathaus 抱歉，我的意思是我不能直接在 html 中复制整个 svg，因为它是一个模板，用于整个网站的不同页面，并加载不同的 svg每一页。所以 svg 应该是动态加载的，而不是直接硬编码到 html 中。我希望这是有道理的......
你试过吗？

标签： html svg webkit scrollable

【解决方案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>

【讨论】：