svg için yuvarlatılmış köşeler ayarlama: image

Question

s sgg için yuvarlatılmış köşeler yapmaya çalışıyordum: d3.js. ile görüntü (SVG'de gömülü) Görüntüyü düzgün bir şekilde nasıl şekillendireceğimi bulamıyorum, çünkü W3C özelliklerine göre CSS'yi kullanabilmem gerekiyor, ancak ne kadar sınırda ne de yuvarlak kenarlar benim için çalışıyor.

Şimdiden teşekkürler.

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

Düzenleme:

Tarayıcılar test: Firefox, Chrome

Answer 1

'border-radius' svg için geçerli değildir: (zaten henüz) görüntü elemanları. Bir geçici çözüm yuvarlak köşeli bir rect oluşturmak ve bir klip yolu kullanmak olacaktır.

An example.

kaynağının ilgili bölümü:

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

yerine <use> kullanmanın birçok rect öğeleri oluşturmak da mümkündür.

Answer 2

Yuvarlanmış avatarlar yapmakla ilgilenenler için, d3 v4'ü kullanarak bir örnek. Görüntüyü (0,0) iken kırpmayı uygulamanız gerektiğine dikkat edin, böylece görüntüyü istediğiniz yere() çevirmeniz gerekir. Büyük

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