html - CSS - 父 div 扩展到子 SVG 之外

Question

我有一个 SVG，我在标题中使用它作为 Logo 。很多 flex 盒子。像...

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 大小更改为我想要的任何大小。但!当我将鼠标悬停在 Logo 上时，光标仍然显示为远离 SVG 的 cursor(但不是整个 .logo div)。

整个.logo div(绿色矩形是SVG)...

svg.logo-color 元素...

SVG...

第二个屏幕截图显示了光标显示为指针的区域。

我想要的是让 svg.logo-color 适合在其中绘制的 SVG。问题在于 SVG 图像的高度(以及宽度)可能会发生变化，因此我无法为宽度输入硬编码值。

如有不明之处请告知。简而言之:我只想要绿色矩形内的 pointer 光标，否则只是一个普通的箭头。

编辑 #1 -(附加信息)

正如 MullerA 巧妙地指出的那样，我可以将 cursor: pointer; 设置为仅 use 元素。但是，当页面尺寸调整得更小时，不需要的“填充” 会导致一些流程问题。如果可能的话，我想一起摆脱它。

Answer 1

SVG 使用默认宽度“300px”，因为您没有给它任何其他关于它应该是什么的想法。

如果您希望它与 Logo 大小相同，请为您的内联 SVG(即 svg.logo-color )提供适当的 viewBox。属性。

您不包含其他 SVG 文件。所以我们没有 isea 什么元素 #logo-color-bt是。如果是<symbol> , 那么应该只能使用它的 viewBox .