Reproducción de degradado SVG equivalente a degradado CSS con degradado lineal

4 minutos de lectura

Reproduccion de degradado SVG equivalente a degradado CSS con degradado
Crashalot

Puede crear gradientes CSS en sitios modernos con algo tan simple como:

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

El objetivo es recrear este gradiente en SVG, entonces, ¿qué porcentajes se usan de forma predeterminada para cada parada de CSS?

Jugamos con diferentes porcentajes (por ejemplo, 50/50, 25/75) con el siguiente código, pero ninguno de estos experimentos produjo el mismo gradiente. El más cercano fue 10/90, pero ¿alguien podría confirmar los porcentajes predeterminados utilizados si los omite?

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

1647545054 897 Reproduccion de degradado SVG equivalente a degradado CSS con degradado
Temani Afif

Cuando tienes 2 colores los porcentajes son 0% y 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>

si revisamos la especificación podemos ver leer:

Los colores de los degradados se especifican mediante paradas de color. Una parada de color es una combinación de un color y una posición. Si bien cada parada de color tiene conceptualmente una posición, la posición se puede omitir en la sintaxis, en cuyo caso el agente de usuario la completa automáticamente; ver más abajo para más detalles.

Y luego

Cuando se omite la posición de una parada de color, se coloca automáticamente a mitad de camino entre las dos paradas circundantes. Si varias paradas seguidas carecen de una posición, se separan por igual.

Y el conjunto completo de reglas:

Se deben aplicar los siguientes pasos para procesar la lista de paradas de color. Después de aplicar estas reglas, todas las paradas de color tendrán una posición y color definidos y estarán en orden ascendente:

  1. Si la primera parada de color no tiene una posición, establezca su posición en 0%. Si la última parada de color no tiene una posición, establezca su posición en 100%.

  2. Si una parada de color tiene una posición menor que la posición especificada de cualquier parada de color anterior a ella en la lista, establezca su posición para que sea igual a la posición especificada más grande de cualquier parada de color anterior.

  3. Si alguna parada de color aún no tiene una posición, entonces, para cada ejecución de paradas de color adyacentes sin posiciones, establezca sus posiciones de modo que estén espaciadas uniformemente entre las paradas de color anterior y siguiente con posiciones.

La primera regla es trivial. La segunda regla significa que lógicamente deberíamos tener un incremento. Así que si tenemos algo como linear-gradient(red 20%, blue 10%, yellow 5%) se transformará en linear-gradient(red 20%, blue 20%, yellow 20%). La tercera regla simplemente colocará el color no posicionado para que se espacie por igual entre dos colores posicionados.


Entonces, si tenemos varios colores sin posición, será algo como esto:

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

Y en caso de que tengamos algunas posiciones definidas tendremos esto:

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

Casos más complejos:

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

Según su publicación, para reproducir el degradado en SVG, defina su degradado lineal en el svg <defs/> elemento.

Vea el fragmento a continuación (el css solo se aplica a los divs html).

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>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad