CSS - 親divが子SVGを超えて拡張する

Question

ロゴのヘッダーに使用しているSVGがあります。フレックスボックスがたくさんあります。以下のような何か...

HTML

<header id="header"> 

    ... stuff ... 

    <div class="logo"> 
     <svg class="logo-color"> 
      <title>Title</title> 
      <use xlink:href="/images/svgs.svg#logo-color-bt"></use> 
     </svg> 
    </div> <!-- /.logo --> 

    ... stuff ... 

</header> <!-- /#header --> 

CSS（SASS）

#header { 

    display: flex; 
    flex-direction: row; 

    align-items: center; 

    height: 50px; 

    ... other css... 

    .logo { 
     flex: 1; 

     display: flex; 
     flex-direction: row; 

     align-items: center; 
     justify-content: center; 

     svg.logo-color { 
      display: block; 
      height: 32px; 

      cursor: pointer; 
     } 
    } 
} 

すべてがうまく表示され、私が欲しいものにSVGのサイズを変更することができます。しかし！マウスをロゴの上に置くと、カーソルはまだcursorというSVGの外にあります（しかし、.logo divの全体ではありません）。

全体.logo DIV（緑色の矩形がSVGである）...

svg.logo-color要素...

SVG ...

2番目のスクリーンショットは、カーソルがpointerと表示される領域を示しています。

私が欲しいのは、内に描かれたSVGに合わせてsvg.logo-colorになることです。問題は、SVG画像の高さ（したがって幅）が変わる可能性があるため、幅のハードコード値を入れることができないということです。

不明な点がある場合は教えてください。それを煮詰めるには：私は、緑の矩形内にpointerのカーソルを置き、それ以外の場合は普通の矢印だけを必要とします。

EDIT＃1 - （追加情報）

MullerAが巧みに指摘したように、私はuse要素にcursor: pointer;を設定することができます。しかし、ページのサイズを小さくすると、望ましくない"パディング"がフローの問題を引き起こします。可能であれば、私はそれをすべて一緒に取り除きたいと思っています。

Answer 1

SVGのデフォルトの幅は「300px」です。なぜなら、それが何であるべきか他の考え方を与えていないからです。

ロゴと同じサイズにしたい場合は、インラインSVG（つまりsvg.logo-color）に適切なviewBox属性を付けます。

他のSVGファイルを含めないでください。だから我々は要素が#logo-color-btであるということはない。 <symbol>の場合は、viewBoxを使用できるだけです。

Answer 2

cursor: pointerは、use要素にのみ適用できます。