我想把我的心形变成三角形。但无法获取路径 svg 代码？

Question

我有这个心形，带有一些路径坐标。但我希望有一个三角形，但我能够找到正确的坐标代码。有人可以帮我吗？那么，其中一个心形可以是三角形吗？

尝试用这个三角形代码更改心形代码：M 6 3 L 0 12 H 12 Z。但是三角形不可见或不显示形状？

希望得到您的帮助。谢谢！

const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});

/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M-400 32 v-150 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0 z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • </textPath>
          </text>
      </svg>
  </div>

Answer 1

到目前为止，我得到了这个三角形。你应该看看这个link 并了解更多关于路径的信息。并且还来自 Danny '365CSI' Engelman 的评论 修补这个 svg 编辑器link 您应该了解路径变量是如何工作的。这里的问题是，当您更改路径变量时，您必须牢记 x y 轴，否则它不会显示出来。

const textPath = document.querySelector("#textPath");

const a = document.documentElement,
  b = document.body,
  st = "scrollTop",
  sh = "scrollHeight",
  startOffset = 0;

const offsetOnScroll = (percent, startOffset) =>
  textPath.setAttribute("startOffset", percent * 10 + startOffset);

textPath.setAttribute("startOffset", startOffset);

document.addEventListener("scroll", (event) => {
  let percent = ((a[st] || b[st]) / ((a[sh] || b[sh]) - a.clientHeight)) * 100;
  window.requestAnimationFrame(() => offsetOnScroll(percent * -1, startOffset));
});


/* number two; */
const textPathB = document.querySelector("#textPathB");
const aB = document.documentElement,
    bB = document.body,
    stB = "scrollTop",
    shB = "scrollHeight",
    startOffsetB = 0;
const offsetOnScrollB = (percent, startOffsetB) =>
    textPathB.setAttribute("startOffset", percent * 10 + startOffset);
    textPathB.setAttribute("startOffset", startOffset);
document.addEventListener("scroll", (event) => {
    let percent = ((aB[stB] || bB[stB]) / ((aB[shB] || bB[shB]) - aB.clientHeight)) * 100;
window.requestAnimationFrame(() => offsetOnScrollB(percent * -1, startOffset));
});

/* heart shape */
.shape {
  fill: none;
  /* stroke: white; */
}

#heart {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPath {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container1 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

/* 2 heart shape */
.shape1 {
  fill: none;
  /* stroke: white; */
}

#hearttwo {
  width: 90vmin;
  height: auto;
  object-fit: contain;
  /* overflow: hidden; */
}

#textPathB {
  /* The font-size is really hacky, sorry :( */
  font-family: 'Till-Normal';
  --sizefactor: 1.112;
  font-size: calc(1em * var(--sizefactor));
  letter-spacing: calc(1em * var(--sizefactor));
  fill: var(--purple-full);
  font-weight: 800
}

.container2 {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: palevioletred; */
}

<!-- Heart -->

  <div class="container1">
      <svg id="heart" data-name="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape" id="shape" d="M -200 -150 V 50 H -400 Z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape" id="textPath"> THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • THE BLISS OF ADOPTION  • </textPath>
          </text>
      </svg>
  </div>
  <!-- Triangle -->
  <div class="container2">
      <svg id="hearttwo" data-name="hearttwo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

          <path class="shape1" id="shape1" d="M -200 -150 V 50 H -400 Z" transform="rotate(225, 0, 0)"/>

          <text font-family="arial">
              <textPath xlink:href="#shape1" id="textPathB"> THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • THE ULTIMATE FAIRYTALE • </textPath>
          </text>
      </svg>
  </div>