我画的SVG线条为什么不能贴页面顶部,而是出现在页面中间?

图片描述

这是我在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>

得到的效果是这样的:
图片描述

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

阅读 3.9k
2 个回答

你把第一个svg去掉就行了

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题