Установка закругленных углов для svg: image

Question

Я пытался сделать закругленные углы для s svg: image (изображение, встроенное в SVG) с помощью d3.js.Я не могу понять, как правильно стилизовать изображение, потому что в соответствии со спецификацией 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, Chrome

Answer 1

'border-radius' не применяется к элементам svg: image (пока что). Обходным путем будет создание прямоугольника с закругленными углами и использование пути обрезки.

Пример .

Соответствующая часть источника:

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