javascript - FontAwesome 5 图标轮廓不对齐

Question

我正在尝试使用 FontAwesome 5 制作一个简单的“喜欢”按钮的原型(prototype)。单击它应该会在填充的红色心形图标和未填充的黑色边框心形图标之间切换。问题是我希望黑色边框在填充时留在心脏周围。 JS 很简单，但要创建边框，我将一个 Regular 样式的 FontAwesome 心形堆叠在一个 Solid 心形之上，但它们没有正确排列。我看到红色的内心溢出了边界，溢出了轮廓的两侧。

[...document.querySelectorAll('.like')].forEach(heart => {
    heart.addEventListener('click', () => {
        heart.classList.toggle('liked');
        let fill = heart.querySelector('.fill');
        if (heart.classList.contains('liked')) {
            fill.style.opacity = '100%';
        } else {
            fill.style.opacity = '0%';
        }
    });
});

.like {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.like > .fill {
    color: red;
    opacity: 0%;
    transition: opacity 0.25s;
}

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class="like fa-stack">
    <i class="fas fa-heart fa-stack-1x fill"></i>
    <i class="far fa-heart fa-stack-1x border"></i>
</div>

由于 FA5 将图标替换为 SVG，因此边框和文本阴影等功能将不起作用。我什至尝试过将路径元素定位到内部并设置其笔划宽度和颜色，但我不能那样淡出中间部分，并且将它与此堆栈一起使用仍然存在错位问题。

如何使用 FA5 制作一个简单的带边框的心形，其纯色内部可以在点击时淡入淡出？

Answer 1

不是堆叠，而是在 SVG 本身上设置笔划，并切换填充颜色而不是不透明度。

[...document.querySelectorAll('.like')].forEach(heart => {
    heart.addEventListener('click', () => {
        heart.classList.toggle('liked');
    });
});

.like {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.like > .fill {
    color: transparent;
    transition: color 0.25s;
    stroke: black;
    /* The stroke width is huge because the svg itself is ~512x512, which is then scaled down */
    stroke-width: 50px;
}
.like.liked > .fill {
    color: red;
}

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class="like fa-stack">
    <i class="fas fa-heart fa-stack-1x fill"></i>
</div>