FontAwesome 5 图标轮廓不对齐

Question

我正在尝试使用 FontAwesome 5 制作一个简单的 "like" 按钮原型。单击它应该会在填充的红色心形图标和未填充的黑色边框心形图标之间切换。问题是我希望黑色边框在填充时留在心脏周围。 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

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

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

data-fa-transform="shrink-1"

是的，就是这样。

Answer 2

不是堆叠，而是在 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>

FontAwesome 5 图标轮廓不对齐

FontAwesome 5 Icons with Outlines Not Aligning

html

javascript

css

font-awesome

font-awesome-5