javascript - img - La ruta SVG no cerrada parece estar cerrada

img html title

Question

Estoy escribiendo algunas cosas con d3 y me encontré con un problema extraño. Las rutas que están cerradas terminan con un carácter ''Z'', pero cada ruta que hago se cierra (y se llena) independientemente de si incluyo una Z o no. Incluso en forma aislada con ejemplos copiados de la especificación, esto sucede. Por ejemplo:

<svg>
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>

Estoy desconcertado sobre cuál podría ser el problema. Agradecería cualquier idea.

Answer 1

La línea relevante de la especificación SVG , con respecto a las rutas de llenado :

La operación de relleno llena los subtrazos abiertos al realizar la operación de llenado como si se hubiera agregado un comando adicional "closepath" a la ruta para conectar el último punto del subtrayecto con el primer punto del subtrayecto.

Entonces, en lo que se refiere al relleno , hay una "Z" implícita al final. Sin embargo, para el trazo , no hay un cierre implícito, por lo que no se dibujará un trazo que conecte el último punto al primer punto a menos que agregue explícitamente una "Z".

Si solo desea aplicar un trazo, use CSS para deshabilitar el relleno:

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

(Veo que respondió su propia pregunta, pero pensé que a los demás todavía les podría resultar útil una explicación).

Answer 2

Volví a votar la respuesta, pero a veces css no es una opción cuando intentas convertir svg a canvas y me gustaría evitar que la ruta svg se llene o se cierre. Equivalente a la solución CSS pero sin CSS ...

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="1.5">
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>