0
199
Vistas¿Cómo puedo poner una imagen de fondo en un componente circular?
Escribí el código a continuación que me hace un círculo con un borde rojo y verde parcial. Se muestra en la primera foto.
Ahora mi pregunta es ¿cómo puedo llenar el círculo interior con una imagen? Me refiero a algo como background-image: url(""); . ¿Puedo hacer lo mismo con el atributo de fill (ahora es transparent )? El círculo debe verse como en la segunda imagen (la imagen es solo un ejemplo). Estoy usando React y componentes con estilo.
const Wrapper = styled.svg` position: relative; `; const BottomCircle = styled.circle` stroke: ${({ theme }) => theme.red}; stroke-width: 5px; stroke-dasharray: 440; stroke-dashoffset: 0; fill: transparent; `; const TopCircle = styled.circle` stroke: ${({ theme }) => theme.green}; stroke-width: 5px; stroke-dasharray: 440; stroke-dashoffset: 250; fill: transparent; `; const Holder = styled.g``; <Wrapper width="200" height="200"> <Holder transform="rotate(-90 100 100)"> <BottomCircle r="70" cx="100" cy="100"></BottomCircle> <TopCircle r="70" cx="100" cy="100"></TopCircle> </Holder> </Wrapper> 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Así es como yo abordaría esto. Use un div con un degradado cónico con una imagen en la parte superior para enmascararlo.
const Avatar = styled.div` width: 200px; height: 200px; position: relative; border-radius: 50%; background: ${({ Progress }) => { if (Progress) return `conic-gradient(red ${(Progress / 100) * 360}deg, yellow ${ (Progress / 100) * 360 }deg 360deg)`; }}; &:before { content: ""; position: absolute; top: 5px; left: 5px; border-radius: 50%; width: calc(100% - 10px); height: calc(100% - 10px); background-image: ${({ ImageSrc }) => { if (ImageSrc) return `url(${ImageSrc})`; }}; background-position: center; background-size: contain; } `; <Avatar Progress={80} ImageSrc="https://i.pinimg.com/474x/ea/82/5f/ea825f48a30b953a396a29a54752ff68.jpg"/> 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta