Solución:
‘border-radius’ no se aplica a svg: elementos de imagen (todavía de todos modos). Una solución alternativa sería crear un rectángulo con esquinas redondeadas y utilizar una ruta de recorte.
Un ejemplo.
La parte relevante de la fuente:
<defs>
<rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
<clipPath id="clip">
<use xlink:href="https://foroayuda.es/#rect"/>
</clipPath>
</defs>
<use xlink:href="https://foroayuda.es/#rect" stroke-width="2" stroke="black"/>
<image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>
También es posible crear varios elementos rect en lugar de usar <use>.
Para aquellos que solo estén interesados en hacer avatares redondeados, aquí va un ejemplo usando d3 v4. Tenga en cuenta que debe aplicar el recorte mientras la imagen está en (0,0), por lo que debe traducir () la imagen a donde la desee.
import { select } from 'd3-selection';
const AVATAR_WIDTH = 80;
const avatarRadius = AVATAR_WIDTH / 2;
const svg = select('.my-container');
const defs = this.svg.append("defs");
defs.append("clipPath")
.attr("id", "avatar-clip")
.append("circle")
.attr("cx", avatarRadius)
.attr("cy", avatarRadius)
.attr("r", avatarRadius)
svg.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("width", AVATAR_WIDTH)
.attr("height", AVATAR_WIDTH)
.attr("xlink:href", myAvatarUrl)
.attr("clip-path", "url(#avatar-clip)")
.attr("transform", "translate(posx, posy)")
.append('My username')
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)