ロゴのヘッダーに使用しているSVGがあります。フレックスボックスがたくさんあります。以下のような何か...CSS - 親divが子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;
を設定することができます。しかし、ページのサイズを小さくすると、望ましくない"パディング"がフローの問題を引き起こします。可能であれば、私はそれをすべて一緒に取り除きたいと思っています。
それはそれでした。外部ファイルは ''タグに' viewBox'を持っていますが、それを '
HTMLの '