CODEWITHSUNDEEP
htmlcsssvg
Birrel
Birrel

Reputation: 4834

CSS - Parent div extends beyond child SVG

I have an SVG that I'm using in the header for a logo. Lots of flex boxes. Something like...

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 displays well, and I can change the SVG size to anything I want. BUT! When I hover the mouse over the logo, the cursor still appears as cursor far outside of the SVG (but not the entirety of the .logo div).

The entire .logo div (green rectangle is SVG)...

Entire logo div

The svg.logo-color element...

svg.logo-color element

The SVG...

SVG element

The second screenshot shows the area that the cursor appears as pointer.

What I'd like is to have svg.logo-color fit to the SVG drawn within. The issue is that the height (and therefore the width) of the SVG image may change, and so I cannot put in a hard-coded value for the width.

Please let me know if anything is unclear. To boil it down: I only want the pointer cursor within the green rectangle, and just a regular arrow otherwise.

EDIT #1 - (Additional Info)

As MullerA cleverly pointed out, I can set cursor: pointer; to only the use element. But when the page is resized smaller, the unwanted "padding" causes some flow issues. I'd like to get rid of it all together, if possible.

Upvotes: 4

Views: 944

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The SVG is using the default width of "300px" because you aren't giving it any other idea of what it should be.

If you want it to be the same size as the logo, then give your inline SVG (ie. svg.logo-color) an appropriate viewBox attribute.

You don't include your other SVG file. So we have no isea what the element #logo-color-bt is. If it is a <symbol>, then should just be able to use its viewBox.

Upvotes: 1

MullerA
MullerA

Reputation: 387

You can apply cursor: pointer only to your use element.

Upvotes: 1

Related Questions