non-scaling-stroke-02.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" reftest-zoom="2" overflow="hidden">

<style type="text/css" >

rect {

  stroke-width: 15px;

  vector-effect: non-scaling-stroke;

</style>

<defs>

  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">

    <stop offset="0" stop-color="blue"/>

    <stop offset="1" stop-color="yellow"/>

  </linearGradient>

  <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse">

    <stop offset="0" stop-color="blue"/>

    <stop offset="1" stop-color="yellow"/>

  </linearGradient>

  <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)">

    <rect x="0" y="0" width="10" height="10" fill="red"/>

    <rect x="10" y="0" width="10" height="10" fill="green"/>

    <rect x="0" y="10" width="10" height="10" fill="blue"/>

    <rect x="10" y="10" width="10" height="10" fill="yellow"/>

  </pattern>

  <rect id="rect" width="400" height="50" fill="none"/>

</defs>

<g transform="translate(20,20)">

    <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/>

</g>

<rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/>

<use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/>

<use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/>

</svg>