Можно ли определить линейный градиент в SVG с помощью обычной / колоколообразной смеси? - PullRequest
Новая
       53

Можно ли определить линейный градиент в SVG с помощью обычной / колоколообразной смеси?

1 голос
/ 11 августа 2010

Рассмотрим следующий фрагмент svg: 

<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>

Есть ли способ указать, что цвета должны быть смешаны вместе, используя кривую в форме колокола?(Аналогично методу GDI + LinearGradientBrush :: SetBlendBellShape )

Два приведенных ниже прямоугольника показывают разницу - слева без сочетания колокольчиков, справа с Bell Blend:

alt text

Или это отрисовщик SVG, чтобы решить, как цвета должны быть смешаны вместе?

Ответы [ 2 ]

3 голосов
/ 09 января 2014

GradientTransform не может сделать такое преобразование. Вам понадобится фильтр, чтобы применить колоколообразное преобразование к градиенту красного / белого.

enter image description here.

Оригинал слева, трансформированный справа. Кривая не очень мелкозернистая (всего 15 значений), поэтому вы, вероятно, захотите использовать больше терминов для большого градиента. 

  <svg width="500px" height="500px" viewbox="0 0 800 800">
  <defs>
    <filter id="bellTransform" color-interpolation-filters="sRGB">
    <feComponentTransfer>
       <feFuncG type="table" tableValues=
               "0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/>
       <feFuncB type="table" tableValues=
               "0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/>
      </feComponentTransfer>
      </filter>
  </defs>

  <linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="#ffffff"/>
    <stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect filter="url(#bellTransform)" x="410" y="0" width="400" height="400" fill="url(#redgradient)"/>

<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>

</svg>
1 голос
/ 12 августа 2010

Вы можете применить gradientTransform к линейному градиенту . Я не уверен, как преобразует в соответствие с требуемым эффектом.

Если это не сработает, вы можете использовать градиент в качестве входных данных для фильтра и, возможно, в конечном итоге получить аналогичный эффект. Вот статья, которая охватывает объединение фильтров .

...