Воспроизведение SVG-градиента, эквивалентного CSS-градиенту с линейным градиентом

Question

Вы можете создавать CSS-градиенты на современных сайтах с помощью чего-то простого:

background-image: linear-gradient(red, orange);

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

Мы возились с разными процентами (например, 50/50, 25/75) с кодом, приведенным ниже, но ни один из этих экспериментов не дал тот же градиент. Ближайшим было 10/90, но может ли кто-нибудь подтвердить процент по умолчанию, если вы их опустите?

div {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      red 50%, 
      orange 50%
    );
}

Answer 1

Для вашего поста, чтобы воспроизвести градиент в SVG, определите свой линейный градиент в элементе svg <defs/>.

См. Фрагмент ниже (css относится только к HTML-элементам div).

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: red;
  background-image: linear-gradient(red, orange);
}

<div></div>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
  <defs> 
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%" > 
      <stop offset="0%" style="stop-color:red;stop-opacity:1" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </linearGradient> 
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)"/>
</svg>

Answer 2

Если у вас есть 2 цвета, проценты составляют 0% и 100%

.box {
  height:200px;
  background:
    linear-gradient(to right,red,blue) top/100% 40%,
    linear-gradient(to right,red 0%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

Если мы проверим спецификацию , то увидим следующее:

Цвета в градиентах задаются с помощью цветовых ограничителей. Остановка цвета - это сочетание цвета и позиции. Хотя каждая остановка цвета концептуально имеет позицию, позиция может быть опущена в синтаксисе, и в этом случае она автоматически заполняется пользовательским агентом; подробности см. ниже.

А потом

Когда позиция цветовой остановки не указана, она автоматически устанавливается на полпути между двумя окружающими остановками. Если нескольким стопам подряд не хватает позиции, они распределяются одинаково.

И полный набор правил:

Для обработки списка цветовых остановок необходимо выполнить следующие шаги. После применения этих правил все цветовые остановки будут иметь определенную позицию и цвет, и они будут в порядке возрастания:

1. Если у первой цветовой остановки нет позиции, установите ее положение на 0%. Если последний цветовой стоп не имеет позиции, установите его положение на 100%.

2. Если у цветовой остановки есть позиция, которая меньше указанной позиции любой цветовой остановки перед ним в списке, установите его положение равным наибольшей указанной позиции любой цветовой остановки перед ним.

3. Если у какой-либо цветовой остановки по-прежнему нет позиции, то для каждого запуска смежных цветовых остановок без позиций установите их положения так, чтобы они были равномерно распределены между предыдущей и следующей цветовой остановками с позициями.

Первое правило тривиально. Второе правило означает, что мы должны логически иметь приращение. Так что если у нас будет что-то вроде linear-gradient(red 20%, blue 10%, yellow 5%), оно будет преобразовано в linear-gradient(red 20%, blue 20%, yellow 20%). Третье правило просто позиционирует непозиционированный цвет, чтобы он был равномерно распределен между двумя позиционированными цветами.

---

Так что, если у нас есть несколько цветов без позиции, это будет примерно так:

.box {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,blue) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 50%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}
.box1 {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,purple,blue) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 33.333%,purple 66.66%,blue 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

<div class="box1">

</div>

И в случае, если у нас есть определенные позиции, у нас будет это:

.box {
  height:100px;
  background:
    linear-gradient(to right,red,yellow,blue 80%) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 40%,blue 80%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}
.box1 {
  height:100px;
  background:
    linear-gradient(to right,red,yellow 20%,purple,blue 80%) top/100% 40%,
    linear-gradient(to right,red 0%,yellow 20%,purple 50%,blue 80%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>

<div class="box1">

</div>

Более сложные случаи:

.box {
  height:100px;
  background:
    linear-gradient(to right,red 20%,yellow 5%,red,orange,blue 80%,pink) top/100% 40%,
    linear-gradient(to right,red 20%,yellow 20%,red 40%,orange 60%,blue 80%,pink 100%) bottom/100% 40%;
  background-repeat:no-repeat;
  border:5px solid;
}

<div class="box">

</div>