<h1>Reuse and translate</h1>
<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible">
  <defs>
    <polygon id="polygon1" points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" transform="translate(-50, -50)" />
    <rect id="rect" width="100" height="100" transform="translate(-50, -50)" />
    <circle id="circ" cx="50" cy="50" r="50" transform="translate(-50, -50)" />
</defs>
  
  <g transform="translate(50, 50)">
    <use xlink:href="#polygon1" class="outside" transform="scale(1.1)" />
    <use xlink:href="#polygon1" class="inside" />
  </g>
  <g transform="translate(200, 50)">
    <use xlink:href="#rect" class="outside" transform="scale(1.1)" />
    <use xlink:href="#rect" class="inside" />
  </g>
  <g transform="translate(350, 50)">
    <use xlink:href="#circ" class="outside" transform="scale(1.1)" />
    <use xlink:href="#circ" class="inside" />
  </g>
</svg>
body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }

.outside {
  fill: none;
  stroke: red;
}

.inside {
  fill: pink;
  stroke: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.