我正在构建一个使用SVG定位和显示某些元素的Web应用程序。目的是允许在外部链接的SVG图像上进行缩放和平移/扫描。在Opera，Firefox和Chrome（所有最新的GA）上，一切正常。在IE和Edge（也是最新的GA）上，当我进行缩放时，图像会超出父SVG的范围。
我尝试了各种选项，包括将CSS溢出显式设置为隐藏，并调整外部SVG和我的嵌入式SVG中的viewBox设置。
我已经隔离了所有相关的HTML，CSS和SVG数据，并包含在此处托管的示例中：https://svgexample.azurewebsites.net/
在代码中链接了外部SVG。以下详细说明了结构：
橙色：主体背景颜色。 绿色：我要显示的内容的容器。 蓝色：用于存放图像的容器（应该位于缩放后的图像所在的位置） 红色：代表外部SVG的单个矩形。
外部SVG并不是我的实际图像，为简化起见，我添加了一个占位符。效果与矩形和真实图像相同。
正确的外观在Opera，Chrome和Firefox的最新GA版本中可见。在IE和Edge中外观不正确。
编辑
我已将内联元素添加到CodePen https://codepen.io/cahunter/pen/EqYrpP。当然，外部SVG（包含红色的<rect>元素）仍然是外部的，以保持与我的要求的一致性。