Question

我在网页上的对象标记中使用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中显示（我猜也会出现问题），或者我是否使用了对象标签/ SVG文件？

似乎无法用IE中的CSS解决这个问题，而另一个浏览器则保持SVG背景的透明度。

Answer 1

经过一些实验和研究后，我找到了解决方案。我需要在定位中将<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>的所有格式都可见。

我希望这可以帮助那些偶然发现同样问题的人。

对象标记内的SVG图像过度分析网站内容

1 个答案: