clip-path内联SVG实现小图标的显示实例页面

展示

代码

• HTML：

  <h4 class="fill">transform缩放</h4> 
  <svg width="0" height="0" style="position:absolute;">
    <clipPath id="clipDefault">
      <ellipse transform="scale(0.4, 0.4)" cx="25" cy="25" rx="20" ry="10"></ellipse>
      <rect transform="scale(0.4, 0.4)" x="15" y="5" width="20" height="40" rx="5" ry="5"></rect>
    </clipPath>
  </svg>
  
  <p>图标效果：<i class="icon-example-1"></i></p>
  
  <h4 class="fill">clipPathUnits属性</h4>
  <svg width="0" height="0" style="position:absolute;">
    <clipPath id="clipBound" clipPathUnits="objectBoundingBox">
      <ellipse cx=".5" cy=".5" rx=".4" ry=".2"></ellipse>
      <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1"></rect>
    </clipPath>
  </svg>   
  <p>图标效果：<i class="icon-example-2"></i></p>
  
  <h4 class="fill">使用SVG元素（兼容到IE9）</h4>
  图标效果：<svg width="20" height="20">
    <rect fill="deepskyblue" class="icon-example-1" width="20" height="20"></rect>
  </svg>

• CSS：

  .icon-example-1,
  .icon-example-2 {
      display: inline-block;
      width: 20px; height: 20px;
      background-color: deepskyblue;
      vertical-align: middle;
  }
  .icon-example-1 {
      -webkit-clip-path: url(#clipDefault);
      clip-path: url(#clipDefault);
  }
  .icon-example-2 {
      -webkit-clip-path: url(#clipBound);
      clip-path: url(#clipBound);
  }