svg - Задать фон под изображение

Question

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

Смущает, оба блока необходимо выравнивать, координаты задавать. Возможно ли проще и в этом плане сделать?

Answer 1

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">
  
    <rect style="fill: skyblue;" 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> 
  <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>

БЛОГ НА HUSL

svg - Задать фон под изображение

Ответы (1 шт):