SVG Pattern and Gradient вместе

Есть ли способ применить оба шаблона и градиенты к элементу вместе с использованием фильтра или любого метода в SVG?SVG Pattern and Gradient вместе

Я не хочу создавать дублирующий элемент (любую форму) для достижения этого. Его накладные расходы на обслуживание.

Данное изображение является образцом моего ожидаемого результата.

A way to achieve pattern and gradients to an element together in 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>

Я НЕ ХОЧУ продублировать ЭЛЕМЕНТ ДЛЯ ЗАПОЛНЕНИЯ градиентные и ОБРАЗЕЦ. В ВЫШЕУКАЛЬНОМ КОДЕ ИМЕЕТ ДЕЙСТВИЕ ЭЛЕМЕНТА.

источник

2015-02-09 shibualexis

и что у вас еще есть. –

Создайте шаблон, придерживайтесь формы с градиентом в нем. Где именно вы застряли. Добавление некоторой разметки, чтобы показать, что вы сделали до сих пор, поможет нам вам помочь. –

@RobertLongson, я добавил код выше, чтобы объяснить, что я ищу. На самом деле я разрабатываю структуру диаграммы, я хочу применить шаблон и градиенты к гистограмме без дублирования элемента rect. Там в любом случае? – shibualexis

В то время как это все еще делает дублирующие элементы, оно делает это в теге 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

Он использует прямоугольники в качестве источника для feImage, но, к сожалению, это не поддерживается в FireFox и поддержка IE неоднородна.

Это не идеальное решение, но оно может показать путь вперед.

источник

2016-04-25 09:06:31 chrisgannon

SVG Pattern and Gradient вместе

ответ

Смежные вопросы