Example 4

You may copy and paste the following text into your favorite editor.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
   "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg id="body"
    width="21cm" height="13.5cm"
    viewBox="0 0 210 135">
<title>Example 4</title>
<desc>
    Add polyline; show scaling transformation.
</desc>
<defs>
    <polyline id="loop" points="
         1.00,  0.00     0.93,  0.16
         0.72,  0.26     0.43,  0.25
         0.13,  0.11    -0.11, -0.13
        -0.25, -0.43    -0.26, -0.72
        -0.16, -0.93     0.00, -1.00
         0.16, -0.93     0.26, -0.72
         0.25, -0.43     0.11, -0.13
        -0.13,  0.11    -0.43,  0.25
        -0.72,  0.26    -0.93,  0.16
        -1.00,  0.00"
        transform="scale(5, 5)"
        stroke="green" stroke-width="0.1" fill="none" />
</defs>
    <rect x="10" y="20" width="150" height="70"
        transform="translate(3, 3)"
        fill="#999999" stroke="#999999" stroke-width="1" />

    <rect x="10" y="20" width="150" height="70"
        fill="#eeeeff" stroke="red" stroke-width="1" />

    <use xlink:href="#loop" transform="translate(20,100)"/>

</svg>