La función url()

Mediante la función url() podemos definir un trayecto SVG desde un fichero .svg externo. Antes de leer este artículo, es recomendable echar un vistazo a la función path(), ya que te ayudará a entender algunos conceptos básicos de lo que veremos a continuación.

Los trayectos en un SVG

Observa el siguiente código SVG. Se trata de una imagen vectorial que dibuja dos triángulos. El primero tiene el id="first" y el segundo el id="second". Le he puesto algunos atributos para que se vea dibujado en el navegador si miras la demo:

<svg width="450" height="200" viewBox="0 0 450 200">
  <path id="first"
    fill="none" stroke="#000" stroke-width="2"
    d="M0,0 L200,0 L200,200 L0,0 Z" />
  <path
    id="second" fill="none" stroke="#000" stroke-width="2"
    d="M250,0 L450,0 L250,200 L250,0 Z" />
</svg>

Ahora vamos a utilizar la función url() en base a este fichero.

La función url()

La función url() podemos utilizarla no sólo para hacer referencia a ficheros externos, sino también para hacer referencia a id como anchors. Es decir, si en la función url() indicamos #first, estaremos haciendo referencia a un elemento del documento actual que tenga el id="first".

Para entenderlo mejor, veamos un ejemplo en acción.

Usando trayectos con url()

El siguiente ejemplo crea un SVG incrustado en el HTML, que tiene el id="first" y el id="second". Más adelante, dibujamos dos cuadraditos de diferente colores, que son los que usaremos para mover con los trayectos.

Luego, en el código CSS, establecemos el offset-path con la función url() indicando el id deseado. El navegador buscará el <path> con ese id, y lo usará de trayecto:

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  animation: move 3s alternate infinite;
}
.box-1 {
  background: indigo;
  offset-path: url("#first");
}
.box-2 {
  background: teal;
  offset-path: url("#second");
}

@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

body {
  margin: 2.5rem;
  min-height: 225px;
}

svg {
  position: absolute;
}

<svg width="450" height="200" viewBox="0 0 450 200">
  <path id="first"
    fill="none" stroke="#000" stroke-width="2"
    d="M0,0 L200,0 L200,200 L0,0 Z" />
  <path
    id="second" fill="none" stroke="#000" stroke-width="2"
    d="M250,0 L450,0 L250,200 L250,0 Z" />
</svg>

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

El caso de la función url() es exactamente el mismo que el de la función path(), sólo que en este caso aprovechamos un SVG definido y no tenemos que colocar el trayecto en la función path() en el CSS.

Algunas consideraciones:

• La función url("#first") busca el id en un <path> de un SVG incrustado en el documento actual.
• Utilizará el trayecto definido en el atributo d de esa etiqueta SVG.
• En principio, es posible utilizar url("image.svg#pathname") para usar el id de un SVG externo, pero en el momento de escribir este artículo, parece que los navegadores aún no lo soportan.