轮廓不对齐的 FontAwesome 5 图标

Question

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

[...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>

Answer 2

所以我在发布此内容后 5 分钟就找到了解决方案，尽管之前花了几个小时。不是一直都是这样吗？

解决方案是简单地将 data-fa-transform 属性添加到填充心，将其缩小 1px，使其适合边框：

data-fa-transform="shrink-1"

是的，就是这样。