在SVG中组合clipPath,pattern和linearGradient [英] Combine clipPath, pattern, and linearGradient in SVG
本文介绍了在SVG中组合clipPath,pattern和linearGradient的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个背景,该背景由从绿色到黄色(从左到右)渐变的多个点组成.因此,他们的想法是创建路径,用渐变填充并使用模式剪切路径:
I am trying to create a background that consists of multiple dots gradienting from say green to yellow from left to right. So they idea was to create a path, fill it with a gradient and clip path with a pattern:
https://codepen.io/Deka87/pen/pLPqJE?editors=1000
<svg width='100' height='100' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="img-dotted-gradient">
<stop offset="0%" stop-color="green"></stop>
<stop offset="100%" stop-color="yellow"></stop>
</linearGradient>
<pattern id="img-dotted-dots" x="0" y="0" width=".1" height=".1">
<circle cx="2" cy="2" r="2" fill="green"></circle>
</pattern>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" clip-path="url(#img-dotted-dots)"></path>
</svg>
渐变正常,剪切路径正常(独立).但是他们并没有在一起.任何帮助将不胜感激!
The gradient works OK, the clip path works OK (standalone). However they don't come together. Any help would be appreciated!
推荐答案
仅< clipPath>
问题中元素的形状.颜色和填充将被忽略,因此您不能那样做.
Only the shape of the elements in a <clipPath>
matter. The colour and fill are ignored, so you can't do it that way.
但是您可以改用< mask>
.
<svg width='100' height='100' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="img-dotted-gradient">
<stop offset="0%" stop-color="green"></stop>
<stop offset="100%" stop-color="yellow"></stop>
</linearGradient>
<pattern id="img-dotted-dots" x="0" y="0" width=".1" height=".1">
<circle cx="2" cy="2" r="2" fill="white"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"/>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" mask="url(#img-dotted-mask)"></path>
</svg>
这篇关于在SVG中组合clipPath,pattern和linearGradient的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文