将 svg 图像转换为按钮答案

【问题标题】：Turn svg image into button将 svg 图像转换为按钮
【发布时间】：2020-02-10 08:53:31
【问题描述】：

我能够发展到这一点，但我希望“图像”成为一个按钮。

除了帖子，我还提供了 codepen 链接，也可以查看我的 html 和 css。

    <div id="Grupo_2141">
        <div id="Grupo_5_A56_Group_14">
            <svg class="Ret_ngulo_1_A56_Rectangle_12">
                <rect fill="rgba(202,206,213,1)" id="Ret_ngulo_1_A56_Rectangle_12" rx="12" ry="12" x="0" y="0" width="141" height="24">
                </rect>
            </svg>
            <div id="My_Notifications">
                <span>My Notifications</span>
            </div>
        </div>
    </div>

【问题讨论】：

当您说 button 时，您到底是什么意思？你想让它看起来像可点击吗？
@ShashankVivek 是的，就是这样。
您要求它看起来类似于按钮，所以我提供了css 作为答案。如果你没有得到你想要的东西，你需要澄清更多

标签： html css angular svg

【解决方案1】：

您可以将其包装在 button 中。 button tag 允许 phrasing content，其中包括 SVG tags。

【讨论】：

当我使用按钮标签时，按钮格式发生变化:(
是的。你可以用css抑制它。是做语义明确的事情然后修补样式更好，还是使用 CSS 来简洁地获取您想要的特定内容（如Shashank Vivek suggests），取决于上下文并且最终是主观的。如果这个东西是一个“按钮”，那么我认为最好是<button>。

【解决方案2】：

试试这个this demo code

尝试在 css 中添加更多行为

    #my-btn{
      cursor: pointer;
      box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    }
        #my-btn:active{
          box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
    }

由于您的问题被标记为angular，您可以在svg 上的(click) 为我们添加一些事件；

【讨论】：

使用光标：指针我可以得到我想要的，但它只是作为一个按钮工作吗？
@Dinho：就像我之前说的，当你说button，1.你需要让它看起来像按钮，2.添加角度的(click)来添加一些事件。如果我的回答没有涵盖所有内容，请使用有关 what you expect from that "button" 的更多详细信息更新您的问题
已经更新了代码并设法获得了所需的设计。但是，我无法获得标签按钮，您能帮帮我吗？
@Dinho ：您的代码不会呈现 svg ，您必须修复它。我不确定您是否打算获得 button tag ，我无法理解这个问题。除非你详细说明，否则我无法提供更多帮助

【解决方案3】：

如果你想在点击图片的时候运行一个函数或者脚本，可以加一个

<svg … (click)="yourFunction()"></svg>

-事件到你的矩形。

【讨论】：