SVG实现倒影效果演示实例页面

回到相关文章 »

代码：

HTML代码：
<svg width="150" height="352">
  <defs>
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"   stop-color="#fff" stop-opacity="0"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="1"/>
    </linearGradient>
    <mask id="mask">
      <rect x="0" y="176" width="150" height="177" fill="url(#gradient)"  />
    </mask>
    <pattern id="reflect" patternUnits="userSpaceOnUse" width="150" height="176">
      <image xlink:href="chaowei.jpg" width="150" height="176" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="150" height="176" fill="url(#reflect)"></rect>
  <rect x="0" y="176" width="150" height="176" fill="url(#reflect)" mask="url(#mask)" transform="translate(75 264) scale(1, -1) translate(-75 -264)"></rect>
</svg>

效果：