Maska a rámeček na obrázku responzivně

by Petr Haluza

HTML

<div class="container">
            <svg viewBox="0 0 656 497">
                <defs>
                    <mask id="mask">
												    <g transform="matrix(0.940213,-0.242116,0.275079,1.06822,-190.381,-114.828)">
        <path d="M752.521,436.652C752.521,331.591 655.613,246.295 536.248,246.295L309.225,246.295C189.861,246.295 92.952,331.591 92.952,436.652C92.952,541.712 189.861,627.008 309.225,627.008L536.248,627.008C655.613,627.008 752.521,541.712 752.521,436.652Z" style="fill:white;"/>
    </g>
                    </mask>
                </defs>
                <image mask="url(#mask)" xlink:href="https://cdn.mos.cms.futurecdn.net/iuCJzaECVkvLvdoyn5tR9E-768-80.jpg.webp" width="115%" height="100%">
                </image>

    <g class="frame-border" fill="none" transform="matrix(0.940213,-0.242116,0.275079,1.06822,-190.381,-114.828)">
        <path d="M752.521,436.652C752.521,331.591 655.613,246.295 536.248,246.295L309.225,246.295C189.861,246.295 92.952,331.591 92.952,436.652C92.952,541.712 189.861,627.008 309.225,627.008L536.248,627.008C655.613,627.008 752.521,541.712 752.521,436.652Z" style="fill:none;stroke:black;stroke-width:5.01px;"/>
    </g>
            </svg>
        </div>

CSS

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 900px;max-width:80%;
  height: 400px;
  margin: 1em auto;
}

.frame-border {
  stroke: #10c020;
  stroke-width: 4;
}
body {background: lightblue}