javascript - svg/snapsvg 创建弯曲的文本

Question

好吧，我对这两个都比较陌生 svg和 snap.svg .

不过，我正在尝试不同的功能以及如何创建各种不同的 text 元素。

普通文本不是挑战，但我开始想知道如何制作真正弯曲的文本？

例如我想创建这样的文本:

如您所见，文字弯曲了。

我的最终目标是使用 snap.svg允许用户弯曲文本，但我不太确定该怎么做。

有没有人尝试过弯曲文本并能为我指明正确的方向？

Answer 1

SVG 是定义具有弯曲尺寸的路径所必需的。

举个例子:

<svg height="70" width="300">
  <defs>
    <path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
  </defs>
  <rect x="0" y="0" height="70" width="300" fill="#292425" />
  <text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
    <textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
  </text>
</svg>

更新:

这是一个用户可以实时弯曲文本的简单示例。

使用 VanillaJS (Javascript) 和 Snap.svg。

(function() {
  var orientation = document.getElementById("orientation");
  orientation.addEventListener("change", function() {
    bendText(this.value);
  });

  function bendText(value) {
    var snap = Snap("#myTextPath");
    snap.attr("d", "M 30 55 q 100 " + value * -1 + " 240 0");
  }
})();

input[type=range][orient=vertical] {
  writing-mode: bt-lr;
  /* IE */
  -webkit-appearance: slider-vertical;
  /* WebKit */
  width: 8px;
  height: 175px;
  padding: 0 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<input id="orientation" type="range" orient="vertical" value="46" max="46" min="-46" />
<svg height="70" width="300">
  <defs>
    <path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
  </defs>
  <rect x="0" y="0" height="70" width="300" fill="#292425" />
  <text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
    <textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
  </text>
</svg>

Demo