ZVON HowTo: Drawing a filled rectangle

This complex example demonstrates: transformations, reuse of filters.

Output

Source
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
     <defs>
          <linearGradient id="MyGradient">
               <stop offset="5%" style="stop-color:#F60;"/>
               <stop offset="95%" style="stop-color:#FF6;"/>
          </linearGradient>
     </defs>
     <g font-family="serif">
          <g id="WS-CLESP-OP-MSG_80" style="fill:none;stroke:purple;font-size:18;stroke-width:2;" transform="translate(50 80) scale(0.4)">
               <rect style="fill:url(#MyGradient);" x="10" y="10" width="550" height="50"/>
               <rect style="fill:white;opacity:1;" x="0" y="0" width="550" height="50"/>
               <a xlink:href="http://mikecl/servlet/XiDRR?name=WS-CLESP-OP-MSG.&project=ABC&id=2&pid=0003">
                    <text x="20" y="30">OP-MSG.</text>
               </a>
               <text x="300" y="30" style="fill:none;stroke:red;">GROUP</text>
          </g>
          <polyline style="fill:none;stroke:green;stroke-width:1;opacity:1;" points="70,105 70,120 80,120"/>
          <g id="WS-CLHEAD-OP-MSG_110" style="fill:none;stroke:purple;font-size:18;stroke-width:2;" transform="translate(80 110) scale(0.4)">
               <rect style="fill:url(#MyGradient);" x="10" y="10" width="550" height="50"/>
               <rect style="fill:white;opacity:1;" x="0" y="0" width="550" height="50"/>
               <a xlink:href="http://mikecl/servlet/XiDRR?name=WS-CLHEAD-OP-MSG&project=ABC&id=2&pid=0003">
                    <text x="20" y="30">WS-CLHEAD-OP-MSG</text>
               </a>
               <text x="300" y="30" style="fill:none;stroke:red;">PIC X ( 09 ) VALUE SPACE </text>
          </g>
          <polyline style="fill:none;stroke:green;stroke-width:1;opacity:1;" points="70,105 70,150 80,150"/>
          <g id="WS-NOREC-OP-MSG_140" style="fill:none;stroke:purple;font-size:18;stroke-width:2;" transform="translate(80 140) scale(0.4)">
               <rect style="fill:url(#MyGradient);" x="10" y="10" width="550" height="50"/>
               <rect style="fill:white;opacity:1;" x="0" y="0" width="550" height="50"/>
               <a xlink:href="http://mikecl/servlet/XiDRR?name=WS-NOREC-OP-MSG&project=ABC&id=2&pid=0003">
                    <text x="20" y="30">WS-NOREC-OP-MSG</text>
               </a>
               <text x="300" y="30" style="fill:none;stroke:red;">PIC 9 ( 05 ) VALUE ZERO </text>
          </g>
     </g>
</svg>

All > SVG > Transformations > Drawing a filled rectangle