Example


<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1">
     <desc>Example Use04 - 'use' with CSS styling</desc>
     <defs style=" /* rule 9 */ stroke-miterlimit: 10">
          <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250" class="MyPathClass" style=" /* rule 10 */ stroke-dasharray:300,100"/>
     </defs>
     <style type="text/css"> /* rule 1 */ #MyUse { fill: blue } /* rule 2 */ #MyPath { stroke: red } /* rule 3 */ use { fill-opacity: .5 } /* rule 4 */ path { stroke-opacity: .5 } /* rule 5 */ .MyUseClass { stroke-linecap: round } /* rule 6 */ .MyPathClass { stroke-linejoin: bevel } /* rule 7 */ use > path { shape-rendering: optimizeQuality } /* rule 8 */ g > path { visibility: hidden } </style>
     <rect x="0" y="0" width="1200" height="300" style="fill:none; stroke:blue; stroke-width:3"/>
     <g style=" /* rule 11 */ stroke-width:40">
          <use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="/* rule 12 */ stroke-dashoffset:50"/>
     </g>
</svg>
Original SVG source