SVG対応ボタンのViewBox問題

Question

SVGを使用して角を丸くしたボタンを作成しています（SVGを使用する必要があります）。

私は親要素である＃btnTourに関連して反応しやすくなりました。幅と高さを入れました。しかし、私はいつもこの#btnTourと私のSVGのパスとの間にギャップがあります。私はそれがビューボックスに関係していると思いますが、それについての記事を読んだ後も、私の問題を解決する方法はまだ分かりません。

ありがとうございました。

#btnTour{ 
 
    display: inline-block; 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    position: relative; 
 
    margin: 1em; 
 
    padding: 0; 
 
    width: 192px; 
 
    height: 70px; 
 
    text-decoration: none; 
 
} 
 

 
#svgContainer{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
    border: dotted 1px red; 
 
} 
 

 
#btnTourText{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    display: block; 
 
    margin: 0; 
 
    text-align: center; 
 
    z-index: 100; 
 
    font-size: 25px; 
 
    color: #2b5e9d; 
 
    font-weight: 600; 
 
    white-space: nowrap; 
 
}

<a id="btnTour" href="page2.php"> 
 

 
\t <div id="svgContainer"> 
 

 
    \t <svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none"> 
 

 
     \t <path id="svgBtn" style="fill:none;stroke:#2b5e9d;stroke-width:2;" d="M286.5,62.5C286.5,90.39099999999999,263.891,113,236,113C236,113,171.64499999999998,113,150,113C128.355,113,64,113,64,113C36.109,113,13.5,90.39099999999999,13.5,62.5C13.5,62.5,13.5,62.5,13.5,62.5C13.5,34.609,36.109,12,64,12C64,12,128.35500000000002,12,150,12C171.645,12,236,12,236,12C263.891,12,286.5,34.609,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5"></path>   
 

 
    \t </svg> 
 

 
\t </div> 
 

 
\t <p id="btnTourText">Go on a Tour</p> 
 
</a>

Answer 1

はい、あなたは（例えばviewBox="12.5 11 275 103"のようなものを。）のパスに合わせてビューボックスを設定する必要があります。あなたはjsを介してプログラムで行うことができます（svg要素に収まるようにバウンディングボックスを計算する）か、好みのsvgオーサリングアプリケーションから設定/取得します。