在javascript形状中放置文本？

我想知道是否有人能帮我。我想在我的网站上使用下面的JS提琴，但我想在心形中添加一些文字，有没有办法

HTML:

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
                  <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
                  <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
              </svg>
</div>

CSS:

---

将文本添加到svg下，将位置设置为绝对，将父位置设置为相对，并固定文本的位置。请参阅js小提琴：

CSS:

#container {
  position: relative;
  margin: 20px;
  width: 200px;
  height: 200px;
}

#text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50px;
  left: 0;
  text-align:center;
}

HTML:

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
                  <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
                  <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
  </svg>
  <p id="text">Loading...</p>
</div>

正在加载

在svg下添加文本，将位置设置为绝对，将父位置设置为相对，并固定文本的位置。请参阅js小提琴：

CSS:

#container {
  position: relative;
  margin: 20px;
  width: 200px;
  height: 200px;
}

#text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50px;
  left: 0;
  text-align:center;
}

HTML:

<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
                  <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
                  <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
  </svg>
  <p id="text">Loading...</p>
</div>

正在加载

您可以像这样使用svg文本

<text x="32" y="50" fill="red">Love</text>

爱情

---

x&y是文本位置

您可以像这样使用svg文本

<text x="32" y="50" fill="red">Love</text>

爱情

---

x&y是文本位置

谢谢。有没有办法不用X和Y自动将其居中？谢谢。有没有一种方法可以在没有X和Y的情况下自动将其居中？