Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to nest a button in an SVG?

I have four SVG shapes that I am using as text boxes containing a description of courses people can book. At the bottom of the text boxes I want two buttons that have the option to see more information on the course or to book the course. I have tried to create a "foreign object" tag nested in the SVG tags in my html code but this didn’t work. I then created button tags that aren’t in my SVG tags thinking that I could move the buttons on top of the SVG and just position them so they look contained in the SVG but this has moved the SVG to a different position and I am unsure how to make this collection of elements responsive to different screen sizes. I am a little unsure of what to do from here.

This is the code I have for one of the SVG text boxes:

button.home-course-button {
    position:relative;
    left: 215px;
    bottom: 25px;
    border-radius: 15px;
    height: 44px;
    width: 110px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="359" height="375" viewBox="0 0 359 375" fill="none" transform="translate(113 40)">
    <path d="M2 251.976V306.41M2 306.41V2H274.688L357 75.9886L357 373H84.5L2 306.41Z" stroke="url(#paint0_linear_71_5)" stroke-width="4"/>
    <defs>
        <linearGradient id="paint0_linear_71_5" x1="179.5" y1="2" x2="179.5" y2="373" gradientUnits="userSpaceOnUse">
            <stop stop-color="#37E492"/>
            <stop offset="1" stop-color="#008B4A"/>
        </linearGradient>
    </defs>
    <text text-anchor="left" fill="#000000" font-size="31.8px" font-family="Mako" font-weight="400" font-style="normal" x="150" y="38">

    </text>
</svg>

<div>
  <button class="button home-course-button"><p>See More</p></button>
  <button class="button home-course-button"><p>Book</p></button>
</div>

I am open to suggestions on easier ways to achieve the same effect as well.

Tags:

2

Answers


  1. 0

    Yes, you can nest a button in an SVG by embedding HTML elements within a tag. This allows you to include standard HTML within an SVG. Here’s a simple example to illustrate this:

    .

    Remember to adjust the x, y, width, and height attributes as needed to position and size the button appropriately within your SVG.

    If you have any specific requirements or further question

    Login or Signup to reply.
  2. 0

    You can use the SVG as a CSS background image.

    Here, I have the SVG as a data URL, but you could also just refer to a SVG file.

    .description {
  aspect-ratio: 359 / 375;
  width: 359px;
  padding: 10px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTkgMzc1IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMiAyNTEuOTc2VjMwNi40MU0yIDMwNi40MVYySDI3NC42ODhMMzU3IDc1Ljk4ODZMMzU3IDM3M0g4NC41TDIgMzA2LjQxWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfNzFfNSkiIHN0cm9rZS13aWR0aD0iNCIvPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzcxXzUiIHgxPSIxNzkuNSIgeTE9IjIiIHgyPSIxNzkuNSIgeTI9IjM3MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzdFNDkyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOEI0QSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHRleHQgdGV4dC1hbmNob3I9ImxlZnQiIGZpbGw9IiMwMDAwMDAiIGZvbnQtc2l6ZT0iMzEuOHB4IiBmb250LWZhbWlseT0iTWFrbyIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1zdHlsZT0ibm9ybWFsIiB4PSIxNTAiIHk9IjM4Ij48L3RleHQ+Cjwvc3ZnPg==');
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.buttons {
  display: flex;
  justify-content: flex-end;
  gap: .5em;
}

button.home-course-button {
  border-radius: 15px;
  height: 44px;
  width: 110px;
}
    <div class="description">
  <div class="text">
    <div>Description of the course</div>
  </div>
  <div class="buttons">
    <button class="button home-course-button"><p>See More</p></button>
    <button class="button home-course-button"><p>Book</p></button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search