svg导致我的dom高度差距

Question

当我得到一个响应式的layuot时，我能做些什么来防止这种情况？目前svg正在造成一个缺口。我可以让.target通过jquery获取svg吗？如果是的话怎么样？

HTML

<style type="text/css">
  .target {
    mask: url(#m1);
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" >

<mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
  <linearGradient  gradientUnits="objectBoundingBox" id="g" x1="0" y1="0.86" x2="0" y2="0.99">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="white" stop-opacity="0" offset="1"/>
  </linearGradient>
  <rect id="svg_1" height="1" width="1" y="0" x="0" stroke-width="0" fill="url(#g)" />
</mask>
</svg>