Disegna una linea che non diventa più spessa quando l'immagine si allunga

C'è un modo in SVG per tracciare una linea che rimane sottile quando l'immagine è allungata?Disegna una linea che non diventa più spessa quando l'immagine si allunga

Sto utilizzando un'immagine SVG come sfondo CSS, qualcosa di simile:

<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 linea diagonale). Sto allungando questa immagine attraverso un elemento rettangolare, e quando l'elemento è più grande, la linea diventa più spessa, ma ho bisogno di una linea sempre sottile.

Possibile? Qualcosa come linee "sottili" in flash.

fonte

2012-04-15 ezakto

In che modo stai stretching - con un'applicazione desktop o di una libreria di una sorta? Non è possibile ripristinare la larghezza del tratto dopo la trasformazione? – halfer

Lo sto usando come sfondo CSS in una pagina web. Impossibile ripristinare la larghezza del tratto:/ – ezakto

Non conosco affatto la libreria, ma immagino che potresti fare esattamente questo con RaphaelJS. Potrebbe valere la pena andare? – halfer

Nel browser che implementano SVG 1.2T si può avere un Opera e Webkit sostegno non-scaling stroke questo così come Firefox dalla versione 15.

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

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

fonte

2012-04-15 09:16:49

Anche Webkit lo supporta, vedere https://bugs.webkit.org/show_bug.cgi?id=31438. –

IE9 non supporta il tratto senza ridimensionamento. Non so se IE10 supporta questa funzione. – cuixiping

Disegna una linea che non diventa più spessa quando l'immagine si allunga

risposta

Problemi correlati