3

フィルターまたは SVG のメソッドを使用して、パターンとグラデーションの両方を要素に適用する方法はありますか?

これを実現するために、重複した要素(任意の形状)を作成したくありません。メンテナンスのオーバーヘッドです。

以下の画像は、予想される出力のサンプルです。

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>

グラデーションとパターンを塗りつぶすための要素を複製したくありません。上記のコードには要素が重複しています。

4

1 に答える 1

6

これでも要素が複製されますが、defs タグ内で複製されるため、1 つの可視要素に適用できます。

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

feImage のソースとして rect を使用しますが、残念ながらこれは FireFox ではサポートされておらず、IE のサポートは不完全です。

これは決して完璧な解決策ではありませんが、前進する方法を示している可能性があります。

于 2016-04-25T09:06:31.173 に答える