<svg width="0" height="0" viewBox="0 0 100 100" style="position: absolute; width: 0; height: 0;">
  <mask id="mask" x="0" y="0" width="100%" height="100%">
    <polygon points="50 3, 90 25, 90 75, 50 97, 10 75, 10 25" fill="#fff" stroke="#999" stroke-width="5"/>
  </mask>
</svg>

<svg class="svg" width="200" height="200" viewBox="0 0 100 100">
  <image
    width="100%" height="100%" 
    preserveAspectRatio="xMidYMid slice" 
    href="https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" 
    mask="url(#mask)"/>
  <polygon points="50 3, 90 25, 90 75, 50 97, 10 75, 10 25" fill="none" stroke="tranparent" stroke-width="5"/>
</svg>

<svg class="svg" width="200" height="200" viewBox="0 0 100 100">
  <image
    width="100%" height="100%" 
    preserveAspectRatio="xMidYMid slice" 
    href="https://images.unsplash.com/photo-1615111784767-4d7c527f32a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" 
    mask="url(#mask)"/>
    <polygon points="50 3, 90 25, 90 75, 50 97, 10 75, 10 25" fill="none" stroke="tranparent" stroke-width="5"/>
</svg>

body {
  margin: 10px;
  background:
    linear-gradient(to right, #0001 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, #0001 1px, transparent 1px) 0 0 / 8px 8px;
}

.svg polygon {
  stroke: transparent;
  transition: stroke 500ms;
}

.svg:hover polygon {
  stroke: forestgreen;
}