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

整个.logo div（绿色矩形是SVG）......

svg.logo-color元素......

SVG ......

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

我想要的是svg.logo-color适合内部绘制的SVG。问题是SVG图像的高度（以及宽度）可能会发生变化，因此我无法为宽度添加硬编码值。

如果有任何不清楚的地方，请告诉我。把它煮沸：我只希望绿色矩形内的pointer光标，否则只需一个常规箭头。

编辑＃1 - （其他信息）

正如MullerA巧妙地指出的那样，我可以将cursor: pointer;设置为仅use元素。但是，当页面调整为较小时，不需要的＆＃34; padding＆＃34; 会导致一些流量问题。如果可能的话，我想一起摆脱它。

Answer 1

您只能将cursor: pointer应用于use元素。

Answer 2

SVG使用默认宽度＆＃34; 300px＆＃34;因为你没有给它任何其他的想法。

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

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

CSS - 父div超出子SVG

2 个答案: