美文网首页
《响应式Web设计:HTML5和CSS3实战(第2版)》07章

《响应式Web设计:HTML5和CSS3实战(第2版)》07章

作者: Revontulet | 来源:发表于2017-11-07 15:52 被阅读0次

响应式Web设计:HTML5和CSS3实战(第2版)

第七章 SVG与响应式Web设计

  • SVG可伸缩矢量图是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术
  • SVG的大小比位图要小很多

7.1 SVG特点

  • SVG是XML中用于描述二维图形的语言
  • SVG仅仅保存矢量点

7.2 SVG的关键点(实现方法)

  • 根元素:宽、高和视口
    • viewbox定义了SVG中所有形状都需要遵循的坐标系
    • viewbox属性可以让你伸缩图片

7.3 SVG制作工具

  • Adobe Illustrator
  • Sketch
  • InkScape(免费开源)

7.4 Web中插入SVG

  • 使用img标签
  • 使用object标签
    • 建议不要省略data和type属性
  • 作为背景图
    • 对于老旧机型可以有后备策略
  .item{
      background: url('aa.png') no-repeat;
      background: url('aa.svg') left top / auto no-repeat;
  }
  • Modernizer对不支持svg的浏览器会有“no-svg”的类
  • data URI的介绍
    • 将url的图片地址换为一串“统一资源标识符”
    • data URI有很多编码方式,建议不要使用base64格式,因为它对SVG的压缩不如text好
    • 推荐工具:Iconizr
  • 如果想为它加上动画效果,或者使用js来插入数据,最好还是把SVG内联到HTML上

7.5 内联SVG

  • 由于SVG是XML文档,所以可以直接插入到HTML中

    • 如果删掉宽高,SVG就会自动缩放,充满容器
  • 利用符号复用图形对象

    • defs元素中的symbol元素是定义一个形状以供后期使用
    • 后文中可以用use标签来将已经定义好的图形对象使用起来,通过xlink属性来选择引入的对象
  • 根据上下文改变svg颜色

  .svg{
      fill: #f90;
  }
  • 复用外部图形对象资源
    • <use xlink:href="defs.svg#icon-home"></use>
    • 意为链接到外部defs.svg文件,选用其中id为icon-home的图形
    • 好处为
      • 可以为浏览器缓存
      • 防止代码中有一堆svg符号
    • IE9-11不支持,可以用"svg for everybody"的ployfill脚本解决限制
  • 浏览器兼容性
    • IE9-11中无法引用外部svg资源
    • IE中无论采用什么方式插入svg,都会把外部样式表的样式应用到svg上
      • 其他浏览器都是只有在object标签引入svg时才会应用那些样式
    • IE不允许css为svg添加动画,只能通过JS为svg添加动画

7.6 为svg添加样式

  • 外部样式表
    • 在svg标签前加<?xml-stylesheet href="styles.css" type="text/css"?>
  <?xml-stylesheet href="styles.css" type="text/css"?> 
  <svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  • 内部样式表
  <defs>
      <style type="text/css"> 
          <![CDATA[ 
              #star_Path { 
                  stroke: red; 
              } 
          ]]> 
      </style> 
  </defs> 
 + 上例代码中的stroke属性。它并不是CSS属性,而是SVG属性。
 + 在样式中可以使用不少的SVG属性(无论是内联样式抑或外部样式表)。例如
     * 对于SVG,你不用指background-color,而是需要定义fill。
     * 你无需定义border,而是定义stroke-width。
  • 用CSS为SVG添加动画
    • 注意SVG上的transform-origin被设置为50% 50%。这是因为与CSS不同,SVG默认的transform-origin不是50% 50%(元素的正中间),而是0 0(元素的左上角)。如果不指定该属性,星形会围绕左上角进行旋转。
  <div class="wrapper">
      <svg width="198" height="188" viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Star 1</title>
          <defs>
              <style type="text/css">
              <![CDATA[ @keyframes 
                  spin {
                      0% {
                          transform: rotate(0deg);
                      }
                      100% {
                          transform: rotate(360deg);
                      }
                  }
                  .star_Wrapper {
                      animation: spin 2s 1s;
                      transform-origin: 50% 50%;
                  }
                  .wrapper {
                      padding: 2rem;
                      margin: 2rem;
                  }
              ]]>
              </style>
              <g id="shape">
                  <path fill="#14805e" d="M50 50h50v50H50z" />
                  <circle fill="#ebebeb" cx="50" cy="50" r="50" />
              </g>
          </defs>
          <g class="star_Wrapper" fill="none" fill-rule="evenodd">
              <path id="star_Path" stroke="#333" stroke-width="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.894 73.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.226 65.453z" />
          </g>
      </svg>
  </div>
  • 使用JavaScript添加SVG动画
    • 当一个SVG是通过内联或者object标签的方式插入到页面时,我们可以通过JavaScript直接或者间接地控制它。
    • 间接的意思是指我可以通过JavaScript来改变它或者它的父类的class,从而触发动画效果。
  svg { 
  /* 没有动画效果*/ 
  } 
  .added-with-js svg { 
  /* 动画*/ 
  }

7.9 优化SVG

相关文章

网友评论

      本文标题:《响应式Web设计:HTML5和CSS3实战(第2版)》07章

      本文链接:https://www.haomeiwen.com/subject/hisjmxtx.html