| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
| "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
| <svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1" |
| xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <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"> |
| <![CDATA[ |
| /* 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> |
