Can someone please help me move curved SVG text? |
Can someone please help me move curved SVG text? |
ExistingProof |
Nov 19 2020, 08:01 AM
Post
#1
|
Group: Members Posts: 1 Joined: 19-November 20 Member No.: 27,646 |
I tried wrapping the <path> in <g> and using <g transform="translate(x,y)"> but it didnt work... I am trying to move the cruved text inside the loading <path> icon. HereĀ“s the code:
<div style="float:left;"> <svg height="310" width="302" > <defs> <g transform="translate(150,50)"> <path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0"/> </defs> <text x="0" y="0" style="stroke: #000000;"> <textPath xlink:href="#myTextPath" > Text along a curved path... </textPath> </text> <path d="m160 24c78 0 142 64 142 144 0 78-64 142-142 142-80 0-144-64-144-142 0-88 64-136 104-144v32c-22 0-72 50-72 112s50 110 112 110 110-50 110-110c0-62-50-112-110-112z"> </svg> </div> Attached image(s) |
Lo-Fi Version | Time is now: 25th April 2024 - 09:49 PM |