Impostare gli angoli arrotondati per svg: image

Question

Stavo cercando di creare angoli arrotondati per s svg: image (immagine incorporata in SVG) con d3.js. Non riesco a capire come si adatta correttamente l'immagine, perché secondo le specifiche del W3C dovrei essere in grado di usare i CSS, ma il bordo neoke o gli spigoli arrotondati funzionano per me.

Grazie in anticipo.

vis.append("svg:image") 
    .attr("width", width/3) 
    .attr("height", height-10) 
    .attr("y", 5) 
    .attr("x", 5)  
    .attr("style", "border:1px solid black;border-radius: 15px;") 
    .attr("xlink:href", 
      "http://www.acuteaday.com/blog/wp-content/uploads/2011/03/koala-australia-big.jpg"); 

Edit:

browser testati: Firefox, Chrome

Answer 1

'border-radius' non si applica ai svg: elementi di immagine (ancora comunque). Una soluzione alternativa sarebbe creare un retto con angoli arrotondati e utilizzare un percorso di ritaglio.

An example.

La parte rilevante della fonte:

<defs> 
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/> 
    <clipPath id="clip"> 
     <use xlink:href="#rect"/> 
    </clipPath> 
    </defs> 

    <use xlink:href="#rect" stroke-width="2" stroke="black"/> 
    <image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/> 

E 'anche possibile creare diversi elementi rect invece di utilizzare <use>.

Answer 2

Per coloro che sono interessati a creare avatar arrotondati, ecco un esempio che utilizza d3 v4. Si noti che è necessario applicare il ritaglio mentre l'immagine è a (0,0), quindi è necessario tradurre() l'immagine nel punto desiderato.

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')