【发布时间】：2017-10-18 05:56:54
【问题描述】：
在我放弃并完全使用 SVG 构建我的解决方案之前，我想我会把它扔给 StackOverflow 人群，看看我是否遗漏了什么。
在当前项目中，我有一个 .png 文件，它代表真实世界水灌溉控制器的面板。 SVG 充当叠加层，包含所有可按下按钮和虚拟 LED 的坐标，在必要时在真实世界设备上闪烁，与正在与“真实”水控制器对话的 Node 应用程序交互，并且 .png 是嵌入式背景图像。 （参见下面的代码）我们以编程方式（通过 Javascript）在进入页面时更改覆盖 SVG 和面板图像，具体取决于之前的用户输入。
一切都很好，我们可以按下 SVG 叠加层上的按钮，现实世界的控制器会做出响应，反之亦然。
问题归结为缩放嵌入的图像。在 Chrome、Firefox 和 Opera 下，我可以将浏览器窗口调整为各种大小，并且 SVG 和嵌入的图像缩放精美。
但是 IE 11+ 拒绝玩球，并且顽固地将嵌入的图像保持在缩小的大小。
我想我已经用谷歌搜索了关于在 IE 中缩放 SVG 的所有内容，并尝试了各种 CSS hack 和 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 中重新构建每个面板需要相当多的时间。但如果有必要，我准备这样做。 :(
【问题讨论】：
-
放弃对 IE 的支持，让他们使用 Edge。问题解决了。
-
尝试在根 svg 元素上为图像指定一个明确的宽度/高度，即 width="100%" height="100%"。
-
对 html、body 和 svg 元素应用 100% 的高度。如果它仍然不起作用，则在现代浏览器中使用 100vh 高度，在 IE 中使用固定高度。
-
@RobertLongson 我在我的问题中提到“......我已经尝试在图像标签中使用 100% 的宽度/高度来（据说）允许 viewBox 控制它的尺寸......”。 .. 或者等等，你的意思也是在 svg 标签上？
-
@thedigitalmouse 啊，伙计，你能在 codepen.io 上制作一个非常简单的复制品吗？明天我将挑战我的 webdev 专家同事来解决它！
标签： javascript css svg