Text that weaves around in a circular motion

Greetings, I'm relatively new to coding but have made progress so far. I'm eager to learn how to wrap my text within a circle, ensuring it stays within the boundaries of the circular shape. Any guidance or tips on achieving this would be greatly appreciated. The code snippet can be accessed via the Google Drive link provided below - best viewed with Sublime Text.

Click here for the HTML file that can be opened using Sublime Text

Image showing text overflowing out of a circle versus how it should look when properly wrapped inside the circle.

Ensure to run the page in full screen for optimal viewing experience.

// JavaScript code snippet goes here...
// CSS styles for the node and label elements go here...
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg width="960" height="960"></svg>
htmlcssd3.jsword-wrap

Answer №1

With SVG lacking text wrapping capabilities, you can utilize the foreignObject element to mimic this functionality. Have you considered trying out foreignObjects? More information on how to implement it can be found here. By incorporating it, I managed to successfully wrap the text as needed. Take a look at the snippet below for a demonstration:

svg {
  width: 700px;
  height: 200px;
  background-color: #000;
  padding: 50px;
}
.circle {
  background-color: rgb(119, 119, 119);
  height: 100%;
  border-radius: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
.circle span {
  color: black;
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
  font-family: sans-serif;
  font-size: 18px;
  padding: 20px;
}
<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="200" height="200" x="0" y="0">
    <div class="circle">
      <span>paragraph</span>
    </div>
  </foreignObject>
  <foreignObject width="200" height="200" x="250" y="0">
    <div class="circle">
      <span>Here is a paragraph</span>
    </div>
  </foreignObject>
  <foreignObject width="200" height="200" x="500" y="0">
    <div class="circle">
      <span>Here is a paragraph that requires word wrap</span>
    </div>
  </foreignObject>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing a CSS image with absolute positioning on top of a responsive image

Is there a way to keep the balloon image position fixed in relation to the grid image when resizing it? The balloons Balloon1 and B2 are technically within grid 5 and 7, but if you resize the grid left or right, the balloons will go off-center. Do I requ ...

htmlcssimage

Aligning Bandcamp and Reverbnation iframes and DIVs to the center

[edit 3] - I am facing some trouble with the display of this code on Chrome, Sea Monkey, and Firefox. How can I fix this issue? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> <title>Pissi ...

iframehtmlcoding-stylecenter

The flow of data from the SQL database to the Flask/Jinja template seems to be blocked

My HTML page is rendering fine, but I'm having trouble displaying the database. The database is already set up, and I want to loop through it in the template, but nothing shows up. main.py: from flask import Flask, request, redirect, render_template ...

pythonhtmlmysqltemplatesflask

Bizarre bouncing dots created with CSS animations

This is the CSS class I created for my Loader: .loading{ color:black; position:fixed; width: 270px; height:100px; font-size:20px; top:0; bottom: 0; left: 0; right: 0; margin: auto; transition: 1s ease-out; opacity:1; } .loadin ...

css

Move the Material UI popover to the clicked icon's position

I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. https://i.sstatic.net/yvKjF.png Here is the code snippet that I have been using: {showPopOver &&a ...

cssreactjsmaterial-uipopover

What is the best way to resize SVG graphics effectively?

I am in need of creating a seating chart. I have generated an SVG with the seats. <div class="seats-map"> <svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300"> <g data-row ...

htmlcsssvg

Resolve background image alignment issue in Firefox browser for Bootstrap carousel

I am currently utilizing this particular bootstrap template. My goal is to have the carousel background images fixed, however, when I include the following CSS: background-attachment: fixed; like so: <div class="carousel-item active" style=&q ...

htmlcssbootstrap-4

Is it possible to divide an HTML document into separate files for structure and content?

In the world of software development, it's common knowledge that moving strings to separate files is a best practice. This makes it easier for translators and copyrighters to make modifications without having to delve into the code, and it streamlines ...

htmloptimizationseparation-of-concernsdesign-principles

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

Currently delving into the realm of JavaScript, transitioning from a Java/Clojure background, I am attempting to implement a basic thread-sleep feature that will display lines of text on the screen at one second intervals. Initially, I considered using t ...

javascripthtmlsettimeoutsetintervalthread-sleep

Tips for customizing the appearance of buttons in a JavaScript bxSlider

Take a look at my landing page: In the upper section, you'll find three buttons that allow you to switch between different slides. These buttons are named: credi5, credi10, and credi15. Now, I want to replace those buttons with images... specificall ...

javascripthtmlsliderbxslider

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

javascripthtml

Problems with alignment in Bootstrap4

I am currently using bootstrap 4 to style my website, and I am facing an alignment issue. I want my buttons to be aligned parallel to the date and time fields located above them. The Blue cross in the image indicates where my buttons are starting from, wh ...

htmlcssbootstrap-4

Issue with CSS File not being recognized by React Component

After using the webpack create-react-app with npx, I encountered an issue with my component styling. Despite having a CSS file named header.css in the src directory alongside Header.js, my component does not seem to be styled correctly. Here is how my comp ...

cssreactjs

Tips for transferring information in JavaScript games

While browsing an HTML-based website, I am able to send POST and GET requests. However, in a JavaScript game like agar.io, how can similar actions be performed? Specifically, when playing a popular game like agar.io, how is my game state (such as positio ...

javascripthtmlpost

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

htmlcss

Tips for expanding the dimensions of a text box within the filter menu

In my application, I am using a kendo grid with filterable set to true. The filtering functionality is working properly. However, when I click on the filter symbol, the filter menu opens and I noticed that the size of the text-box within the menu is too sm ...

csskendo-grid

HMTL and CSS: A centrally-aligned element is not appearing in the center correctly

Take a look at this link: http://jsfiddle.net/QbMmX/1/ You'll notice that the box (div element) is moving more to the left than the text. It doesn't center like the text does. Can you explain why this happens and suggest ways to fix it? ...

htmlcss

When deploying a website with the default Hugo theme on Netlify, I encountered a strange issue where the webpage appeared blank. Sur

After coming across a question similar to mine about creating a static page using blogdown with the same Hugo theme as the main site on Stack Overflow, I still find myself struggling to understand the solution provided. As an absolute beginner, I am curren ...

htmlrstudionetlifyhugoblogdown

Disappearing Act: The vanishing act of Bootstrap 4 navbar

Everything works perfectly on a large screen, but disappears when resizing. I haven't specified a height property for the navbar. Here's the Fiddle. I know this question has been asked many times before, but I have yet to find a solution that act ...

htmlcsstwitter-bootstrapbootstrap-4

What steps should I take to repair my image modal button?

Within my application, I have an image modal placed inside a header tag, along with a label. There is some space between the label and the image modal. However, when the application is run, the page appears in a fixed position, but the label message does n ...

cssasp.net