SVG 框尺寸大于应有的尺寸答案

【问题标题】：SVG box size larger than it should beSVG 框尺寸大于应有的尺寸
【发布时间】：2020-07-30 18:38:03
【问题描述】：

为什么 svg 框的大小比 path 和 g 大这么多？没有边距或填充，高度或宽度。试图操纵 viewBox 但它只会把事情弄得更糟。有什么想法吗？

现在床与圆圈重叠，因此在圆圈上悬停不适用。只有床受到影响（z-index）。

字体真棒 + VUE：

<font-awesome-layers class="mb-4 fa-6x">
    <router-link to="/accommodation">
        <font-awesome-icon icon="circle" />
        <font-awesome-icon icon="circle" />
        <font-awesome-icon
            icon="bed"
            transform="shrink-8, left-2"
        />
    </router-link>
</font-awesome-layers>

【问题讨论】：

也许可以问问 Font Awesome 团队。他们创建了图标

标签： html css vue.js svg font-awesome

【解决方案1】：

这可能是他们一方的错误，但我非常怀疑像 Font awesome 这样的人会犯这样的错误。您能否在一些 sn-p 中重现它，以便我可以尝试弄清楚？

否则如果您可以很好地适应图标并且您只担心悬停效果 - 我建议将其添加到 svg 并在圆圈上添加悬停效果。

svg { pointer-events: none; }

【讨论】：

我想过这个。它与分层图像的对齐有关。没有其他方法可以使这两个图像居中，就像没有任何其他元素（容器）进行对齐一样。所以基本上你没有办法在底层图像上使用悬停效果。悬停仅适用于最顶部的图像。无论如何，这不再是问题了。我必须在 mouseover 和 mouseout 上分配一个 JS 方法，它充当样式更改器。
我不知道你想用那个悬停效果做什么，但你可以在 css .circle:hover .svg:first-of-type { /* Styles applied to first svg on circle hover */ } 中做这样的事情，或者如果你真的需要图标上的悬停效果，因为它有不同的宽度/高度，您可以使用一些具有相同宽度/高度的绝对定位容器（或者如果您甚至无法创建容器或编辑 html，也许您可以在 svg 上使用 ::after 创建一个）。方法很多，99%的情况下不需要使用js。但是如果你使用 js 并且没问题，我想没问题。
您不能在重叠元素上设置悬停效果。悬停仅适用于最顶部的元素。 JS 是实现它的唯一方法。
当然不能。我没有在任何地方这么说。 JS 绝对不是唯一的方法。我用 2 种 CSS 方式为你做了一个 sn-p 如何做到这一点link。顺便说一句，我不建议使用 svg 作为圆形图标。最好使用 div 创建它并给它边框半径 50%。然后，您可以轻松地将图标居中，并通过一些样式确保图标不会溢出您的圆圈或变得更大。
告诉你几乎总有办法哈哈。不客气！

【解决方案2】：

所以它是这样的：

<font-awesome-layers class="mb-4 fa-6x">
    <router-link to="/accommodation" id="fa-bed">
        <font-awesome-icon icon="circle" />
        <font-awesome-icon
            icon="bed"
            transform="shrink-8, left-2"
            @mouseover="faHoverStyle('fa-bed')"
            @mouseout="faNormalStyle('fa-bed')"
        />
    </router-link>
</font-awesome-layers>

methods: {
    faHoverStyle(e) {
        e = document.getElementById(e);
        e.getElementsByClassName("fa-circle")[0].classList.add(
            "fa-circle-hover"
        );
    },
    faNormalStyle(e) {
        e = document.getElementById(e);
        e.getElementsByClassName("fa-circle")[0].classList.remove(
            "fa-circle-hover"
        );
    }
}

.fa-circle {
    color: $color3;
    transition: all 0.5s ease-in-out 0s;
}
.fa-circle-hover {
    color: $color1;
    transition: all 0.5s ease-in-out 0s;
}

现在您将鼠标悬停在两个图像上。

【讨论】：