我尝试将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>