SVG 不显示在按钮元素中

Question

I'm using inline SVG ( as JSX ) on my website, I'm trying to display a hamburger menu button but it isn't showing up. Here is my code:

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;

The Icon is only visible when it's outside the button tag, how do I view it while preserving the viewBox attribute?

Answer 1

In your case you need to adjust the viewBox for your svg element, that way when you set your svg's height and width , your svg scales properly and you get the desired result. Here's your code which I tweaked:

<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>

See it work on codepen here .

You can learn about how viewBox works at CSS tricks and MDN .