带有对象标签的 SVG 在 Safari 中无法缩放答案

【问题标题】：SVG With Object Tag Doesn't Scale In Safari带有对象标签的 SVG 在 Safari 中无法缩放
【发布时间】：2014-10-06 08:29:26
【问题描述】：

我的主页上有两个 svg 图像，它们位于对象标签内。当浏览器在 Chrome 和 Firefox 中调整大小时，它们可以很好地扩展，但在 Safari 中它们不会扩展，它们只是下车。我曾尝试调整 svg 图像本身的宽度和高度，但这只会导致 svg 在平板电脑尺寸的屏幕上变得太大。我已经搜索并搜索了一个解决方案，但还没有找到一个。虽然我希望有一种方法可以只针对 Safari，因为它在 Chrome 和 Firefox 中都运行良好，但如果有人能提供一些帮助，我将不胜感激。

我的其中一张 svg 图片的 html 代码：

    <a href="about.html">
            <div class="svg-container">
                <object class="img-responsive" type="image/svg+xml" 
                data="images/portrait-md.svg" >
               <img src="images/portrait-md.png" />
                </object>
           </div>
        </a>

我用于div容器类的css：

    .svg-container {
        display: inline-block;
        overflow: hidden;
        position: relative;
        vertical-align: middle;
    }

    .svg-container object {
        pointer-events: none;
    }

    .img-responsive {
        display: block;
        height: auto;
        width: 100%;
        position: relative;
     }

我的网站：http://rachelhkay.com

【问题讨论】：

更新我的问题。即使 svg 容器和对象标签由于某种奇怪的原因正在缩放，svg 本身也不会在 Safari 中缩放。即使我在 svg 本身上设置了 100% 的宽度和高度，svg 也不会缩放。我试图添加到 .svg-container 对象 {width: 100%;显示：块；高度：自动； position: relative;} 并且还从 .svg-container 类中删除了 overflow: hidden 和 position: relative。问题是这样做时 svg 不会在高度上缩放，但会在宽度上缩放。为什么 svg 本身不能在 Safari 中缩放，而容器却可以？

标签： html css svg

【解决方案1】：

您可以在 css 中将 svg 的宽度和高度设置为 100%。

svg {
height: 100%;
width: 100%;
}

了解更多信息。请访问下面的链接，看看是否有帮助。

http://benfrain.com/attempting-to-fix-responsive-svgs-in-desktop-safari/

【讨论】：

我确实研究了该选项，但不太确定如何实现它。 img-responsive 类的最大宽度为 100%，以确保图像缩放。我在 object 标签周围的 .svg-container 有助于让 Chrome 停止切断图像，就像 Safari 现在似乎正在做的那样。使用 svg 对我来说仍然是一个学习过程，但质量比 png 好得多。