有没有一种方法可以使用滤镜或 SVG 中的任何方法将图案和渐变同时应用于一个元素?
我不想创建重复元素(任何形状)来实现此目的。这是一项维护开销。
下图是我预期输出的示例。
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<defs>
<pattern id='tile' patternUnits='userSpaceOnUse' width='75' height='75' viewBox='0 0 50 50'>
<line x1='1' y1='0' x2='51' y2='50' stroke='#19203d' stroke-width='2'/>
<line x1='49' y1='0' x2='-1' y2='50' stroke='#19203d' stroke-width='2'/>
<line x1='50' y1='0' x2='0' y2='50' stroke='#313763' stroke-width='2'/>
<line x1='0' y1='0' x2='50' y2='50' stroke='#313763' stroke-width='2'/>
</pattern>
<radialGradient id='l' cx='50%' cy='200%' fy='0' r='201%'>
<stop offset='0%' style='stop-color:#fff; stop-opacity:.1;' />
<stop offset='10%' style='stop-color:#000; stop-opacity:0.1;' />
<stop offset='30%' style='stop-color:#000; stop-opacity:0.3;' />
<stop offset='90%' style='stop-color:#000; stop-opacity:0.55;' />
<stop offset='100%' style='stop-color:#000; stop-opacity:.6' />
</radialGradient>
</defs>
<rect fill='#39466b' width='100%' height='100%'/>
<rect fill='url(#tile)' width='100%' height='100%'/>
<rect width='100%' height='100%' fill='url(#l)'/></svg>
I DON'T WANT TO DUPLICATE THE ELEMENT FOR FILLING GRADIENT AND PATTERN. THE ABOVE CODE HAS DUPLICATION OF THE ELEMENT.
最佳答案
虽然这仍然会重复元素,但它在 defs 标签中这样做,这意味着您可以将它应用到一个可见元素。
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<defs>
<pattern id='tile' patternUnits='userSpaceOnUse' width='75' height='75' viewBox='0 0 50 50'>
<line x1='1' y1='0' x2='51' y2='50' stroke='#19203d' stroke-width='2'/>
<line x1='49' y1='0' x2='-1' y2='50' stroke='#19203d' stroke-width='2'/>
<line x1='50' y1='0' x2='0' y2='50' stroke='#313763' stroke-width='2'/>
<line x1='0' y1='0' x2='50' y2='50' stroke='#313763' stroke-width='2'/>
</pattern>
<radialGradient id='l' cx='50%' cy='200%' fy='0' r='201%'>
<stop offset='0%' style='stop-color:#fff; stop-opacity:.1;' />
<stop offset='10%' style='stop-color:#000; stop-opacity:0.1;' />
<stop offset='30%' style='stop-color:#000; stop-opacity:0.3;' />
<stop offset='90%' style='stop-color:#000; stop-opacity:0.55;' />
<stop offset='100%' style='stop-color:#000; stop-opacity:.6' />
</radialGradient>
<rect id="bgRect" fill='#39466b' width='100%' height='100%'/>
<rect id="gradientRect" fill='url(#l)' width='100%' height='100%'/>
<rect id='tileRect' fill="url(#tile)" width='100%' height='100%'/>
<filter id="test" color-interpolation-filters="sRGB" y="0">
<feImage xlink:href="#bgRect" result="bg" />
<feImage xlink:href="#tileRect" result="tile" />
<feImage xlink:href="#gradientRect" result="waves" />
<feMerge>
<feMergeNode in="bg" />
<feMergeNode in="tile" />
<feMergeNode in="waves" />
</feMerge>
</filter>
</defs>
<rect filter='url(#test)' width='100%' height='100%'/>
</svg>
演示:http://codepen.io/chrisgannon/pen/acfb7fd4f64a7ceb612167929286b33c
它使用 rects 作为 feImage 的来源,但不幸的是,这在 FireFox 中不受支持,并且 IE 支持是不完整的。
这绝不是一个完美的解决方案,但它可能说明了前进的方向。
关于css - SVG 图案和渐变在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28411381/