SVG路径clip-path实现小图标效果实例页面

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);
}

HTML代码：

<h4>默认(需要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>objectBoundingBox(数值均小于1)</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>