2

我正在尝试在 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">
4

1 回答 1

0

这是现在的样子：

.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;}
<div class="container">
       <object data="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg" type="image/svg+xml" id="logo">
       </object>
</div>

于 2017-09-28T07:16:55.260 回答