Html - How to make a textPath but for image not path in svg

AlexAntonov
July 19, 2023
131 views
0 votes
2 Answers

I’m doing pretty simple svg rendering, like

<svg>
  <image href="rounded_image.svg" width="35" height="35" />
</svg>

where rounded image looks like this

<svg width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_ddiii_724_876)"><path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint0_radial_724_876)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint1_linear_724_876)" fill-opacity="0.5" style="mix-blend-mode:overlay"/></g><defs><filter id="filter0_ddiii_724_876" x="-30" y="-30" width="682" height="682" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="10" dy="10"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_724_876"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="30" dy="30"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0125 0 0 0 0 0.00641447 0 0 0 0 0 0 0 0 0.3 0"/><feBlend mode="normal" in2="effect1_dropShadow_724_876" result="effect2_dropShadow_724_876"/><feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_724_876" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-25" dy="-25"/><feGaussianBlur stdDeviation="47"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.554735 0 0 0 0 0.232989 0 0 0 0 0 0 0 0 0.58 0"/><feBlend mode="normal" in2="shape" result="effect3_innerShadow_724_876"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="12.5"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/><feBlend mode="overlay" in2="effect3_innerShadow_724_876" result="effect4_innerShadow_724_876"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-40" dy="-40"/><feGaussianBlur stdDeviation="16"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend mode="overlay" in2="effect4_innerShadow_724_876" result="effect5_innerShadow_724_876"/></filter><radialGradient id="paint0_radial_724_876" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(296 296) rotate(-60.3555) scale(283.048 283.048)"><stop stop-color="#FFD481"/><stop offset="0.617362" stop-color="#FFDB8E"/><stop offset="1" stop-color="#FCD48C"/></radialGradient><linearGradient id="paint1_linear_724_876" x1="500.5" y1="547" x2="57" y2="51.5" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="white"/></linearGradient></defs></svg>

So I want to add a curved text to the bottom of this image to make it looking like this

Text should be curved and placed on the bottom of image. I’ve tried to do this using textPath, like this:

<svg>
  <image id="dough" href="rounded_image.svg" width="35" height="35" />
  <text>
    <textPath href="#dough">
      My custom text
    </textPath>
  </text>
</svg>

But obviously no luck displaying text, at all.
I’d like to see good implementation, js answers are acceptable too – I’m using React to render svg component

Answers

I’m no expert at SVGs, but here’s my solution (Stackoverflow doesn’t seem to display it correctly for some reason):

svg {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<svg width="652" height="652" viewBox="0 0 652 652" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_ddiii_724_876)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint0_radial_724_876)"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint1_linear_724_876)" fill-opacity="0.5" style="mix-blend-mode:overlay"/>
    </g>
    <defs>
      <filter id="filter0_ddiii_724_876" x="-30" y="-30" width="682" height="682" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dx="10" dy="10"/>
        <feGaussianBlur stdDeviation="5"/>
        <feComposite in2="hardAlpha" operator="out"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_724_876"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dx="30" dy="30"/>
        <feGaussianBlur stdDeviation="16"/>
        <feComposite in2="hardAlpha" operator="out"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.0125 0 0 0 0 0.00641447 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow_724_876" result="effect2_dropShadow_724_876"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_724_876" result="shape"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dx="-25" dy="-25"/>
        <feGaussianBlur stdDeviation="47"/>
        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.554735 0 0 0 0 0.232989 0 0 0 0 0 0 0 0 0.58 0"/>
        <feBlend mode="normal" in2="shape" result="effect3_innerShadow_724_876"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset/>
        <feGaussianBlur stdDeviation="12.5"/>
        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
        <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
        <feBlend mode="overlay" in2="effect3_innerShadow_724_876" result="effect4_innerShadow_724_876"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dx="-40" dy="-40"/>
        <feGaussianBlur stdDeviation="16"/>
        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="overlay" in2="effect4_innerShadow_724_876" result="effect5_innerShadow_724_876"/>
      </filter>
      <radialGradient id="paint0_radial_724_876" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(296 296) rotate(-60.3555) scale(283.048 283.048)">
        <stop stop-color="#FFD481"/>
        <stop offset="0.617362" stop-color="#FFDB8E"/>
        <stop offset="1" stop-color="#FCD48C"/>
      </radialGradient>
      <linearGradient id="paint1_linear_724_876" x1="500.5" y1="547" x2="57" y2="51.5" gradientUnits="userSpaceOnUse">
      <stop/>
      <stop offset="1" stop-color="white"/>
    </linearGradient>
  </defs>
