Мне нужно разместить прозрачный градиент на изображении svg, чтобы изображение стало прозрачным из центра в крайнюю правую сторону (вертикальный градиент).
.
Родительский элемент имеет background-color: red;
Суть в том, что мне нужен градиент, чтобы реагировать на изменения размера родительского элемента (например, при изменении размера браузера) при сохранении его пропорции по отношению к родительскому элементу и продолжение затухания базового изображения.
Базовое изображение должно вести себя как background-size: cover; в CSS.Я обнаружил, что preserveAspectRatio="xMidYMid slice" прекрасно выполняет это, но я не хочу, чтобы градиент вел себя так же.Он всегда должен занимать один и тот же процент от размера родительского элемента, даже если размер родительского элемента изменяется.Как это может быть, если preserveAspectratio="none", width="100%", height="100%" на градиенте.Я попробовал это, и это не сработало.
То, как у меня сейчас получается, градиент становится все более и более скрытым, когда вы изменяете размер окна браузера по горизонтали.Проверьте это здесь: CodePen .
Я попытался разделить градиент на отдельный svg, думая, что это создаст новый видовой экран, позволяющий мне вставить preserveAspectratio="none", который будет растягивать градиент, чтобы соответствоватьразмер родительского элемента, но это тоже не сработало.
Вот еще один способ думать об этом: CodePen .Я хочу совместить фоновое поведение верхнего примера с градиентным поведением нижнего примера.
Есть идеи?