Configuración de esquinas redondeadas para svg: imagen

Estaba tratando de hacer esquinas redondeadas para s svg: imagen (imagen incrustada en SVG) con d3.js. No puedo encontrar la manera correcta de diseñar la imagen, porque de acuerdo con las especificaciones del W3C, debería poder usar CSS, pero el borde más claro y los bordes redondeados no me funcionan.Configuración de esquinas redondeadas para svg: imagen

Gracias de antemano.

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

Editar:

Navegadores probados: Firefox, Chrome

Fuente

2011-09-15 malejpavouk

'frontera de radio' no se aplica a SVG: elementos de imagen (menos de momento). Una solución alternativa sería crear un rect con esquinas redondeadas y usar un clip-path.

An example.

La parte pertinente de la fuente:

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

También es posible crear varios elementos rect en lugar de utilizar <use>.

Fuente

2011-09-15 14:21:05

Grande, que funciona para mí, gracias :-) – malejpavouk

Tengo problemas para la aplicación de este código en d3.js ... @malejpavouk, ¿tiene alguna ejemplos de código más específicas de su aplicación, de manera que pueda agregar imágenes con esquinas redondeadas a mi visualización d3? – wlindner

Mi aplicación es un poco más complicada, pero el código que necesita es una copia pegada del ejemplo publicado por Erik (si recuerdo correctamente sin ningún cambio significativo). – malejpavouk

Para aquellos que solo estén interesados en hacer avatares redondeados, aquí va un ejemplo con d3 v4. Tenga en cuenta que debe aplicar el recorte mientras la imagen está en (0,0), por lo que debe traducir() la imagen a donde lo desee.

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

Fuente

2018-02-24 14:29:38

Configuración de esquinas redondeadas para svg: imagen

Respuesta

Cuestiones relacionadas