Forma del trazo

Al indicar trazos en nuestras formas o trayectos de un SVG, es posible que necesitemos modificar la forma de dichos trazos. Para ello, tenemos a nuestra disposición una serie de propiedades CSS:

Veamos como podemos utilizar cada una de ellas.

El atributo stroke-linecap

Mediante el atributo stroke-linecap podemos indicar la forma de los extremos de los trazos. Observa que en los dos <svg> del ejemplo, se muestran 3 trayectos donde cada una tiene un stroke-linecap diferente. En el primer <svg> dibujamos 3 líneas de izquierda a derecha, mientras que en el segundo <svg> sirve para ver la apariencia del trayecto como punto.

<svg viewBox="0 0 30 30" height="300" style="background:#aaa">
  <path d="M5 5 L25 5" stroke="black" stroke-width="3" stroke-linecap="butt" />
  <path d="M5 15 L25 15" stroke="darkred" stroke-width="3" stroke-linecap="round" />
  <path d="M5 25 L25 25" stroke="purple" stroke-width="3" stroke-linecap="square" />
</svg>

<svg viewBox="0 0 30 30" height="300" style="background:#aaa">
  <path d="M15 5 L15 5" stroke="black" stroke-width="3" stroke-linecap="butt" />
  <path d="M15 15 L15 15" stroke="darkred" stroke-width="3" stroke-linecap="round" />
  <path d="M15 25 L15 25" stroke="purple" stroke-width="3" stroke-linecap="square" />
</svg>

Los valores utilizados son, de arriba a abajo, butt, round y square. El primero de ellos acorta mucho el borde, a diferencia de square que lo alarga más. Por otro lado, round, redondea la forma del extremo.

El atributo stroke-linejoin

Con el atributo stroke-linejoin podemos definir como son las uniones de dos trayectos o dos lineas, y como se mostrarán. Aquí tienes varios ejemplos con varias esquinas:

<svg viewBox="0 0 105 42" height="300">
  <!-- fila 1 -->
  <path d="M5 5 h10 v10" stroke-linejoin="miter" />
  <text x="7" y="19">miter</text>
  <path d="M25 5 h10 v10" stroke-linejoin="arcs" />
  <text x="27" y="19">arcs</text>
  <path d="M45 5 h10 v10" stroke-linejoin="bevel" />
  <text x="47" y="19">bevel</text>
  <path d="M65 5 h10 v10" stroke-linejoin="miter-clip" />
  <text x="67" y="19">miter-clip</text>
  <path d="M85 5 h10 v10" stroke-linejoin="round" />
  <text x="87" y="19">round</text>
  <!-- fila 2 -->
  <path d="M5 30 l10 -5 l-3 10" stroke-linejoin="miter" />
  <text x="7" y="39">miter</text>
  <path d="M25 30 l10 -5 l-3 10" stroke-linejoin="arcs" />
  <text x="27" y="39">arcs</text>
  <path d="M45 30 l10 -5 l-3 10" stroke-linejoin="bevel" />
  <text x="47" y="39">bevel</text>
  <path d="M65 30 l10 -5 l-3 10" stroke-linejoin="miter-clip" />
  <text x="67" y="39">miter-clip</text>
  <path d="M85 30 l10 -5 l-3 10" stroke-linejoin="round" />
  <text x="87" y="39">round</text>
</svg>

svg {
  background: #aaa;
}
path {
  stroke: black;
  stroke-width: 3px;
  fill: none;
}
text {
  font-size: 3px;
}

Los valores posibles a utilizar son miter, arcs, bevel, miter-clip y round.

El atributo stroke-miterlimit

Por último, el atributo stroke-miterlimit permite modificar como se ve el ángulo puntiagudo cuando tienes definido valores miter, miter-clip o arcs en el atributo stroke-linejoin.

<svg viewBox="0 0 105 24" height="200">
  <!-- fila 1 -->
  <path d="M5 10 l10 -5 l-3 10" stroke-linejoin="miter" stroke-miterlimit="1" />
  <text x="7" y="20">miter</text>
  <path d="M25 10 l10 -5 l-3 10" stroke-linejoin="arcs" stroke-miterlimit="2" />
  <text x="27" y="20">arcs</text>
  <path d="M45 10 l10 -5 l-3 10" stroke-linejoin="miter-clip" stroke-miterlimit="4" />
  <text x="47" y="20">miter-clip</text>
</svg>

<input type="range" min="1" max="50" step="1" value="4">

const paths = document.querySelectorAll("path");
const input = document.querySelector("input");
input.addEventListener("input", () => {
  paths.forEach(path => path.setAttribute("stroke-miterlimit", input.value));
});

svg {
  background: #aaa;
}
path {
  stroke: black;
  fill: none;
  stroke-width: 3px;
}
text {
  font-size: 3px;
}