我是 HTML 和东西的新手,我想将 SVG 插入到按钮中。我尝试使用 <object>
但 SVG 是不可见的。有什么建议可以使它可见并适合盒子吗?
最佳答案
有几种不同的方法。可能包含 SVG 的最简单方法是使用 <img>
标签,就像您对任何其他图像类型所做的那样:
<button>
<img src="https://api.iconify.design/ic-baseline-face.svg?height=24" aria-hidden="true">
Smile
</button>
在这种情况下,我们正在导入的 SVG 的大小大约是正确的,但如果不是这样,则可能很难按照您喜欢的方式调整它的大小,因为您要考虑两个元素而不是一个元素。在这种情况下,一个好的替代方法是将其设置为 CSS 中的背景:
.my-button {
width: 3em;
height: 3em;
background: url("https://api.iconify.design/ic-baseline-face.svg?height=24") center no-repeat;
}
<button class="my-button" aria-label="Smile"></button>
这种方法通常用于图标,但请注意,在这种方法中我们指定一个大小(在本例中使用 CSS 中的 width
和 height
)。
作为第三种选择,您可以直接在 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关于所有三种方法。
关于html - 如何将 SVG 插入按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51433139/