好的，所以我对svg和snap.svg都比较陌生。
但是，我正在尝试不同的功能以及如何创建各种不同的text元素。
普通文本不是一个挑战，但是我开始怀疑如何制作实际弯曲的文本？
比如说我想创建一个这样的文本：
如您所见，文本弯曲。
我的最终目标是使用snap.svg允许用户弯曲文本，但是我不确定如何执行此操作。
有没有人尝试弯曲文字并能够指出正确的方向？
最佳答案
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