は私がこれを描くとき、​​私はその行</p> <p><a href="https://i.stack.imgur.com/Z4yYE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z4yYE.png" alt="enter image description here"></a></p> <p>を取得し、私はそれを望んではいけない、SVG

Question

私はHTMLでSVGを描画しています

にこの行を削除する必要がある、私はそれをSOVEことができますどのように、これはあります行の後に私のコード

html <svg style="background-color: #fff" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 100 20" preserveAspectRatio="none"> <path fill="#f2f2f2" d="M0 30 V12 Q30 17 55 5 T100 11 V30z" /> </svg>

は、私はイラストレーターaにそれを開い

Answer 1

そのSVGと他のdivの間のスペースのように、別のダイビングですその線は実際にアートボードの端です。アートボードのサイズを変更してコードを再エクスポートしました。私はこれが役立つことを願っています残念ながら、それはいくつかの追加情報を詰め込んだ。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 1440 150" style="enable-background:new 0 0 1440 150;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:none;} 
    .st1{fill:#F2F2F2;} 
</style> 
<path class="st0" d="z"/> 
<path class="st1" d="M0,150V60c288,16.7,552,5,792-35s456-30,648,30v95H0z"/> 
<path class="st0" d="z"/> 
</svg> 

Answer 2

は、その行が30pxであるあなた形状の高さをshape-あなたのSVGの一部ではありませんが、あなたのビューボックスは20ピクセル高です - あなただけのviewBox="0 0 100 20"viewBox="0 0 100 30"に変更する必要があるので、全体の形状は、あなたのビューポート内であること。