编辑下面的代码:【加编码】
<html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <lineargradient id="MyGrad" gradientunits="userSpaceOnUse" x1="100" y1="0" x2="500" y2="0"> <stop offset="0" style="stop-color:#ff00ff"></stop> <stop offset=".33" style="stop-color:#88ff88"></stop> <stop offset=".67" style="stop-color:#2020ff"></stop> <stop offset="1" style="stop-color:#d00000"></stop> </lineargradient> <filter id="Matrix"> <fecolormatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix> </filter> <filter id="Saturate"> <fecolormatrix type="saturate" values="0.4"></fecolormatrix> </filter> <filter id="HueRotate"> <fecolormatrix type="hueRotate" values="90"></fecolormatrix> </filter> <filter id="Luminance"> <fecolormatrix type="luminanceToAlpha" result="a"></fecolormatrix> <fecomposite in="SourceGraphic" in2="a" operator="in"></fecomposite> </filter> </defs> <g style="font-size:50;fill:url(#MyGrad)"> <text x="50" y="60">Unfiltered</text> <text x="50" y="120" filter="url(#Matrix)">Matrix</text> <text x="50" y="180" filter="url(#Saturate)">Saturate</text> <text x="50" y="240" filter="url(#HueRotate)">HueRotate</text> <text x="50" y="300" filter="url(#Luminance)">Luminance</text> </g> </svg> </body> </html>
结果: 【此窗口】 帮助?
Try it Yourself - © 自强学堂