Javascript 如何画中间有文字的心？

我找到了这个答案，但我需要同样的答案，但心形要。我在网上发现了很多心脏形状的图形，但是没有一个里面有文字。同时，我只需要带边框的

心形

，点击时，填充背景

我的代码到现在为止：

.heart{
宽度：100px；
高度：90px；
字体大小：50px；
颜色：#fff；
线高：100px；
文本对齐：居中；
}
.心脏：以前，
.心脏：之后{
位置：绝对位置；
内容：“；
左：50px；
排名：0；
宽度：50px；
高度：80px；
背景：红色；
-moz边界半径：50px 50px 0；
边界半径：50px 50px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
.心脏：之后{
左：0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o-变换原点：100%100%；
变换原点：100%100%；
}

---

Heart

快速搜索，可以看到一篇关于在@CSS-tricks.com上使用CSS创建形状的好文章

如果我们举一个如何创建一个心脏的例子，并对其进行一点扩展，我们可以得到下面的片段，它为您提供了一个心脏，它的开始只是一个边界

（函数（）{
var heart=document.querySelector（“#heart”）；
heart.addEventListener（'click'，函数（e）{
this.className+='已填充'
});
}());
#心脏{
位置：相对位置；
宽度：100px；
高度：90px；
文本对齐：居中；
字体大小：16px；
位置：相对位置；
}
#心距{
宽度：100%；
显示：块；
最高：50%；
利润上限：-16px；
线高：16px；
左：0；
右：0；
位置：绝对位置；
z指数：1；
}
#心，充满了，之前，
#心，充满了：之后{
背景色：红色；
}
#心脏：以前，
#心脏：之后{
位置：绝对位置；
内容：“；
左：50px；
排名：0；
宽度：50px；
高度：80px；
边框：1px纯红；
过渡：背景色。25秒到0秒；
-webkit过渡：背景色。25秒0秒；
-moz边界半径：50px 50px 0；
边界半径：50px 50px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
#心脏：之后{
左：0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o-变换原点：100%100%；
变换原点：100%100%；
}
#心脏：以前{
边界权：无；
边框底部：无；
}
#心脏：之后{
左边界：无；
边框底部：无；
}

嘿
使用css3的伪元素


.text{
位置：绝对位置；
颜色：#eee；
z指数：99；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
}
#心{
位置：相对位置；
宽度：100px；
高度：90px；
}
#心脏：以前，
#心脏：之后{
位置：绝对位置；
内容：“；
左：50px；
排名：0；
宽度：50px；
高度：80px；
背景：红色；
-moz边界半径：50px 50px 0；
边界半径：50px 50px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
#心脏：之后{
左：0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o-变换原点：100%100%；
变换原点：100%100%；
}

基础知识
为了让文本显示在心脏上，您需要将心脏容器设置为相对，将其中的文本设置为绝对，如下所示

我将
：before
和
：after
的边框设置为心脏的边框

填充的切换使用来自的功能


函数切换填充（heart，className）{
if（！hasClass（heart，className））{
addClass（心脏，类名）；
}否则{
removeClass（心脏，类名）；
}
}
函数addClass（el，类名）{
if（el.classList）{
el.classList.add（className）；
}否则{
el.className+=''类名称；
}
}
函数removeClass（el，类名）{
if（el.classList）{
el.classList.remove（className）；
}否则{
el.className=el.className.replace(
新的RegExp（“（^|\\b）”+className.split（“”）.join（“|”）+
“（\\b |$）”、“gi”）、”；
}
}
函数hasClass（el，类名）{
if（el.classList）{
返回el.classList.contains（className）；
}否则{
返回新的RegExp（“（^ |）”+类名+
“（|$）”和“gi”）.test（el.className）；
}
}
。不可选择{
-webkit用户选择：无；
-美方