javascript - 我画的SVG线条为什么不能贴页面顶部，而是出现在页面中间？

Question

这是我在ai画的路径，存成SVG格式得到以下的SVG path：

M0,18.348c0,0,87.111-60,183.644,37s194.534-35,194.534-35

写入HTML中后是这样的

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="1000" width="1000" x="20" y="20">
        <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1" />
                <stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <svg id="jbx" xmlns="http://www.w3.org/2000/svg" version="1.1" height="2000" width="1010" x="0" y="0">
        <g>
            <path id="1path" fill="none" d="M0,18.348c0,0,87.111-60,183.644,37s194.534-35,194.534-35" style="stroke:url(#orange_red);stroke-width:20" />
        </g>
    </svg>

得到的效果是这样的：

奇怪的是为什么不贴顶部，还莫名其妙被截去一块？

Answer 1

你把第一个svg去掉就行了

Answer 2

少年你可长点心吧……因为你设置了 stroke-width:20 啊...