object标签内的SVG图像与网站内容重叠
我在网页上的object标签中使用SVG图像。我不能使用img-tag，因为我需要与SVG中的CSS类交互，并且需要一个导航选项，用于在SVG中单击。
我曾经使用内联的SVG，但现在我想修改页面以使其具有自适应/响应性，因此我尝试使用object-tag来使其可伸缩。它在Chrome、Firefox和Opera上运行良好。当涉及到IE时，我遇到了问题。
与其他浏览器不同的是，IE用白色背景覆盖所有内容。这包括我用来在用户单击某些元素时显示的导航div。我简化了一切以显示效果：
事情应该是这样的。
IE是如何理解它的
我尝试在对象上使用Z-index，将对象包装在不同的div中，并对其应用z-index。我还在SVG和object标签上尝试了CSS，试图将背景设置为透明、无和类似的东西。一切都无济于事。背景保持白色，内容隐藏。
然后我发现了这个：http://solidlystated.com/scripting/place-div-over-iframe-in-internet-explorer/，它引导IE显示内容，但使元素处于非活动状态，因为iframe阻止了其中的链接被点击：
到目前为止简化的HTML：
<body>
<div class="wrapper">
<h1>System</h1>
<div class="contentItem">
<div class="aroundSVG" style="height: 530px">
<object type="image/svg+xml" data="/img/sys2.svg" id="svgObject" style="width: 100%; height: 100%; background: transparent;"></object>
</div>
<div id="showNav">
<ul>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/index.htm';
return false;">Line 1</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/event.htm';
return false;">Line 2</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/error.htm';
return false;">Line 3</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/index.htm?reset=true';
return false;">Line 4</a></li>
</ul>
<!-- <iframe id="fake" src="about:blank" style="width: 100%; height: 100%; position: absolute; top: 1px; left: 1px; border: none;"></iframe> -->
</div>
</div>
</body>SVG文件：
<head>
<meta http-equiv="content-type" content="image/svg+xml"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</meta>
<link rel="stylesheet" type="text/css" href="/css/svgStyle.css" media="all" />
<script type="text/javascript" src="/js/jquery_min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
parent.svgObj = document
parent.svgModules = $(parent.svgObj).find(".modules");
parent.setModClick();
$(parent.svgObj).click(function (e)
{
var container = parent.navContainer;
var optDiv = $(".classB");
if (!container.is(e.target)
&& container.has(e.target).length === 0
&& !optDiv.is(e.target)
&& optDiv.has(e.target).length === 0)
{
container.hide(250);
}
});
})
</script>
</head>
<svg viewBox="0 0 923 500">
<g class=„classA classB“ id="gvg" transform="translate(300,250)">
<circle class=„circle“ cx="150" cy="0" r="40" stroke="black" stroke-width="3" fill="red" />
</g>
<g class=„classA classB“ id="dr" transform="translate(300,300)">
<circle class=„circle“ cx="150" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</g>
<g class=„classA classB“ id="hur" transform="translate(300,350)">
<circle class=„circle“ cx="150" cy="100" r="40" stroke="black" stroke-width="3" fill="red" />
</g>
</svg>有没有办法使切换的菜单保持活动状态并显示在IE/Edge中(我猜也会有问题)，或者我使用对象标记/SVG文件的方式有误吗？
在IE中似乎没有办法用CSS解决这个问题，而另一个浏览器则保持SVG背景的透明性。
回答 1
Stack Overflow用户
发布于 2018-02-07 17:54:03
经过一些实验和研究，我找到了一个解决方案。我需要在定位时使<ul>元素成为绝对元素，并将其从伪<iframe>中删除。现在，导航是可见的，并且可以单击。由于高度可变，我需要在javascript/jQuery中添加一些CSS并摆弄高度和宽度，但这并不重要。
所以它对我来说是这样的：
<div id="showNav">
<ul style='position: absolute'>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/index.htm';
return false;">Line 1</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/event.htm';
return false;">Line 2</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/error.htm';
return false;">Line 3</a></li>
<li><a href=„LinkTarget“ onclick="location.href = this.href + fncTarget + '/index.htm?reset=true';
return false;">Line 4</a></li>
</ul>
<iframe id="fake" src="about:blank" style="width: 102%; height: 103%; border: none;"></iframe>
</div>您可能需要改变iFrame的高度、宽度和边框以匹配您的大小写，因为您需要进行调整以使父<div>的所有格式可见。
我希望这能帮助那些在同样问题上跌跌撞撞的人。
https://stackoverflow.com/questions/48625292
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号