How to put an image in SVG rounded corner hexagon using HTML and CSS?

Question

I am trying to achieve something like the below using SVG:

I have tried many solutions from this platform and so far, I have accomplished this:

<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
    <defs>
        <style>
            .a {
                fill:#000;
                stroke-width: 25px;
                stroke: rgba(255, 255, 255, 0.5);
            }
        </style>
    </defs>
    <path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>

With the above code, I am able to add stroke but not image. And for below code, I am able to add the image but stroke is not appearing:

<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
            <defs>
                <style>
                    .a {
                        fill: #000;
                        stroke-width: 25px;
                        stroke: rgba(255, 255, 255, 0.5);
                    }
                </style>
                <clipPath id="image">
                    <path class="a"
                        d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"
                        transform="translate(111.598) rotate(30)" />
                </clipPath>
            </defs>
            <image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800"
                preserveAspectRatio="xMidYMin slice"></image>
        </svg>

What am I missing to get both onboard?

PS: Rounded corners are a must for the outer core and transparent layer.

Any help/suggestions will be very helpful. Thanks.

Answer 1

comments on @Vishal Bhatt

One more queue: when I increase stroke-width, the curve on the transparent layer becomes a sharp corner. How can I keep that rounded when increasing stroke-width?

will help solve the problem - stroke-linejoin:round;

Used a wide stroke of 65px while keeping the inner rounding of the stroke

For solution instead of clip-Path one can try mask:

<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
  <defs>
    <style>
      .a {
        fill:white;
        stroke-width: 65px;
        stroke: rgba(255, 255, 255, 0.5);
        stroke-linejoin:round;
      }
    </style>
    <mask id="msk"> 
    
      <path class="a"   transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
    </mask>
  </defs>
  <image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
 
</svg>

Update

Hexagon rotation command

transform="rotate(15 124.5 111.5)", here

15 - angle of rotation

124.5 111.5 - Hexagon rotation center coordinates

<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
  <defs>
    <style>
      .a {
        fill:white;
        stroke-width: 45px;
        stroke: rgba(255, 255, 255, 0.5);
        stroke-linejoin:round;
      }
    </style>
    <mask id="msk"> 
    
      <path class="a"   transform="translate(50 50) rotate(15 124.5 111.5)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
    </mask>
  </defs>
  <image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
 
</svg>

Answer 2

Problem with clip-path or masks, is they need to have unique ids if you have multiple SVGs on the page.

One way around this is to create the SVG client-side; and generate a unique id for every clip-path

While we're at it might as well simplify that Hexagon path

Wrapped in a Custom Element (no shadowDOM required with that unique id) you get:

<style>
  svg {
    width: 148px;
    background: teal;
  }
</style>

<svg-hexed-image ></svg-hexed-image>
<svg-hexed-image src="http://placekitten.com/800/800"></svg-hexed-image>
<svg-hexed-image rotate="30" src="http://placekitten.com/801/801"></svg-hexed-image>
<svg-hexed-image rotate="45" stroke="red" opacity=".5" src="http://placekitten.com/300/300"></svg-hexed-image>

<script>
  customElements.define('svg-hexed-image', class extends HTMLElement {
    connectedCallback() {
      let img = this.getAttribute("src") || "http://placekitten.com/120/120";
      let strokewidth = this.getAttribute("stroke-width") || "3";
      let opacity = this.getAttribute("opacity") || ".5";
      let stroke = this.getAttribute("stroke") || "white";
      let rotate = this.getAttribute("rotate") || 0;
      let transform = `transform="rotate(${rotate} 23 23)"`;
      // make very sure for a unique id:
      let id = "id" + btoa(img) + (new Date() / 1); 
      let d = `M31 3.5a5 5 90 014 3l8 14a5 5 90 010 5l-8 14a5 5 90 01-4 3h-16a5 5 90 01-4-3l-8-14a5 5 90 010-5l8-14a5 5 90 014-3z`;
      // now write HTML:
      this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46">
        <defs><clipPath id="${id}"><path fill="none" ${transform} d="${d}"></clipPath></defs>
        <image clip-path="url(#${id})" height="100%" width="100%" href="${img}"></image>
        <path fill="none" stroke="${stroke}" stroke-width="${strokewidth}" 
              ${transform} opacity="${opacity}" d="${d}"/></svg>`;
    }
  });
</script>

Answer 3

Set fill: transparent / fill: none for the path and use it again, as a child of svg

<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
  <defs>
    <style>
      .a {
        fill: none;
        stroke-width: 25px;
        stroke: rgba(255, 255, 255, 0.5);
      }
    </style>
    <clipPath id="image">
      <path transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
    </clipPath>
  </defs>
  <image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
  <path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>