Text in SVG HTML

Asked

Viewed 478 times

0

I have the following HTML code:

<!DOCTYPE html>
<html>
<body>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 

</body>
</html>

Would you have some way of putting a text inside that SVG ?

I tried to do it this way:

<textPath xlink:href="#OdyssGlobalArea1">
    MENU
</textPath>
html svg

  • What you mean by "text within the SVG"?

  • There is, but what you want?

  • @hugocsl I am starting to use SVG "learning" and would like to know how far I could manipulate/use an SVG. I tried to put a text but I’m not getting it.

  • I think you are complicating things, look at the answer I left there, and on Textpath read here https://answall.com/questions/346357/howto make it anima%C3%A7%C3%a3o-com-svg-ou-css-de-a-text-walking-by-the-way

1 answer

2


Buddy just put the tag <text> within the SVG, it will function as an element with position:absolute, and you’ll need to use the X and Y to position it, or else you can use Transform/Translate right inside the SVG. I recommend you read this other answer that has some points about alignment and text-anchor tb Centralize elements of an SVG

Look here I took the very text that was inside and put the text tag and the X/Y

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    <text x="0" y="40">Sorry, your browser does not support inline SVG. </text>
</svg>

  • Thanks for the help

  • @Gabrielsilva without problems my dear, be sure to take a look at the links I quoted. Look here also that there is a lot of educational material there http://tutorials.jenkov.com/svg/index.html

  • 1

    Sure, thank you again.

Browser other questions tagged html svg

You are not signed in. Login or sign up in order to post.