es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar imagen dentro de svg

02 Aug, 2023 Programación

Quiero colocar una imagen PNG en el centro de un círculo SVG en un archivo HTML simple. Aún así, quiero un color de fondo verde claro para el círculo y la imagen no debe llenar todo el círculo. ¿Cómo puedo hacer eso?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, crea un elemento SVG con una forma de círculo y un color de relleno verde claro utilizando la etiqueta circle. Luego, usa la etiqueta image para insertar la imagen PNG dentro del círculo. Utiliza los atributos x e y para posicionar la imagen correctamente dentro del círculo, y ajusta los atributos width y height para obtener el tamaño deseado. Por último, utiliza CSS para agregar estilo al elemento SVG y ajustar el tamaño del círculo según tus requisitos.

    Aquí tienes un ejemplo de código para ayudarte a comenzar:

    <!DOCTYPE html>
<html>
<head>
    <title>Círculo con Imagen</title>
    <style>
        svg {
            background-color: lightgreen;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <svg>
        <circle cx="150" cy="150" r="100"></circle>
        <image x="75" y="50" width="150" height="150" xlink:href="tu-imagen.png"></image>
    </svg>
</body>
</html>

    En este ejemplo, los atributos cx y cy especifican el centro del círculo, y el atributo r establece el radio en 100. El atributo xlink:href en la etiqueta image especifica la ubicación del archivo de imagen PNG. Los atributos x e y posicionan la imagen dentro del círculo en (75,50), y los atributos width y height establecen el tamaño de la imagen en 150 píxeles. El código CSS establece el color de fondo del elemento SVG en verde claro y ajusta su ancho y alto a 300 píxeles.

Comments are closed.