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

Question

Я читал спецификацию 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>

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

Answer 1

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