Dibuje una línea que no se vuelva más gruesa cuando la imagen se alarga

¿Hay alguna manera en SVG de dibujar una línea que se mantiene delgada cuando se estira la imagen?Dibuje una línea que no se vuelva más gruesa cuando la imagen se alarga

estoy usando una imagen SVG como fondo CSS, algo como esto:

<svg ... preserveAspectRatio="none" viewBox="0 0 15 15"> 
    <line x1="0" y1="15" x2="15" y2="0" 
     color="#000" stroke="#333" stroke-width="1" /> 
</svg>

(Una línea diagonal). Estoy estirando esta imagen a través de un elemento rectangular, y cuando el elemento es más grande, la línea se vuelve más gruesa, pero necesito una línea siempre delgada.

¿Posible? Algo así como líneas "delgadas" en flash.

Fuente

2012-04-15 ezakto

De que manera es que estirarla - con una aplicación de escritorio o una biblioteca de ¿algún tipo? ¿No puedes restablecer el 'ancho de carrera 'después de la transformación? – halfer

Lo estoy usando como fondo CSS en una página web. No se puede restablecer el ancho de trazo:/ – ezakto

No conozco la biblioteca en absoluto, pero me imagino que podría hacer exactamente eso con RaphaelJS. ¿Puede valer la pena ir? – halfer

En los navegadores que implementan 1.2T SVG se puede tener una ópera y Webkit apoyo non-scaling stroke este al igual que Firefox desde la versión 15.

<!-- via property --> 
<line … vector-effect="non-scaling-stroke" /> 

<!-- via CSS --> 
<style> 
    line { vector-effect:non-scaling-stroke } 
</style> 
<line … />

Fuente

2012-04-15 09:16:49

Webkit lo admite también, consulte https://bugs.webkit.org/show_bug.cgi?id=31438. –

IE9 no es compatible con el trazo sin escala. No sé si IE10 admite esta característica. – cuixiping

Dibuje una línea que no se vuelva más gruesa cuando la imagen se alarga

Respuesta

Cuestiones relacionadas