Đặt góc tròn cho svg: hình ảnh

Question

Tôi đã cố gắng tạo góc tròn cho svg: hình ảnh (hình ảnh được nhúng trong SVG) với d3.js. Tôi không thể tìm hiểu làm thế nào để đúng cách phong cách hình ảnh, bởi vì theo W3C spec tôi sẽ có thể sử dụng CSS, nhưng biên giới chặt chẽ hơn cũng không làm tròn cạnh làm việc cho tôi.

Xin cảm ơn trước.

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:

trình duyệt thử nghiệm: Firefox, Chrome

Answer 1

'border-radius' không áp dụng cho svg: các yếu tố hình ảnh (chưa anyway). Một cách giải quyết khác là tạo một rect với các góc tròn và sử dụng đường dẫn clip.

An example.

Phần liên quan của nguồn:

<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)"/> 

Nó cũng có thể tạo ra một số yếu tố rect thay vì sử dụng <use>.

Answer 2

Đối với những người chỉ quan tâm đến việc làm tròn hình đại diện, ở đây có một ví dụ sử dụng d3 v4. Lưu ý rằng bạn cần phải áp dụng cắt trong khi hình ảnh ở (0,0), vì vậy bạn cần dịch() hình ảnh đến nơi bạn muốn.

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