More text on a path practice


by Jeremy Caudle
notes

For today's practice I wanted to see how much trouble it would be to make an SVG in Illustrator, export the SVG, and then add text on a path within the SVG. It was rather easy, but this was a very simple example.

SVG Text on Path Practicing adding text to a path in SVG and styling it with CSS. Made a quick SVG within Illustrator to see how quickly I could attach text to a path within said SVG.

View the code:

HTML and JS 
<div class="codedoodle-block">

        <svg height="300" width="500">
            <title>SVG Text on Path</title>
            <desc>Practicing adding text to a path in SVG and styling it with CSS.</desc>
            <!-- start -->
            <path d="M242.5,242.5c0,6.627-5.373,12-12,12H61.833c-6.627,0-12-5.373-12-12V73.833c0-6.627,5.373-12,12-12H230.5
	c6.627,0,12,5.373,12,12V242.5z" fill="#00000055" />
            <defs>
<polyline id="pathfortext"  fill="none" stroke="#FFFFFF" points="65.167,235.167 144.833,81.5 224.834,236.167 71.167,236.167 "/>
            </defs>

            <use xlink:href="#pathfortext" />
            <text id="pathtext">
                <textpath xlink:href="#pathfortext">Made a quick SVG within Illustrator to see how quickly I could attach text to a path within said SVG.</textpath>
            </text>

            <!-- end -->
        </svg> 

    </div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:500px;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            perspective: 700px;
        }

        .card {
            border: solid 1px #dedede;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
            box-shadow: 0 .5rem .5rem rgba(0,0,0,.2);
            max-width: 88%;
        }

        #pathfortext {
            stroke: none;
            fill: none;
        }


        @keyframes textfx {
            from{letter-spacing: 0;}
            to{letter-spacing: -3px;}
        }

        #pathtext {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 16px;
            color: #777777;
            animation: textfx 3s ease-in-out 0s infinite alternate;
        }

Tags