对象标签中的 SVG 图像覆盖网站内容答案

【问题标题】：SVG image within an object tag overlys website content对象标签中的 SVG 图像覆盖网站内容
【发布时间】：2018-07-15 11:16:37
【问题描述】：

我在网页上的对象标记中使用 SVG 图像。我不能使用 img-tag，因为我需要与 SVG 中的 CSS 类进行交互，并且需要在 SVG 中点击时使用导航选项。

我曾经使用 SVG 内联，但现在我想重新设计页面以使其具有自适应/响应性，因此我尝试使用 object-tag 使其可扩展。它适用于 Chrome、Firefox 和 Opera。当涉及到 IE 时，我遇到了问题。

除了其他浏览器，IE 用白色背景覆盖所有内容。这包括我用来在用户单击某些元素时显示的导航 div。我简化了一切以显示效果：

应该是这样的

IE 是怎么做的

我试图在对象上摆弄 Z-index，将对象包装在不同的 div 中并在其上应用 z-index。我还在 SVG 和对象标签上尝试了 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 中显示（我想也会有问题），还是我以错误的方式使用 object-tag/SVG 文件？

似乎无法在 IE 中使用 CSS 解决此问题，而其他浏览器则保持 SVG 背景透明。

【问题讨论】：

你的一些引号是卷曲的。
为了尽量减少我在 word 中预先输入的拼写错误。我猜 MS 自动格式化了我编辑类名的一些引号。

标签： html css internet-explorer svg

【解决方案1】：

经过一些试验和研究，我找到了解决方案。我需要使<ul> 元素绝对定位，并将其从假<iframe> 中删除。现在导航是可见和可点击的。由于高度可变，我需要添加一些 CSS 并在 javascript/jQuery 中调整高度和宽度，但这无关紧要。

所以它对我来说是这样的：

 <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> 的所有格式可见。

我希望这对遇到同样问题的人有所帮助。

【讨论】：