<!DOCTYPE html>
|
<body>
|
You should see a <b>small</b> (20px tall) purple rectangle and square here. They should NOT be huge.
|
<svg height="600" width="600">
|
<!-- width/height here override the ones from the cloned element-->
|
<use width="40" height="20" xlink:href="#search-icon"></use>
|
<!-- This one should use width/height from the cloned element-->
|
<use y="40" xlink:href="#search-icon"></use>
|
</svg>
|
|
<svg>
|
<!-- This small width and height should be preserved in the
|
<use> element's clone, unless overridden by attributes on the
|
<use> element itself, as noted at
|
https://svgwg.org/svg2-draft/struct.html#SymbolElement -->
|
<symbol width="20" height="20" id="search-icon">
|
<!-- This rect will fill the clone to show us how big it is. -->
|
<rect height="100%" width="100%" fill="purple" stroke="black">
|
</rect>
|
</symbol>
|
</svg>
|
</body>
|