svgの丸みのあるコーナーを設定する：

Question

私はs3：s3：s3でsvg：image（SVGに埋め込まれた画像）の角を丸くしようとしていました。 W3Cの仕様によれば、私はCSSを使うことができるはずだが、境界の境界も丸みのあるエッジも私のために働くので、イメージを適切にスタイルする方法を見つけることができない。

ありがとうございます。

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

編集：テスト

ブラウザ：Firefoxの、クロム

Answer 1

'国境半径' をSVGには適用されません：画像要素（まだとにかく）。回避策は、角が丸い矩形を作成し、クリップパスを使用することです。

An example。

ソースの関連部分：

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

それは代わりに<use>を使用して、いくつかの矩形要素を作成することも可能です。

Answer 2

丸みを帯びたアバターの作成に興味がある人にとっては、ここではd3 v4を使用する例になります。イメージが（0,0）のときにクリッピングを適用する必要があるので、イメージを必要な場所に平行移動（）する必要があります。

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