Могу ли я определить линейный градиент в SVG с нормальной / колокольчной смесью?
-
27-09-2019 - |
Вопрос
Рассмотрим следующий фрагмент 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, Право с Bell Blend:
Или это остается в SVG Renderer, чтобы решить, как цвета должны быть смешаны вместе?
Решение
Вы можете применить gradientTransform
к линейному градиенту. Отказ Я не уверен, как Доступные преобразования карта до вашего необходимого эффекта.
Если это не работает, вы можете использовать градиент в качестве ввода к фильтр И, возможно, в конечном итоге с аналогичным эффектом. Вот Статья, которая охватывает комбинированные фильтры.
Другие советы
градиенттрансформация не может сделать этот вид преобразования. Вам понадобится фильтр, чтобы применить преобразование в форме колокола в красный / белый градиент.
.
Оригинал слева, преобразован справа. Кривая не очень мелкозернистая (только 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>