CSS实现兼容主流浏览器的响应式SVG图标 - 使用媒体查询

Making SVGs Responsive with CSS 可以看到随着屏幕尺寸的改变，图标的设计和样式都随之发生了合适的改变。

教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2340
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

</head>

<body>
    <div class="wrap">
        <div class="content">
            <p><strong>Resize the screen to see the SVG adapt.</strong>
            </p>
            <h2>Adaptive SVG using media queries</h2>
            <div class="container">
                <img src="https://tympanus.net/Tutorials/ResponsiveSVGs/img/logo_mq.svg" />
            </div>
            <pre class="code-wrapper">
                    <code>
&lt;div class="container"&gt;
  &lt;img src="https://tympanus.net/Tutorials/ResponsiveSVGs/img/logo_mq.svg"/&gt;
&lt;/div&gt;                    
                    </code>
                </pre>
            <pre class="code-wrapper">
                    <code>
.container {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}

/* Required to make image fluid in IE */

img:not(.png) {
  width: 100%;
}               
                    </code>
                </pre>
            <p>Contents of the SVG file:</p>
            <pre class="code-wrapper">
                    <code>
&lt;svg xmlns="https://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186"&gt;
  &lt;style&gt;
    svg * {
      transition: fill .1s ease-out, opacity .1s ease-out;
    }
    @media all and (max-width: 250px) {
      #curved_bg { 
        opacity: 0; 
      }
      #secondary_content, #primary_content { 
        fill: #195463; 
      }
    }
    @media all and (max-width: 200px) {
      #secondary_content {
        opacity: 0;
      }
    }
    @media all and (max-width: 150px) {
      #inner-circle, #middle-circle {
        opacity: 0;
      }
    }
  &lt;/style&gt;
  &lt;path id="curved_bg" fill="#195463" d="..."/&gt;
  &lt;g id="primary_content" fill="#ECECEC"&gt;
      &lt;path id="icon" d="..."/&gt;
      &lt;path id="inner-circle" d="..."/&gt;
      &lt;path id="middle-circle" d="..."/&gt;
  &lt;/g&gt;&lt;!-- /primary content --&gt;
  &lt;g id="secondary_content" fill="#ECECEC"&gt;
      &lt;path id="bottom-text" d="..."/&gt;
      &lt;path id="upper-text" d="..."/&gt;
      &lt;path id="outer-circle" d="..."/&gt;
      &lt;circle id="left-dot" cx="31.1" cy="91.5" r="3"/&gt;
      &lt;circle id="right-dot" cx="163.4" cy="91.5" r="3"/&gt;
  &lt;/g&gt;&lt;!-- end secondary content --&gt;
&lt;/svg&gt;
                    </code>
                </pre>
        </div>
    </div>

</body>

</html>

Making SVGs Responsive with CSS 可以看到随着屏幕尺寸的改变，图标的设计和样式都随之发生了合适的改变。

教程

编辑器支持Emmet

快捷键

Making SVGs Responsive with CSS 可以看到随着屏幕尺寸的改变，图标的设计和样式都随之发生了合适的改变。

教程

分别使用CSS3 transform、SVG animate和GSAP实现的搜索图标动画

使用纯CSS实现的响应式平滑滚动页面布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：