Text on a path in SVG


by Jeremy Caudle
code

I wanted to do a quick refresher on how to add text that displays along a path in an SVG. While working on this, I came across something I had not encountered before. When placing a link within the text, in order to alter it's color you have to modify its fill attribute, not its color.

Text on a path inside an SVG. I couldn't recall how this was done, so I checked out this helpful post on CSS-Tricks, Curved Text Along Path.

View the code:

HTML and JS 
<div class="code-block">
            
<svg version="1.2" id="containerSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 320" >
    <path fill="transparent" id="circle" d="M310,162c0,80.081-64.919,145-145,145c-80.082,0-145-64.919-145-145C20,81.918,84.918,17,165,17C245.081,17,310,81.918,310,162z"/>
    <text width="240">
        <textPath href="#circle">
        Text on a path inside an SVG. I couldn't recall how this was done, so I checked out this helpful post on CSS-Tricks, <a href="https://css-tricks.com/snippets/svg/curved-text-along-path/" id="svg-link">Curved Text Along Path</a>.
        </textPath>
    </text>
</svg>

        </div>
CSS 
@keyframes rotate-slowly {
                0% { transform: rotate(0deg);}
                100% { transform: rotate(359deg);}
            }

            .code-block {
                width: clamp(16em, 90vw, 60em);
                margin: 2rem auto;
                text-align: center;
            }

            #containerSVG {
                width: 320px;
                height: 320px;
                margin: 0 auto;
                animation-name: rotate-slowly;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-fill-mode: forwards;
                animation-duration: 60s;
                transform-origin: center center;
								font-size: 14px;
            }

            #svg-link {fill: red; transition: fill .25s ease-out;}
            #svg-link:hover, #svg-link:focus {fill: rgb(153, 0, 0);}

Tags