IE9 SVG отображает проблему - PullRequest
Новая
       24

IE9 SVG отображает проблему

2 голосов
/ 04 июля 2011

Я искал много информации об IE и SVG онлайн, но без особого успеха.Я хочу загрузить карту в формате SVG, используя тип метки <object>, потому что я не хочу использовать плагин от Adobe.Причина в том, что с плагином Adobe таблицы стилей не работают на моем объекте (который содержит внешний SVG).Однако, если я помещу карту в этот тег, она отображается над контекстными меню и с непрозрачным белым фоном.Я уже протестировал тег <embed> с помощью «wmode = transparent», и он хорошо работал с 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">
   ...

С уважением

1 Ответ

0 голосов
/ 05 июля 2011

Итак, вы задаете три вопроса, насколько я понимаю.

  1. Почему в IE9 фон карты белый?
  2. Почему пользовательское выпадающее меню не отображается поверх карты?
  3. Почему объект / iframe перекрывают некоторые элементы в HTML-документе?

Некоторые предложения:

  • Попробуйте без использования фильтра на карте.
  • Попытайтесь создать минимальный тестовый сценарий, проверили ли вы позиции и z-индекс элементов, которые вы хотите поместить поверх объекта / iframe?
  • Попробуйте добавить границу к объекту / фрейму, чтобы вы увидели, где он находится и совпадает ли он с картой.
  • Попробуйте установить фон: красный и фон: прозрачный в элементе object / iframe, возможно, белый цвет является фоновым цветом по умолчанию в IE9?
  • Попробуйте хороший отладчик javascript / DOM и протестируйте больше браузеров.
...