Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below.

The image consists of two lines of text wrapped around a circle:

HELLO_WORLD_1

HELLO_WORLD_2

I want to change the direction of "HELLO_WORLD_2" to be clockwise. How can I achieve this?

https://i.sstatic.net/SLWNS.png

<svg width="132" height="132">
  <defs>
    <path id="text-path" d="M66 126A60 60 0 1 0 66 6a60 60 0 0 0 0 120" fill="none"/>
  </defs>

  <text>
    <textPath xlink:href="#text-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">HELLO_WORLD_1 * HELLO_WORLD_2</textPath>
</text>
</svg>

Answer №1

Here's a concise solution:
To resolve this issue, you must separate the text and path into two sections. The upper portion of the text will adhere to the top path, while the lower section of the text will align with the bottom path.

<svg width="150" height="150" viewBox="-10 -10 150 150">
    <!-- sweep-flag="1" indicates Clockwise text direction -->
   <path id="top-path"  d="M6 66A60 60 0 1 1 126 66" fill="none" stroke="red"/>
  <!-- sweep-flag="0" implies Counterclockwise text direction -->
<path  id="bottom-path" d="M6 66A60 60 0 1 0 126 66" fill="none" stroke="blue"/>
 </svg>

The text segments both commence from coordinate point M6 66 and conclude at point 126 66. However, the upper segment travels in a clockwise direction with sweep-flag = "1", while the lower segment moves counterclockwise with sweep-flag = "0".

<svg width="150" height="150" viewBox="-10 -10 150 150">
  <defs> 
          <!-- sweep-flag="1" signifies Clockwise text direction -->
   <path id="top-path"  d="M6 66A60 60 0 1 1 126 66" fill="none" />
           <!-- sweep-flag="0" represents Counterclockwise text direction -->
<path  id="bottom-path" d="M6 66A60 60 0 1 0 126 66" fill="none" />
  </defs>
  <text dx="30" dy="-2">
    <textPath xlink:href="#top-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">HELLO_WORLD_1 </textPath>
</text> 
 <text dx="20" dy="10">
    <textPath xlink:href="#bottom-path" font-family="Manrope3-ExtraBold, Manrope3" font-size="10" font-weight="600" fill="#001A62" letter-spacing="3.14">* HELLO_WORLD_2</textPath>
</text> 
</svg>

In summary

The text will follow an arc from its starting point (Arc start) to the end point (Arc end). The specific path it takes from start to finish depends on the large-arc-flag and sweep-flag parameters.

Your selected text layout option - the red line at the bottom row

9.3.8. The elliptical arc curve commands

<path d="M6 66A60 60 0 1 1 126 66" /> 
<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />, where 
  • M mx,my – coordinates of the ellipse arc's starting point
  • A rx, ry - radii of the ellipse arc
  • x-axis-rotation – rotation angle of the ellipse relative to the current coordinate system's x-axis
  • large-arc-flag - determines whether most of the arc should be rendered (= 1) or not (= 0)
  • sweep-flag - dictates the arc drawing direction from start to end. With sweep-flag = 1, the arc is drawn clockwise; with sweep-flag = 0, it's counterclockwise.
  • x,y – coordinates of the ellipse arc's end point

Answer №2

Check out this code snippet:

<path id="text-path" d="M66 126A60 60 0 1 1 66 6a60 60 0 0 1 0 120" fill="none"/>

source: Changing textPath direction from counterclockwise to clockwise

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

Switch up the CSS variable within an embedded iframe

I'm in a predicament with a specific issue. I am currently utilizing Angular to incorporate an Iframe. Let's imagine the angular app as A and the Iframe as B. B is being loaded within A. Within B, I have utilized CSS variables to define colors. I ...

CSS3 animations: the speed of transitioning between animations is sluggish

The slider I created has animations that are taking too long to transition between slides. I have tried adjusting the properties, but I can't seem to find the right one to control the speed of the transitions. /* Keyframes */ @-webkit-keyframes anim ...

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

Wordpress Debacle: Bootstrap Columns Clash

Currently, I am in the process of designing a unique theme. In my code, I have implemented a condition that generates an additional div with the class "row" after every three posts or columns are created. Everything seems to be working smoothly, except f ...

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...

Tips for ensuring font-face displays correctly for every character

There seems to be a CSS clash that I cannot pinpoint on the site below: You can find the code snippet here: /*Font face settings for h3*/ @font-face { font-family: carrotflower; src: url('/wp-content/uploads/fonts/Carrotflower.eot') format(& ...

Having trouble retrieving cell values from a table using tr and td tags in C# Selenium is causing issues

I'm facing an issue where my code is unable to retrieve the cell value and instead throws an exception stating: "no such element: Unable to locate element: {"method":"xpath","selector":"html/body/div[2]/div[2]/table/tr[1]/td[0]}" Below is the HTML ma ...

Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

Is there a way to combine selectors effectively? <input type=number> <input type=date> I was able to successfully hide the arrows in a number field with the following code: input[type=number]::-webkit-inner-spin-button, input[type=number]::- ...

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Currently, I am in the process of developing a dynamic events calendar to showcase on a website homepage. The information displayed on this calendar is retrieved from a database using PHP. Additionally, I have implemented the Bootstrap framework (version 4 ...

Customize CSS styling

When it comes to the styling of my first line, I have a specific style in mind: * { text-align:left; } This style works well across most parts of the site as they are predominantly left aligned. However, there are few areas where I need the text alig ...

Unconventional choice for website navigation bar

I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the ...

Tips on positioning an element absolutely so that it stops right before another element as the screen width is adjusted

Imagine a scenario where there is a 'parent' block containing various elements, including a button. When the user clicks this button, a 'slide' element should appear and cover the parent block but only up to the button itself (as shown ...

Despite implementing the necessary middleware, the CSS file still refuses to load

My CSS files are not loading properly. When I inspect the element (F12) and go to Networks, my CSS file is not visible. I have added the middleware: app.use(express.static(path.join(__dirname, '/public'))); and required the path above it. I ha ...

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

Is the text in bold format or not detectable in contenteditable mode?

I am currently working on developing a custom text editor using the built-in contenteditable feature in HTML. I am trying to figure out how to determine whether the selected text is bold or not within the editor. This is what my current setup looks like: ...

The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

I've been working on creating a footer for my Angular application and here's the code for it: // HTML <footer class="footer"> // code for footer </footer> // LESS .footer { position: absolute; bottom: 0; width: 100% ...

Why does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: Belo ...

Create a fully responsive introduction page with three columns using Bootstrap, ensuring that the height of the

Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page. The concept for the intro page involves three columns displayed side b ...

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...