html - SVG curved text inside path -
hello guys created circle 5 segments svg, im trying add text inside segments can't work right.
this im trying text curved , centered inside path
this im getting: enter image description here
this code far, suggestions?
<svg viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> <a xlink:href=""> <path class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' > </path> <text font-family="verdana" font-size="15" stroke="red";> <textpath xlink:href="#f1"> go up, go down, again </textpath> </text> </a> <a xlink:href="" > <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> </a> <circle class="cente" cx='55' cy='55' r='35' ></circle> <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> </svg>
you using 1 of circle segment paths path text. see below.
path, circle { fill: transparent; stroke: black; }
<svg viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> <a xlink:href=""> <path class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' > </path> <text font-family="verdana" font-size="4" fill="red";> <textpath xlink:href="#f1"> go up, go down, again </textpath> </text> </a> <a xlink:href="" > <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> </a> <circle class="cente" cx='55' cy='55' r='35' ></circle> <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> </svg>
obviously path not appropriate. need add new, simpler, path goes left of segment right of segment. you'll need each segment.
alternatively, can use path forms entire circle, re-use path each segment. specifying different startoffset
attribute each, corresponding positions around circle.
in following example, create circular path radius of 40.
<path id="clockwise" d="m55,15 a40,40 0 0 1 55,95 a40,40 0 0 1 55,15"/>
then use same path each segment. make centering text in each segment easy, use attribute text-anchor="middle"
result in text being centred on startoffset
specify.
we can use percentages specify how far around our circular path want text start. 0% start of path (also left side of first segment), 20% start of second segment, etc.
so, first segment want text centred @ point halfway in, use startoffset="10%"
. subsequent segments, use "30%", "50%" etc.
in example below, i've done first 3 segments. i'll leave last 2 finish.
to learn more how <textpath>
works, read relevant section of svg specification.
path, circle { fill: transparent; stroke: black; }
<svg viewbox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> <defs> <!-- circular path radius of 40 --> <path id="clockwise" d='m55,15 a40,40 0 0 1 55,95 a40,40 0 0 1 55,15' transform="rotate(-54,55,55)"/> </defs> <a xlink:href=""> <path class="frag logoa" id="f1" data-link="1" d='m55,55 l14.54915028125263,25.61073738537635 a50,50 0 0,1 70.45084971874736,7.447174185242318z' > </path> <text font-family="verdana" font-size="6" fill="red";> <textpath xlink:href="#clockwise" startoffset="10%" text-anchor="middle"> cloud marina </textpath> </text> </a> <a xlink:href="" > <path class="frag logoa" data-link="2" d='m55,55 l70.45084971874736,7.447174185242318 a50,50 0 0,1 105,54.999999999999986z' ></path> <text font-family="verdana" font-size="6" fill="red";> <textpath xlink:href="#clockwise" startoffset="30%" text-anchor="middle"> order </textpath> </text> </a> <a xlink:href="" > <path class="frag logoa" data-link="3" d='m55,55 l105,55 a50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> <text font-family="verdana" font-size="6" fill="red";> <textpath xlink:href="#clockwise" startoffset="50%" text-anchor="middle"> earn </textpath> </text> </a> <a xlink:href="" > <path class="frag logoa" data-link="4" d='m55,55 l70.45084971874738,102.55282581475768 a50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> </a> <a xlink:href="" > <path class="frag logoa" data-link="5" d='m55,55 l14.549150281252636,84.38926261462366 a50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> </a> <circle class="cente" cx='55' cy='55' r='35' ></circle> <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> </svg>
Comments
Post a Comment