bahaviour of styled elements defined inside of def element

by rajkamal

HTML

<div style="border:solid red 1px; width:200px;height:200px;margin:100px">
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" id="svg1">
        <defs>
            <symbol>
                <rect id="unstyled" x="10" y="10" width="10" height="10"></rect>
                <rect id="visual_attr_styled" x="20" y="10" width="10" height="10" fill="red"></rect>
                <rect id="style_attr_styled" x="30" y="10" width="10" height="10" fill="red"></rect>
            </symbol>
        </defs>
        <use xlink:href="#unstyled" style="fill:green" />
        <use xlink:href="#visual_attr_styled" style="fill:green" fill="green" />
        <use xlink:href="#style_attr_styled" style="fill:green" fill="green" />
    </svg>
</div>

CSS

rect {
    stroke:black;
}