在IE 11 +

时间:2017-05-18 12:10:50

标签: javascript css svg

在我放弃并完全在SVG中构建我的解决方案之前,我想我会把它扔到StackOverflow人群中,看看我是否遗漏了任何东西。

在当前项目中,我有一个.png代表现实世界水灌溉控制器的面板。 SVG作为叠加层,包含所有可按下按钮和虚拟LED的坐标,在必要时在真实世界设备上闪烁,与正在与“真实”水控制器通信的节点应用程序交互,并且.png是嵌入式背景图片。 (参见下面的代码)我们以编程方式(通过Javascript)在进入页面时更改叠加SVG和面板图像,具体取决于之前的用户输入。

一切都很好,我们可以按SVG覆盖上的按钮,真实世界控制器响应,反之亦然。

问题归结为缩放嵌入图像。在Chrome,Firefox和Opera下,我可以将浏览器窗口调整为各种尺寸,SVG和嵌入式图像可以很好地扩展。works great!

但是IE 11+拒绝玩球,并且固执地将嵌入的图像保持在缩小的尺寸。IE not playing nice

我认为我已经搜索了关于在IE中扩展SVG主题的所有内容,并尝试了各种CSS hacks和DOM操作,尽管大多数似乎都适用于将SVG嵌入到HTML img标记中,而不是带有嵌入式图像标签的SVG

我尝试从SVG中移除所有宽度/高度并仅使用CSS;我尝试在图像标签中使用100%宽度/高度来(假设)允许viewBox控制它的尺寸;我已经尝试将宽度/高度固定为viewBox的相同值;我已经尝试在SVG标题和图像中使用preseveAspectRatio。我的想法已经不多了。

相关代码示例:

<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" >

  <image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image>

  <g>
    <rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" />
    <text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text>
    <text fill="black" x="326" y="198" id="displine2" xml:space="preserve">  ...  waiting for connection</text>
  </g>

  <rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" />
  <rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" />
  <rect id="dial_auto" x="148" y="278" opacity="0"  width="50" height="25" />
...

非常感谢任何我可能没有考虑过的方向的想法或刺激。我希望尽可能地保持当前形式的解决方案,因为我们根据用户输入动态更改面板,并且在两个SVG叠加之间有大约15个不同的面板。在纯SVG中重新构建每个面板需要相当多的时间。但如果有必要,我准备这样做。 :(

1 个答案:

答案 0 :(得分:0)

用户llobet的上述评论为html,body和svg元素添加100%的高度似乎可以解决问题。最初我接受了用户Mardoxx要求的codepen中的工作,并将其应用到我的CSS,但它仍然无法正常工作。除了最基本的CSS规则之外的所有CSS规则发现几个height: auto;,属性并删除它们或使它们100%完成后,几分钟修剪掉了,然后IE11开始玩得很好并且缩放正如所料。如果事情按预期运行,那么清除和篡改CSS就足够了。感谢你们两位推动正确的方向。

相关的codepen.io:http://codepen.io/digitalmouse/pen/LygOWe