SVG框大小超出正常大小

Question

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

现在，床与圆圈重叠，所以在圆圈上的悬停不适用。仅床受影响(z-index)。

​

​

Font awesome + 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>

Answer 1

这可能是他们的错误，但我非常怀疑像Font would这样的人会犯这样的错误。你能把它复制成一些片段，这样我就可以试着弄清楚了吗？

否则，如果你能很好地适应图标，并且你只担心悬停效果，-我建议将此添加到svg中，并在圆圈上添加悬停效果。

svg { pointer-events: none; }

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

现在，您可以在两个图像上悬停。

​

​