</svg>

<svg class="customText" viewBox="0 0 800 652">
  <path id="MyPath" fill="none"
      d="M 157,295 a 295,295 0 0 0 590,0" />
  <text>
    <textPath startOffset="50%" text-anchor="middle" href="#MyPath">my custom text</textPath>
  </text>
</svg>

Most of it is your SVG, but at the bottom, I’ve just added this bit of code:

<svg class="customText" viewBox="0 0 800 652">
  <path id="MyPath" fill="none"
      d="M 157,295 a 295,295 0 0 0 590,0" />
  <text>
    <textPath startOffset="50%" text-anchor="middle" href="#MyPath">my custom text</textPath>
  </text>
</svg>

and the CSS to format it!

Hope this helps 🙂

I will try to come back later but here is a "partial fix" since the text is on the wrong side/direction and I don’t have more time to update the text flow to fix this super fast update ATM sorry for that.

Changed the SVG fill="#00008B" to have a color (I randomly choose a dark blue)
Added the <path id="textcircle" ... with that id
Added <style> text { for the text size etc.
Used that case sensitive ID: <textPath xlink:href="#textcircle">
Note some updates are in defs and some outside of it.
added the xlink namespace to the svg: xmlns:xlink="http://www.w3.org/1999/xlink"

<svg width="652" height="652" viewBox="0 0 652 652" fill="#00008B" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g filter="url(#filter0_ddiii_724_876)">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint0_radial_724_876)"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M296 390C347.915 390 390 347.915 390 296C390 244.085 347.915 202 296 202C244.085 202 202 244.085 202 296C202 347.915 244.085 390 296 390ZM296 590C458.372 590 590 458.372 590 296C590 133.628 458.372 2 296 2C133.628 2 2 133.628 2 296C2 458.372 133.628 590 296 590Z" fill="url(#paint1_linear_724_876)" fill-opacity="0.5" style="mix-blend-mode:overlay"/>
    </g>
    <defs>
        <filter id="filter0_ddiii_724_876" x="-30" y="-30" width="682" height="682" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dx="10" dy="10"/>
            <feGaussianBlur stdDeviation="5"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_724_876"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dx="30" dy="30"/>
            <feGaussianBlur stdDeviation="16"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.0125 0 0 0 0 0.00641447 0 0 0 0 0 0 0 0 0.3 0"/>
            <feBlend mode="normal" in2="effect1_dropShadow_724_876" result="effect2_dropShadow_724_876"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_724_876" result="shape"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dx="-25" dy="-25"/>
            <feGaussianBlur stdDeviation="47"/>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.554735 0 0 0 0 0.232989 0 0 0 0 0 0 0 0 0.58 0"/>
            <feBlend mode="normal" in2="shape" result="effect3_innerShadow_724_876"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset/>
            <feGaussianBlur stdDeviation="12.5"/>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
            <feBlend mode="overlay" in2="effect3_innerShadow_724_876" result="effect4_innerShadow_724_876"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dx="-40" dy="-40"/>
            <feGaussianBlur stdDeviation="16"/>
            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
            <feBlend mode="overlay" in2="effect4_innerShadow_724_876" result="effect5_innerShadow_724_876"/>
        </filter>
        <radialGradient id="paint0_radial_724_876" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(296 296) rotate(-60.3555) scale(283.048 283.048)">
            <stop stop-color="#FFD481"/>
            <stop offset="0.617362" stop-color="#FFDB8E"/>
            <stop offset="1" stop-color="#FCD48C"/>
        </radialGradient>
        <linearGradient id="paint1_linear_724_876" x1="500.5" y1="547" x2="57" y2="51.5" gradientUnits="userSpaceOnUse">
            <stop/>
            <stop offset="1" stop-color="white"/>
        </linearGradient>
        <path id="textcircle" d="M240.2, 382.4c-74.8, 0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5, 135.5 S318, 382.4, 243.2, 382.4z"
        transform="rotate(90 250 300)" />
         <style>
            text { 
                font-size: 32px;
                font-family: Franklin Gothic, sans-serif;
                font-weight: 900; 
                text-transform: uppercase;
                letter-spacing: 10px;
                z-index: -100;
            }
        </style>
    </defs>
    
    <text dy="-100" textLength="500">
        <textPath xlink:href="#textcircle">
            Delicious Glazed Donut
        </textPath>
    </text>
</svg>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a textPath but for image not path in svg

Answers