如何将SVG插入按钮?

时间:2018-07-19 23:38:09

标签: html css svg

我是HTML和其他东西的新手,我想在按钮中插入SVG。我尝试使用<object>,但SVG不可见。我有什么建议可以使它可见并适合盒子?

1 个答案:

答案 0 :(得分:0)

有几种不同的方法。可能包括SVG的最简单方法是使用<img>标签,就像处理任何其他图像类型一样:

<button>
  <img src="https://material.io/tools/icons/static/icons/baseline-face-24px.svg" aria-hidden="true">
  Smile
</button>

在这种情况下,我们要导入的SVG的大小是正确的,但是如果不是,则可能很难调整大小,因为您需要考虑两个要素而不是一个要素。在这种情况下,一个不错的选择是将其设置为CSS的背景:

.my-button {
  width: 3em;
  height: 3em;
  background: url("https://material.io/tools/icons/static/icons/baseline-face-24px.svg") center no-repeat;
}
<button class="my-button" aria-label="Smile"></button>

此方法通常用于图标,但是请注意,在此方法中,我们必须指定大小(在这种情况下,在CSS中使用widthheight

作为第三种选择,您可以直接在HTML中包含SVG源代码,这使您可以使用CSS设置样式并使用JavaScript进行操作,但这通常对按钮图标不是很有用。为了完整起见,尽管您可以这样做:

<button>
  <!-- From https://material.io/tools/icons/?style=baseline -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
    <path fill="none" d="M0 0h24v24H0z"/>
</svg>
</button>

CSS-Tricks has a good article上的所有三种方法。