使用JavaScript在HTML中创建样式化文本节点的SVG轮廓路径

Question

是否可以使用JavaScript（带有或不带有库）创建文本节点的SVG轮廓路径（可以设置样式）？

我要从中创建SVG轮廓路径的文本：

我希望生成

SVG路径：

Answer 1

您可以调查此来源= https://codepen.io/kevinfan23/pen/ZWZMWM

示例HTML代码=

			<svg id="Svg-html-logo" width="481px" height="143px" viewBox="0 0 481 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <defs>
			        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
			            <stop stop-color="#85D8CE" offset="0%"></stop>
			            <stop stop-color="#4B8EB3" offset="100%"></stop>
			        </linearGradient>
			    </defs>
			    <g id="Daily-UI-003" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-weight="normal" font-family="Lato-Regular, Lato" letter-spacing="3" font-size="120">
			        <g id="Svg.html-Shape" stroke="url(#linearGradient-1)" stroke-width="2" fill="#FFFFFF">
			            <text id="Svg.html">
			                <tspan x="3.77" y="118">Svg.html</tspan>
			            </text>
			        </g>
			    </g>
			</svg>

这个例子对您来说还不够。请在codepen.io中搜索有关SVG文本的信息