Reproduzieren des SVG-Verlaufs, der dem CSS-Verlauf mit linearem Verlauf entspricht

Question 1

Sie können CSS-Verläufe auf modernen Websites mit etwas so Einfachem erstellen wie:

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

Das Ziel ist es, diesen Gradienten in SVG nachzubilden, also welche Prozentsätze werden standardmäßig für jeden CSS-Stopp verwendet?

Wir haben mit dem unten stehenden Code an verschiedenen Prozentsätzen herumgebastelt (z. B. 50/50, 25/75), aber keines dieser Experimente erzeugte denselben Gradienten. Das nächste war 10/90, aber könnte jemand die verwendeten Standardprozentsätze bestätigen, wenn Sie sie weglassen?

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

Question 2

Wenn Sie 2 Farben haben, sind die Prozentsätze 0% und 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>

Wenn wir nachsehen die Spezifikation wir können lesen:

Die Farben in Farbverläufen werden mit Farbstopps angegeben. Ein Farbstopp ist eine Kombination aus einer Farbe und einer Position. Während jeder Farbstopp konzeptionell eine Position hat, kann die Position in der Syntax weggelassen werden, in diesem Fall wird sie automatisch vom Benutzeragenten ausgefüllt; siehe unten für Details.

Und dann

Wenn die Position eines Farbstopps weggelassen wird, wird er automatisch in der Mitte zwischen den beiden umgebenden Stopps positioniert. Wenn mehrere Stopps hintereinander keine Position haben, verteilen sie sich gleichmäßig.

Und das komplette Regelwerk:

Die folgenden Schritte müssen angewendet werden, um die Liste der Farbstopps zu bearbeiten. Nach Anwendung dieser Regeln haben alle Farbstopps eine bestimmte Position und Farbe und sind in aufsteigender Reihenfolge angeordnet:

Wenn der erste Farbstopp keine Position hat, setzen Sie seine Position auf 0 %. Wenn der letzte Farbstopp keine Position hat, setzen Sie seine Position auf 100 %.

Wenn ein Farbstopp eine Position hat, die kleiner ist als die angegebene Position eines Farbstopps davor in der Liste, setzen Sie seine Position auf die größte angegebene Position eines Farbstopps davor.

Wenn ein Farbstopp immer noch keine Position hat, dann stellen Sie für jede Folge benachbarter Farbstopps ohne Positionen ihre Positionen so ein, dass sie gleichmäßig zwischen den vorhergehenden und folgenden Farbstopps mit Positionen beabstandet sind.

Die erste Regel ist trivial. Die zweite Regel bedeutet, dass wir logischerweise eine Inkrementierung haben sollten. Also, wenn wir so etwas haben linear-gradient(red 20%, blue 10%, yellow 5%) es wird verwandelt linear-gradient(red 20%, blue 20%, yellow 20%). Die dritte Regel positioniert einfach nicht positionierte Farben so, dass sie zwischen zwei positionierten Farben gleichmäßig beabstandet sind.

Wenn wir also mehrere Farben ohne Position haben, sieht es so aus:

.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>

Und falls wir einige definierte Positionen haben, werden wir diese haben:

.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>

Komplexere Fälle:

.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>

Question 3

Um den Farbverlauf in SVG zu reproduzieren, definieren Sie gemäß Ihrem Beitrag Ihren linearen Farbverlauf im SVG <defs/> Element.

Siehe das Snippet unten (das CSS gilt nur für die HTML-Divs).

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>