html - Is there a way to nest a button in an SVG? - Stack Overflow

admin管理员组

文章数量:1122832

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="" 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 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.

• html
• css
• svg
• button
• position

Share Improve this question Follow edited Nov 21, 2024 at 15:00 Fabrizio Calderan 123k2626 gold badges170170 silver badges182182 bronze badges asked Nov 21, 2024 at 14:58 W.ebbW.ebb 111 bronze badge 2

• 2 How do you expect this component to be responsive? – Fabrizio Calderan Commented Nov 21, 2024 at 15:11
• You can add buttons in a SVG e.g via foreignObjects or by adding eventListeners to svg elements directly – but I highly recommend to prefer HTML elements as inputs/buttons: ForeignObjects have a lot of cross-browser issues and SVG text capabilities are underwhelming (no line wrapping). chrwahl's approach (HTML button on top of a SVG background) should provide a more robust solution. – herrstrietzel Commented Nov 21, 2024 at 19:58

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

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>

Use my generator (https://css-generators.com/custom-corners/) to create that shape and you won't need any SVG

.box {
  position: relative;
  height: 250px;
  max-width: 400px;
  padding: 15px;
  margin: auto;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  place-content: end;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#37E492,#008B4A);
  clip-path: polygon(0 0,calc(100% - 80px) 0,100% 80px,100% 100%,80px 100%,0 calc(100% - 80px),0 0,7px  7px ,7px calc(100% - 80px - 2.9px),calc(80px + 2.9px) calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) calc(80px + 2.9px),calc(100% - 80px - 2.9px) 7px,7px 7px);
}

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

本文标签： htmlIs there a way to nest a button in an SVGStack Overflow