对于客户而言,很重要的一点是,我将要同时应用于同一路径的渐变和图案混合在一起了。
该方案如下:
<svg id="svg" viewBox="0 0 1000 1000">
<defs>
<linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
<stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
</linearGradient>
<pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
<circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
</pattern>
</defs>
<g fill="url(#grad)">
<path id="path3" d="M0,0 1000,0 1000,1000 0,1000z" fill="url(#bg)"></path>
</g>
</svg>
我想像在沙箱中一样获得渐变+模式=(填充路径)https://codepen.io/topicstarter/pen/eYNgRyP,但仅将渐变和模式应用于同一路径
一种解决方案是创建一个<pattern>
将渐变和原始图案结合在一起的新产品。
<svg id="svg" viewBox="0 0 1000 1000">
<defs>
<linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
<stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
</linearGradient>
<pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
<circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
</pattern>
<pattern id="both" width="100%" height="100%">
<rect width="100%" height="100%" fill="url(#grad)"/>
<rect width="100%" height="100%" fill="url(#bg)"/>
</pattern>
</defs>
<g>
<path id="path3" d="M0,0 1000,0 1000,1000 0,1000z" fill="url(#both)"></path>
</g>
</svg>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句