Размер коробки SVG больше, чем должен быть

Question

Почему размер поля 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>

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

Теперь у вас есть наведение на обоих изображениях.

Answer 2

Это может быть ошибкой с их стороны, но я сильно сомневаюсь, что кто-то из Font awesome совершит такую ​​ошибку. Не могли бы вы воспроизвести его в каком-нибудь фрагменте, чтобы я мог попытаться это выяснить?

В противном случае , если вы могли бы отлично вписать иконку и беспокоиться только об эффекте наведения - я предлагаю добавить это к SVG и добавить эффект наведения на круг.

svg { pointer-events: none; }