CSS - parent div goes beyond child SVG

Question

I have an SVG that I use in the header for the logo. A lot of flexible boxes. Sort of...

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;
        }
    }
}

Everything is displayed well, and I can resize the SVG to whatever I want. BUT! When I hover over the logo, the cursor still shows how cursorfar beyond the SVG (but not in the entirety of the .logodiv).

Entire .logodiv (green rectangle - SVG) ...

Element svg.logo-color...

SVG ...

The second screenshot shows the area in which the cursor is displayed as pointer.

, svg.logo-color SVG, . , (, , ) SVG , .

, , - . : pointer , - .

# 1 - ( )

MullerA, cursor: pointer; use. , "" . , .

Answer 1

SVG "300 ", , .

, , , SVG (.. svg.logo-color) viewBox.

SVG. , #logo-color-bt. <symbol>, viewBox.

Answer 2

cursor: pointer use.