La ruta SVG no cerrada parece estar cerrada

Question

Escribo 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 correspondiente de la SVG specification, con respecto a filling paths:

La operación de llenado se llena subtrazados abiertas mediante la realización de la operación de relleno como si una "closepath" adicional se añadieron comando a la ruta para conectar el último punto de el subtrayecto con el primer punto del subtrayecto

Así, en cuanto a la llenar se refiere, hay una "Z" implícita al final. Sin embargo, para el trazo , no hay 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 sólo desea aplicar un trazo, utilizar CSS para desactivar el relleno:

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

(. Veo que responde a su propia pregunta, pero pensé que otros todavía podrían encontrar una explicación útil)

Answer 2

He votado la respuesta, pero a veces css no es una opción cuando intentas convertir el svg a canvas y te 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>