时间戳

首页 > 解决方案 > 使用 JavaScript 在 HTML 中创建样式文本节点的 SVG 轮廓路径

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

问题描述

有没有办法使用 JavaScript（有或没有库）创建文本节点的 SVG 轮廓路径，可以设置样式？

我要从中创建 SVG 轮廓路径的文本： 样式化文本节点

我希望生成的 SVG 路径： 我想要的 SVG 路径大纲

标签： javascriptsvg

解决方案

您可以调查此来源= 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 Text

推荐阅读