Question

我一直在寻找有关IE和SVG在线的大量信息，但没有取得多大成功。我想使用标签类型<object>以svg格式加载地图，因为我不想使用Adobe的插件。原因是使用Adobe插件时，样式表不适用于我的对象（包含外部SVG）。但是，如果我将地图放在此标记内，它会显示在上下文菜单上方，并带有不透明的白色背景。我已经使用“wmode = transparent”测试了<embed>标签，并且与Adobe SVG Viewer一起运行良好（但CSS无效）。

我该怎么办？有什么想法吗？

Chrome做得很好： enter image description here

但是IE ...... enter image description here 提前谢谢！

CSS：

path:hover {
    cursor: pointer;
    opacity: 0.3;
}

在HTML中：

<div id="panelmapa" style="position: absolute; z-index: 1; width: 100%; height:100%">
        <object style="position:absolute; height:100%; width:100%; margin-top:75px; 
                margin-bottom:100px; margin-right:50px; margin-left:30px;"
                id="mapasvg" data="<%= path %>/map.svg" name="MapaSVG"
                type="image/svg+xml">
        </object>-->
</div>

最后，svg（我用Inkscape创建了它）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<?xml-stylesheet href="../../css/mapaSVG.css"?><svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   onload="iniciar(evt)"
   width="100%"
   height="100%"
   viewBox="0 0 1024 860"
   id="svg5724"
   version="1.1"
   inkscape:version="0.48.1 "
   sodipodi:docname="mapaSVG.svg">
  <script
     id="script3"
     type="text/javascript"
     src="mapEffects.js" />
  <defs
     id="defs5726">
    <filter
       inkscape:collect="always"
       id="filter3879">
      <feGaussianBlur
         inkscape:collect="always"
         stdDeviation="8.9458125"
         id="feGaussianBlur3881" />
    </filter>
  </defs>
  <sodipodi:namedview
     inkscape:document-units="mm"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.86831672"
     inkscape:cx="903.46039"
     inkscape:cy="429.12416"
     inkscape:current-layer="mapa"
     id="namedview5728"
     showgrid="false"
     inkscape:window-width="1440"
     inkscape:window-height="838"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5730">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="mapa">
   ...

此致

Answer 1

所以，据我所知，你问了三个问题。

为什么地图的背景在IE9中是白色的？
为什么自定义下拉菜单不会在地图上呈现？
为什么object / iframe与html文档中的某些元素重叠？

一些建议：

在地图上尝试不使用过滤器。
尝试制作一个最小的测试用例，您是否检查了要在对象/ iframe顶部定位的元素的位置和z-index？
尝试向对象/ iframe添加边框，以便您可以看到它的位置以及它是否与地图相同。
尝试设置背景：红色和背景：对象/ iframe元素是透明的，也许白色是IE9中的默认背景颜色？
尝试使用更好的javascript / DOM调试器并在更多浏览器中进行测试。

IE9 SVG显示问题

1 个答案: