viewBoxが定義されているときにSVGの幅が正しくない

Question

SVGアイコンが正しく表示されない理由を理解しようとしています。このアイコンは、viewBoxプロパティがwidth \ heightと同じように使用された場合、私のSVG要素のイベントより少し小さいです。任意のヘルプ

ため

おかげで、あなたは、アイコンを見るとわかるように、全体SVG要素よりも少し小さいです。

マイSVGコード。

<svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> 
 
    <g fill="#9FA09F" fill-rule="evenodd"> 
 
    <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> 
 
    <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> 
 
    </g> 
 
</svg>

Answer 1

あなたの描画はちょうどあなたがそれをする必要が何にビューボックスのサイズを縮小、ビューボックスの面積よりもはるかに小さいスペースを占めるように思えます。

Answer 2

ビューポート

-Theビューポートが<svg>の表示領域です。ビューポートを設定するには、属性heightとwidthを<svg>に使用できます。

ビューボックス

は、私たちは私たちのグラフィックを設定すると、コンテナ内に収まるようにストレッチすることができ-IT。 viewboxは、4つの特性を有する。mix-x,min-y,width,height。 minの値は、画像内のどの点から始まり、viewBoxを開始するかを表します。

例

我々は、ビューポートとviewboxを設定した場合、widthと同じheight。その後、viewboxは画像全体をカバーします。あなたの問題-For

ソリューション

あなたはviewboxwidthheightプロパティのサイズを小さくする必要があります。しかし、あなたの画像サイズが小さいので、widthと `必要な結果を得るための高さを設定する必要もあります。

JsFiddle Solution with different example

Answer 3

それは24×25ピクセルではありませんので、あなたのアイコンが相殺されるように見える理由はあります。ベクトルの実際の範囲は14×14ピクセルです。

私はあなたのベクトルを微調整するためにSVG編集ツールを使用します。現在使用しているベクターは非常に不安定です。私はそれをそのまま開いている問題がありました。

私は先に進み、あなたのベクトルを調整し、実際の円と円弧のパスを利用しました。

結果は次のとおりです。元のベクトルは32ピクセルのSVGです。ここで

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> 
 
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> 
 
    <g id="person-in-circle"> 
 
    <circle id="circle" cx="16" cy="16" r="15" fill="none" 
 
      stroke="#9FA09F" stroke-width="2" stroke-linejoin="round" /> 
 
    <g id="person" fill="#9FA09F"> 
 
     <circle id="person-head" cx="16" cy="12" r="5" /> 
 
     <path id="person-shoulders" d="M 24 24 a8,8 0 1,0 -16,0" /> 
 
    </g> 
 
    </g> 
 
</svg>

あなたはアークの経路がどのように機能するかについての詳細を知りたい場合は（半分によってスケーリング）16ピクセルSVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> 
 
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> 
 
    <g id="person-in-circle"> 
 
    <circle id="circle" cx="8" cy="8" r="7.5" fill="none" 
 
      stroke="#9FA09F" stroke-width="1" stroke-linejoin="round" /> 
 
    <g id="person" fill="#9FA09F"> 
 
     <circle id="person-head" cx="8" cy="6" r="2.5" /> 
 
     <path id="person-shoulders" d="M 12 12 a4,4 0 1,0 -8,0" /> 
 
    </g> 
 
    </g> 
 
</svg>

ですこの回答を確認してください：

Circle drawing with SVG's arc path

<path 
    d=" 
    M cx cy 
    m -r, 0 
    a r,r 0 1,0 (r * 2),0 
    a r,r 0 1,0 -(r * 2),0 
    " 
/> 

Answer 4

アイコンを作成した場合、それはキャンバスの左上隅に描画しました。実際のアイコンは24px x 25pxビューボックス内に14px x 15pxです。

これがそうであったならば、あなたはどちらかそれが24px x 25pxワークスペースキャンバスの完全な幅と高さを中心としたり、あなたができない場合、それは単に手動でそれを整列するためにしようと再描画再描画可能性がありそうです。

.container { 
 
    display: flex; 
 
} 
 
svg { 
 
    transform: translate(25%, 20%); 
 
}

<div class="container"> 
 
    <svg width="24" height="25" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> 
 
    <g fill="#9FA09F" fill-rule="evenodd"> 
 
     <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> 
 
     <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> 
 
    </g> 
 
    </svg> 
 
    <input type="text"> 
 
</div>

Answer 5

がここに二つの問題があります：あなたは後者を希望する場合

とにかく、ここでCSS translate（自分の利益のために値を微調整）とそれを整列するフレックスの提案です

1. 他の人も指摘しているように、あなたのviewBoxは間違っています。これを修正するには"0 0 14 14"に変更してください。

2. 第2に、デフォルトでは、<svg>要素は他の画像と同様にdisplay: inline-blockです。したがって、それらが他のテキスト（<input>要素を含む）と一直線に並んでいる場合、それらはテキストのベースラインになるように配置されます。

はそれを解決するための様々な方法がありますが、一般的に、あなたはちょうどそのdisplay: blockにSVGを変更するには、ライン上で他のものに垂直方向に並ぶだろう典型的な方法を使用します。例えば。 float: leftおよびmarginである。

svg { 
 
    display:block; 
 
    float: left; 
 
} 
 

 
input { 
 
    margin-top: 2px; 
 
    margin-left: 5px; 
 
}

<svg width="24" height="24" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>1FB31B20-CDD9-43CB-A743-1C613F5D5E0C</title> 
 
    <g fill="#9FA09F" fill-rule="evenodd"> 
 
    <path d="M7 13.684a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0 1a7 7 0 1 1 0-14 7 7 0 0 1 0 14z" /> 
 
    <path d="M7 7.684a2 2 0 1 0 .001-4 2 2 0 0 0-.001 4zM7 8.684c3 0 3.566 2.116 3.566 2.116.24.488-.019.884-.563.884H3.997c-.55 0-.82-.418-.553-.9 0 0 .556-2.1 3.556-2.1z" /> 
 
    </g> 
 
</svg> 
 

 
<input type="text"/>