Question

我正在尝试在HTML中使用SVG，这是我不太熟悉的。它作为对象嵌入到html中。

SVG可通过CSS扩展。当窗口处于完整大小（即足够大以至于SVG处于通过CSS的最大允许宽度）时，它在Firefox，Chrome和Safari中看起来很正常。当浏览器窗口较小时，实际的SVG图像和我假设的是它的容器在Firefox和Chrome中都适当缩小。但是，在Safari（桌面和iOS）中，SVG图像本身缩小，但其“容器”保持其原始的最大高度。换句话说，在Safari的窄宽度中，实际图像的顶部和底部有太多空间。

我目前通过CSS分配宽度，最大宽度和最大高度值。应用“auto”以外的高度值会在所有浏览器中出现问题。我已经从SVG中删除了宽度和高度值，以使其适应浏览器大小。

我想知道如何让Safari以与Firefox和Chrome相同的方式缩放SVG图像。感谢您提供的任何输入！

请查看此示例：http://jay-bee-why.com/demos/svg-scaling.html

要查看实际网站：http://twowordsfor.com（修改：现已弃用）

以下是我在HTML中嵌入SVG的方法：

<div class="container">
       <object data="image.svg" type="image/svg+xml" id="logo">
             <img src="image.png">
       </object>
</div>

这是CSS：

.container {width:99.8%;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

这是SVG文件的顶部：

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">

Answer 1

以下是现在的看法：

＆＃13;

.container {width:99.8%;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}

#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}

＆＃13;

<div class="container">
       <object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo">
       </object>
</div>

＆＃13;

浏览器之间HTML中的SVG缩放不一致

1 个答案: