svg {height:60px}
ellipse {
cx:7.5;
cy:1.8;
ry:2;
rx:2;
fill: red;
stroke: #fff;
stroke-width: .4
}
text {
text-anchor:middle;
dominant-baseline:central;
font-size: .15em;
background: red;
fill: #fff;
}
<svg viewBox="0 0 10 10">
<defs>
<rect id="rect" x="10%" y="10%" width="80%" height="80%" rx="15" fill="rgb(93,59,174, 60%);"/>
<clipPath id="clip"><use xlink:href="#rect"/></clipPath>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/1200px-Circle-icons-profile.svg.png" height="100%" clip-path="url(#clip)"/>
<ellipse></ellipse>
<text x="7.5" y="1.8">10</text>
</svg>
Каким образом, возможно задать фон под изображение под тот же радиус?
Второй вопрос, возможно ли что проще сделать. В плане меньше кода и
10
Смущает, оба блока необходимо выравнивать, координаты задавать. Возможно ли проще и в этом плане сделать?