Заливка линейным градиентом SVG с градиентом непрозрачности

Я читал спецификацию SVG и пытался выяснить, можно ли получить комбинированный градиент заливки и непрозрачности, но с заливкой и непрозрачностью под разными углами?

См. Следующий пример:

<linearGradient id="MyFill" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-color="#FF0000" />
    <stop offset="100%" stop-color="#0000FF" />
</linearGradient>

<linearGradient id="MyTransparency" gradientUnits="objectBoundingBox">
    <stop offset="0%" stop-opacity="0%" x1="50%" x2="50%" />
    <stop offset="100%" stop-opacity="100%" x1="50%" x2="50%" />
</linearGradient>

Непрозрачность определяется под другим углом к ​​заливке, как я могу объединить их в одну заливку? Или, если я не могу, как я могу применить это к отдельному объекту?


svg opacity fill
person Mark Ingram    schedule 11.10.2011    source источник
comment
x1 и x2 на стоп-элементах недействительны в соответствии со спецификацией svg, это не повлияет.   -  person Erik Dahlström    schedule 11.10.2011

Ответы (1)


arrow_upward
3
arrow_downward

Он не поддерживается в SVG 1.1, но вы, вероятно, можете найти обходной путь, например, используя разметку фильтра для объединения градиентов (пример), или <use>, чтобы таким образом применить разные градиенты к одному и тому же элементу, или написать сценарий для самостоятельной интерполяции цвета.

person Erik Dahlström    schedule 11.10.2011