0

Tengo el siguiente diseño de un rectángulo en etiquetas svg en html, pero dentro de ella quisiera poner 2 botones circulares uno alado de otro, de que manera puedo hacerlo?

  <div class="row">
                    <svg width="550" height="150">
                        <rect width="550" height="150" style="fill:rgb(200,209,208);stroke-width:3;stroke:rgb(0,0,0)"></rect>
                    </svg>
                </div>

Este es el boton circular que quisiera poner dentro

.btn-circle.btn-xl { 
            width: 70px; 
            height: 70px; 
            padding: 10px 16px; 
            border-radius: 35px; 
            font-size: 12px; 
            text-align: center; 
        } 
<button type="button" class="btn btn-dark btn-circle btn-xl">Black</button> 

3
  • ¿Seguro necesitas un svg? Porque ese rectángulo se puede hacer con css. ¿Cuál versión de Bootstrap usas? el 19 mar. 2021 a las 16:49
  • Si con svg, y uso bootstrap 4
    – cosito
    el 19 mar. 2021 a las 17:04
  • Si necesitas utilizar un elemento HTML dentro de un elemento SVG lo puedes poner en un <foreignObject>
    – enxaneta
    el 29 mar. 2021 a las 9:19

1 respuesta 1

2

Se puede hacer modificando el row para que tenga una posición relativa y los botones una absoluta. Luego opcionalmente (supuse que querrías los botones centrados) puedes usar en el row las clases justify-content-center para centrar los botones horizontalmente y align-items-center para centrarlos verticalmente.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<style>
    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        border-radius: 35px;
        font-size: 12px;
        text-align: center;
    }
</style>

<div class="row position-relative justify-content-center align-items-center">
    <svg width="550" height="150">
        <rect width="550" height="150" style="fill:rgb(200,209,208);stroke-width:3;stroke:rgb(0,0,0)"></rect>
    </svg>
    <div class="position-absolute">
        <button type="button position-absolute" class="btn btn-dark btn-circle btn-xl">Black</button>
        <button type="button position-absolute" class="btn btn-dark btn-circle btn-xl">Black</button>
    </div>
</div>

3
  • Me dice en el button que la position-absolute no es valido para el atributo type, y si le dejo solo el button si me salen los 2 botones pero debajo del rectangulo..
    – cosito
    el 19 mar. 2021 a las 17:31
  • Si das click en el botón ejecutar de mi respuesta verás que funciona correctamente. Obviamente no puedes quitar la clase position-absolute a los botones ya que esta es la que los coloca dentro de la imagen svg. Supongo que el error lo llegas a tener al integrar este fragmento en tu página, pero para poder ayudarte en ello debo poder ver toda tu página. el 19 mar. 2021 a las 17:38
  • El error que mencionas no lo conozco, pero position-absolute no debe estar en el atributo type del elemento, debe ir en el atributo class. el 19 mar. 2021 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.