SVG 不显示在按钮元素中答案

【问题标题】：SVG Doesn't show up in button elementSVG 不显示在按钮元素中
【发布时间】：2021-05-01 17:44:17
【问题描述】：

我在我的网站上使用内联 SVG（作为 JSX），我试图显示一个汉堡菜单按钮，但它没有显示出来。这是我的代码：

import Link from "next/link"

function Nav() {
    return (
        <nav>
            <button > /// SVG is here
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-172 -12 210 50" stroke="#000000">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
            <ul className="">
                <li>
                        <Link href="/">
                                <a>Main</a>
                        </Link>
                </li>
                <li>
                        <Link href="/resume">
                                <a>Resume</a>
                        </Link>
                </li>
                <li>
                        <Link href="/projects">
                                <a>Projects</a>
                        </Link>
                </li>

                <li>
                        <Link href="/blog">
                                <a>Blog</a>
                        </Link>
                </li>
                <li>
                        <Link href="/contact">
                                <a>Get in touch</a>
                        </Link>
                </li>
            </ul>
        </nav>
    );
}

export default Nav;

图标仅在按钮标签外可见，如何在保留viewBox属性的同时查看？

【问题讨论】：

很难用给定的代码来判断，但我会在这里猜测一下。有时svg 需要有display: block 样式并指定width 和height 才能正确显示。检查你的浏览器检查面板，给它们上面的值，看看它是否有效。祝你好运！

标签： html css svg jsx

【解决方案1】：

在您的情况下，您需要为您的 svg 元素调整 viewBox，这样当您设置 svg 的 height 和 width 时，您的 svg 会正确缩放并获得所需的结果。这是我调整的代码：

<button> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="2 1 20 20" stroke="#000000" height="50px" width="50px">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
     </svg>
</button>

查看它在 codepen here 上的工作。

您可以在CSS tricks 和MDN 了解viewBox 的工作原理。

【讨论】：