<h1>Reuse</h1>
<svg width="108" height="108" viewBox="-4 -4 108 108" overflow="visible">
  <defs>
    <mask id="poly-mask">
      <rect x="-4" y="-4" width="108" height="108" fill="white"/>
      <g fill="none" stroke="black" stroke-width="2">
        <polygon id="polygon" points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" />
      </g>
    </mask>
    
    <mask id="rect-mask">
      <rect x="-4" y="-4" width="108" height="108" fill="white"/>
      <g fill="none" stroke="black" stroke-width="2">
        <rect id="rect" width="100" height="100" />
      </g>
    </mask>
    
    <mask id="circ-mask">
      <rect x="-4" y="-4" width="108" height="108" fill="white"/>
      <g fill="none" stroke="black" stroke-width="2">
        <circle id="circ" cx="50" cy="50" r="50" />
      </g>
    </mask>
  </defs>
  
  <!-- proof that border gap is transparent -->
  <rect x="-10" y="40" width="520" height="20" fill-opacity="25%"/>
  
  <g>
    <use xlink:href="#polygon" fill="pink" stroke="red" stroke-width="4"
         mask="url(#poly-mask)"/>
  </g>
  
  <g transform="translate(200)">
    <use xlink:href="#rect" fill="pink" stroke="red" stroke-width="4"
         mask="url(#rect-mask)"/>
  </g>
  
  <g transform="translate(400)">
    <use xlink:href="#circ" fill="pink" stroke="red" stroke-width="4"
         mask="url(#circ-mask)"/>
  </g>

</svg>

body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }