html - SVG 框尺寸大于应有的尺寸

Question

为什么 svg 框的大小比路径和 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>

标签： htmlcssvue.jssvgfont-awesome

Answer 1

所以它是这样的：

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

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