Есть ли способ сделать визуальный эффект цветов линейного градиента в SVG и CSS одинаковым?

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

#rectangle {
  width: 100px;
  height: 300px;
  background: linear-gradient( 180deg, rgba(235, 116, 116, 0.1) 0%, rgba(42, 255, 44, 1) 100%);
}

.stop1 {
  stop-color: rgba(235, 116, 116);
  stop-opacity: 0.1;
}

.stop2 {
  stop-color: rgba(42, 255, 44, 1);
}


/* added by editor for comparrison reasons */

.container {
  display: flex;
  gap: 0.25em;
}

<div class = "container">
  <div class = "col">
    <p>CSS</p>
    <div id='rectangle'></div>
  </div>

  <div class = "col">
    <p>SVG</p>
    <svg width = "800" height = "800" version = "1.1" xmlns = "http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id = "Gradient1" x1 = "0" x2 = "0" y1 = "0" y2 = "1" spreadMethod = "repeat">
          <stop class = "stop1" offset = "0%" />
          <stop class = "stop2" offset = "100%" />
        </linearGradient>
      </defs>
      <rect x = "0" y = "0" rx = "0" ry = "0" width = "100" height = "300" fill = "url(#Gradient1)" />
    </svg>
  </div>
</div>

Избавьтесь от непрозрачности и всё будет вести себя нормально, это интересно

— 11.07.2024 10:02

css svg linear-gradients

11.07.2024 09:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, это кажется правильным. Firefox поддерживает цветовую интерполяцию градиентов, и я думаю, что Chrome тоже скоро сделает то же самое.

#rectangle {
  width: 100px;
  height: 300px;
  background: linear-gradient( 180deg, rgba(235, 116, 116, 0.1) 0%, rgba(42, 255, 44, 1) 100%);
}

.stop1 {
  stop-color: rgba(235, 116, 116);
  stop-opacity: 0.1;
}

.stop2 {
  stop-color: rgba(42, 255, 44, 1);
}


/* added by editor for comparrison reasons */

.container {
  display: flex;
  gap: 0.25em;
}

<div class = "container">
  <div class = "col">
    <p>CSS</p>
    <div id='rectangle'></div>
  </div>

  <div class = "col">
    <p>SVG</p>
    <svg width = "800" height = "800" version = "1.1" xmlns = "http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id = "Gradient1" color-interpolation = "linearRGB" x1 = "0" x2 = "0" y1 = "0" y2 = "1" spreadMethod = "repeat">
          <stop class = "stop1" offset = "0%" />
          <stop class = "stop2" offset = "100%" />
        </linearGradient>
      </defs>
      <rect x = "0" y = "0" rx = "0" ry = "0" width = "100" height = "300" fill = "url(#Gradient1)" />
    </svg>
  </div>
</div>

Спасибо за ответ! Я обнаружил, что визуальный эффект ответа на моей стороне все еще разный (Edge/Firefox/Chrome). T_T Я поискал и обнаружил, что цветовая интерполяция по умолчанию для CSS — sRGB, а атрибут цветовой интерполяции в SVG можно установить на sRGB. И я попробовал, к сожалению, визуальный эффект между ними все равно разный. Т_Т

— 11.07.2024 10:31

Хотя в Chrome есть явная разница, указывающая на то, что он еще не поддерживает Linearrgb, для меня в Firefox это выглядит так же.

— 11.07.2024 11:15

Еще раз спасибо! Я скачал последнюю версию Firefox и увидел, что визуальные эффекты у них одинаковые.

— 11.07.2024 15:06

Но мне нужно поддерживать тот же визуальный эффект в Edge (._.). Судя по нынешнему обсуждению, это может оказаться неосуществимым.

— 11.07.2024 15:15

Другие браузеры, такие как Chrome и Safari, похоже, работают над добавлением поддержки. Последнее, что я видел, это то, что ожидается, что это будет в Chrome 127.

— 11.07.2024 15:22

11.07.2024 10:13