Draw a line that doesn't get thicker when image stretches

css, svg

Solution

In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.

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

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

Problem

Is there a way in SVG to draw a line that keeps thin when the image is stretched? I'm using a SVG image as a CSS background, something like this: ``` <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> ``` (A diagonal line). I'm stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line. Possible? Something like "thin" lines in flash.

Original source