Question

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

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

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

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

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

我认为我已经搜索了关于在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中重新构建每个面板需要相当多的时间。但如果有必要，我准备这样做。：（

Answer 1

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

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

在IE 11 +

1 个答案: