0

Found many ways to draw a circle with text inside. E.g How to draw a circle with text in the middle?

But all do not work with longer text. Based on the text input, the text should always be fit into the circle. If the text is longer text should be getting smaller to fit into the circle. If text is multiline, it should also always fit into the circle.

Want to display it on a website, so html/css and similar is fine. PHP would also be ok. Circle should always be a fix size 100px for up to 6 words or in 600px for more text.

Tried some things like this without luck

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
  Sorry, your browser does not support inline SVG.
  <text fill="#000000" font-size="18" font-family="Verdana"
         x="15" y="60">Text <br>more Test</text>
</svg>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
sabrakadabra
  • 47
  • 4
  • PHP a server sided language if you just need scripting is the wrong language. You proberly should look more towards JS/jQuery instead. – tacoshy Mar 12 '21 at 20:48
  • Some comments: 1. Don't use a `
    ` element in SVG. Use a [](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan) element instead. 2. You will need a [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute for the svg element. You will change the value of the viewBox attribute according to the calculated width of the text. Please take a look at this demo: https://codepen.io/enxaneta/pen/bdd4c7e3611736494638a8673e6fd738?editors=1011     – enxaneta Mar 13 '21 at 08:10

0 Answers0