svg / snapsvg 创建弯曲的文本

Question

好吧，我对两者都比较陌生 svgand snap.svg。

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

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

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

如您所见，文字弯曲了。

我的最终目标是使用 snap.svg 允许用户弯曲文本，但我不太确定如何做到这一点。

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

Answer 1

您可以只使用一个 textpath 属性，它接受一个路径并沿着它放置字符串。

var s = Snap(500,500); 

var path = "M 100 200 C 200 100 300   0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";

var text = s.text(50,50,'Hi there, Im a textpath that curves along a path string')
            .attr({ 'textpath': path })

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

docs

Answer 2

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

svg / snapsvg 创建弯曲的文本

svg / snapsvg creating text that bends

javascript

svg

snap.svg