有没有办法在 SVG 中嵌套按钮？

Question

我有四个 SVG 形状，用作文本框，其中包含人们可以预订的课程的描述。在文本框的底部，我想要两个按钮，可以选择查看有关课程的更多信息或预订课程。我试图在我的 html 代码中创建一个嵌套在 SVG 标签中的“外来对象”标签，但这不起作用。然后，我创建了不在我的 SVG 标签中的按钮标签，认为我可以将按钮移动到 SVG 顶部并定位它们，以便它们看起来包含在 SVG 中，但这已将 SVG 移动到不同的位置，我不确定如何使这个元素集合响应不同的屏幕尺寸。我有点不确定从这里该做什么。

这是我的 SVG 文本框之一的代码：

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>

我也愿意接受有关更简单的方法来达到相同效果的建议。

Answer 1

是的，您可以通过在标签中嵌入 HTML 元素来在 SVG 中嵌套按钮。这允许您在 SVG 中包含标准 HTML。这是一个简单的例子来说明这一点：

.

请记住根据需要调整 x、y、宽度和高度属性，以便在 SVG 中适当定位按钮并调整按钮大小。

如果您有任何具体要求或进一步问题