The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Can someone please help me move curved SVG text?
ExistingProof
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th April 2024 - 09:49 PM