CODEWITHSUNDEEP
javascriptsvg
Richard
Richard

Reputation: 7443

Creating SVG outline path of a styled text node in HTML using JavaScript

Is there any way to create an SVG outline path of a text node, which may be styled, using JavaScript (with or without library)?

Text from which I want to create an SVG outline path: Styled Text Node

SVG path I expect to be generated: SVG Path Outline I want

Upvotes: 0

Views: 597

Answers (1)

ht13
ht13

Reputation: 633

You can investigate this source= https://codepen.io/kevinfan23/pen/ZWZMWM

Example HTML Code =

			<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>

This example is not enough for you. Please search about SVG Text in codepen.io

Upvotes: 1

Related Questions