"4" fill="url('#myGradient')" />
</svg>

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
    <use href="#myCircle" x="10" fill="blue" />
    <use href="#myCircle" x="20" fill="white" stroke="red" />
    <!--
  stroke="red" will be ignored here, as stroke was already set on myCircle.
  Most attributes (except for x, y, width, height and (xlink:)href)
  do not override those set in the ancestor.
  That's why the circles have different