SVG图案和渐变一起 [英] SVG Pattern and Gradient together

问题描述

我不想创建一个重复的元素（

）有没有一种方法可以使用过滤器或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％'> 
     < / 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> 
  

我不想重复填充渐变和图案的元素。上面的代码有元素的重复。

解决方案

在defs标签中这样做意味着您可以将其应用于一个可见元素。

body，html {height：100％;宽度：100％;保证金：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 =' '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;'/> <停止偏移= '30％'style ='停止颜色：＃000; stop-opacity：0.3;'/> <停止偏移= '90％'style ='停止颜色：＃000; stop-opacity：0.55;'/> < stop offset ='100％'style ='stop-color：＃000;停止不透明度：.6'/>< / radialGradient>< rect id =bgRectfill ='＃39466b'width ='100％'height ='100％'/>< rect id = gradientRectfill ='url（#l）'width ='100％'height ='100％'/>< rect id ='tileRect'fill =url（#tile）width ='100％'height = '100％'/> < filter id =testcolor-interpolation-filters =sRGBy =0>< feImage xlink：href =＃bgRectresult =bg/>< feImage xlink：href = #tileRectresult =tile/>< feImage xlink：href =＃gradientRectresult =waves/>< feMerge> < feMergeNode in =bg/> < feMergeNode in =tile/> < feMergeNode in =waves/> < / feMerge> < /滤光器> < / defs>< rect filter ='url（#test）'width ='100％'height ='100％'/> < / SVG>

演示： http://codepen.io/chrisgannon/pen/acfb7fd4f64a7ceb612167929286b33c

它使用rects as feImage的源代码，但不幸的是，这在FireFox中不受支持，IE支持也不完整。

这绝不是一个完美的解决方案，但它可能会说明前进的方向。

Is there a way to apply both pattern and gradients to an element together using filter or any method in SVG?

I do not want to create a duplicate element(any shape) to achieve this. Its a maintenance overhead.

The below image is a sample of my expected output.

<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.

解决方案

Whilst this still does duplicate elements, it does so in the defs tag meaning you can apply it one visible element.

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> 

Demo: http://codepen.io/chrisgannon/pen/acfb7fd4f64a7ceb612167929286b33c

It uses rects as the source for feImage but unfortunately this is not supported in FireFox and IE support is patchy.

It's by no means a perfect solution but it might illustrate a way forward.

这篇关于SVG图案和渐变一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！