Ruta SVG receptiva sin trazo distorsionado

Tengo una ruta SVG simple con un trazo que quiero cambiar de tamaño de manera receptiva con la ventana del navegador. El problema es que cuando se cambia la relación de aspecto de mis rutas, el trazo se distorsiona.

Este es el camino original a la izquierda y la forma distorsionada a la derecha:

ingrese la descripción de la imagen aquí

Ejemplo en vivo (cambie el tamaño de su navegador): http://codepen.io/Cai_/pen/pyBobP

Necesito que el rectángulo sea una sola ruta con un trazo para poder animar stroke-dashoffset/ stroke-dasharrayetc.

Podría usar javascript para actualizar la ruta, pero me gustaría saber si hay alguna manera de hacerlo con SVG puro (y CSS).

¿Puedo crear una ruta SVG receptiva sin estirar o distorsionar el trazo?

Entonces, ¿quieres que el espacio alrededor del blanco sea el mismo en los lados que en la parte superior e inferior? ¿En porcentaje, supongo? No estoy seguro de entender lo que estás tratando de hacer.
Sí, no quiero que se distorsione el ancho del trazo.
Luego puede usar javascript para agregar el atributo dinámicamente en lugar de agregarlo manualmente a cada ruta en el caso de SVG más complejos

Respuestas (1)

Como se cubre en esta publicación SO , debe usar vector-effect="non-scaling-stroke"para mantener el mismo ancho de trazo independientemente de la escala. demostración actualizada

Ruta SVG receptiva sin trazo distorsionado
RespuestasAquíPolítica de privacidad1y, 0v