我尝试将 svg 绘图添加到 html 页面。 SVG 中的不同元素具有鼠标悬停属性，只有当 SVG 插入到 <object> 中时才有效。标签。使用 <img> 插入鼠标悬停时不起作用标签。
我的问题是，svg 绘图相当大(故意的)并且占了页面宽度的 100%:
<object data='mydrawing.svg' width="100%" type="image/svg+xml"></object>
通过这样做，svg 的高度大于页面的高度。问题是 webkit 浏览器(我试过 Chrome 和 Safari)似乎在页面限制处“剪切”了 SVG 文件。另一方面，当我向下滚动时，我直接到达页面的页脚，而不是我的绘图的底部。
这是它的样子:
它应该是这样的:
如果我使用 firefox 或如果 svg 插入到 <img> 中，我不会遇到问题标记(但在那种情况下，正如我上面提到的，鼠标悬停不再起作用)。
知道如何解决我的问题吗？
最佳答案
您可以将 SVG 文件作为 XML 加载，使用 XMLHttpRequest 到您的网页中，并且可以安排它填满屏幕。此外，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>
关于html - 使用 <object> 插入时，SVG 在 webkit 浏览器中不可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21613040/