当前位置主页 > 资料库 > 前端教程 > 如何在网页中制作响应式的SVG图像

如何在网页中制作响应式的SVG图像

2015-01-07

在介绍了SVG的基础《HTML5 SVG简介》和《如何在网页中使用SVG》之后,今天我们来讨论SVG的响应式效果问题。

矢量图默认情况下是不会缩放自己的大小来适应屏幕的大小的,SVG图像能够通过多种方式来实现响应式效果,本教程教和大家分享这些实现方法。

制作一个响应式的SVG图像

作为一个图片,你可以使SVG图像通过width和height来制作任何大小的图片。并可以使图片随内容大小的变化而变化。

<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">                                
                            
一张猴子脸的SCG矢量图

这种做法在许多情况下是有所不足的,特别是你想使用<object>标签来嵌入一个SVG或直接在页面上使用SVG标签的时候。在这些情况下,简单的修改img的 width 和 height 属性是不可行的。

制作响应式的内联SVG

在HTML的<body>标签之后添加SVG,如下所示:

<body>
    <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"
    width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
        <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
    </svg>
</body>                                
                            

可以清理掉<svg>标签中的一些没用的属性,使代码更易于阅读:

<svg version="1.1" viewBox="0 0 500 500">
    <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="0.6" />
</svg>                                
                            

通过移除<svg>标签中的属性,这时SVG图像变成响应式的,但这会增加一些图片空间成本。注意,viewBox属性要保留。我们需要几个步骤来使SVG图像和页面内容整合起来。

首先,使用一个div来包裹SVG,并为<svg>标签添加一个preserveAspectRatio属性。

<div class="svg-container">
    <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
        <circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
    </svg>
</div>                                
                            

然后我们需要将SVG移动到容器的顶部。为了达到这种效果,这里使用了一点小技巧,看下面的代码:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}                                
                            

注意宽度的设置,这里设置为100%,以适应容器的100%宽度。padding-bottom的百分比是宽和高的比例。viewBox中的宽高比是1:1,所以这里padding-bottom设置为100%。如果宽高比是1:2,那么padding-bottom的值应该设置为50%。

最后,还要单位SVG在容器中的位置:

.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}                                    
                                

这种方法可以使SVG图像随页面的缩放而缩放,以上代码在使用<object>来嵌入对象时同样可用。

<div class="svg-container">
    <object type="image/svg+xml" data="samurai.svg" width="100%" height="100%" class="svg-content">
    </object>
</div>                                    
                                

在后面的文章中,我们将详细介绍viewBox属性,还有为不支持SVG的浏览器提供回退代码的知识。

Previous:
上一篇:如何在网页中使用SVG
Next:
下一篇:如何制作HTML5 SVG描边文字
返回顶部