SVG实现文本的纹理叠加效果实例页面

回到相关文章 »

效果:

SVG纹理叠加

代码:

HTML代码:
<svg width="360" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blend">
     <feImage xlink:href="./pattern01.jpg" result="patternSource" x="0" y="0" width="360" height="120" />
     <!-- IE浏览器不支持overly混合模式,可使用multiply替代 -->              
     <feBlend mode="overlay" in="SourceGraphic" in2="patternSource" />
    </filter>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"   stop-color="green" />
        <stop offset="100%" stop-color="red" />
    </linearGradient>
    <pattern id="pattern" width="360" height="120" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" filter="url(#blend)"></rect>
    </pattern>
  </defs>
  <text x="0" y="60" font-family="Microsoft Yahei" font-size="60" font-weight="900" fill="url(#pattern)">
    SVG纹理叠加
  </text>
</svg>