W3C SVG Strokes presenta stroke-dashadjust, pero ningún navegador lo implementa todavía.
El panel de trazos de Adobe Illustrator tiene un botón para esta función: su información sobre herramientas dice Alinea los guiones con las esquinas y los extremos del camino, ajustando las longitudes para que encajen
Cuando lo configura y exporta SVG, lo que hace es tomar su configuración inicial, decir 0pt dash, 5pt gapy modificarla, generando un stroke-dasharrayatributo como 0,4.9121.
Quería usar esto para conectar texto con gráficos en gráficos, antes de que el soporte para este nuevo atributo llegue a los navegadores. Mi caso de uso solo involucró líneas rectas (por lo que aún no me preocupo por las rutas con esquinas): conectar el texto de la etiqueta con las barras en un gráfico de barras.
Más detalles:
Propuestas/Ajuste de trazo de guión - SVG
Quería preguntar pero luego lo descubrí:
// Select your lines and convert to array
const linesArray = [...document.querySelector('svg path.straight-line')];
linesArray.forEach(line => {
const len = line.getTotalLength();
// Compute stroke-dasharray attribute values
const dasharray = (len, gap) => {
// How many segments?
return (len%gap < gap/2)
// Is it closer to go lower?
? +(len / Math.floor(len/gap)).toFixed(4) - 0.01
// or higher?
: +(len / Math.ceil(len/gap)).toFixed(4) - 0.01;
};
line.setAttribute('stroke-dasharray', `0,${dasharray(len, 5)}`);
});
Utiliza SVGPathElement.getTotalLength , que tiene un soporte incompleto en sí mismo... Se puede reemplazar analizando el datributo de la ruta.