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?

<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

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

Variations in Angular scope variable behavior

Code Snippet in HTML <input ng-model="test1.param"> <input ng-model="test2"> Code Snippet in Controller $scope.test1 = { param: null }; $scope.test2 = null; Upon entering text in both input fields: The value of $scope.test1.param changes ...

The select2 plugin seems to be having trouble recognizing the Li click functionality

I have a select menu that is using the select2 plugin. I am trying to add a class to the <select> element when a menu option is clicked, but it doesn't seem to be working as expected even after testing with an alert. https://jsfiddle.net/ysm4qh ...

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

Exploring the possibilities: Utilizing HTML5, File API, and jQuery to

I have a form displayed in a dialog and it includes a "submit" button which, when clicked, utilizes jQuery to send the form data to the server via AJAX. However, I encountered an issue where the uploaded file was always null. After researching on Google, I ...

Incorporate multiple array values within an if statement

Looking to dynamically change the background image of an element based on specific strings in the URL. Rather than changing it for each individual term like "Site1", I want to be able to target multiple words. Here's what I've tried: var urlstri ...

Utilize JQuery variables for toggling the visibility of various DIV elements

On my webpage's splash page, there are 4 divs but only the home div is initially visible. The other three are hidden. Each of these divs has a button associated with it that triggers a jquery click event to swap out the currently visible div for the ...

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

Arrange various numbers in a single row to be in line with

I'm utilizing bootstrap in an attempt to design the layout depicted below: Here is a simplified version of my code: .curr { font-size: 12px; font-weight: 700; letter-spacing: .5px; } .price { -webkit-tap-highlight-color: transparent; fo ...

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

The issue of the JQuery method failing to function properly on a button arises when the button is added

Upon loading a HTML page containing both HTML and JavaScript, the code is structured as shown below: <button id="test"> test button </button> <div id="result"></div> The accompanying script looks like this (with jQuery properly in ...

"Struggling to upload an image using Selenium WebDriver because the element is not visible? Here are

ff.findElementByxpath(//object[@ id='slPlugin2']).click(); The element is not being recognized. Can you also provide guidance on how to upload media through webdriver? <table class="imgTable photoTable" cellspacing="0"> <div id="file ...

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

Dealing with a passed EJS variable in string form

When working with passed data in ejs, I usually handle it like this and it works perfectly: let parsed_json = JSON.parse('<%-JSON.stringify(passed_data)%>'); However, I encountered a problem when trying to dynamically pass a string variabl ...

Anticipated the server's HTML to have a corresponding "a" tag within it

Recently encountering an error in my React and Next.js code, but struggling to pinpoint its origin. Expected server HTML to contain a matching "a" element within the component stack. "a" "p" "a" I suspect it may be originating from this section of my c ...

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

Update the content on the webpage to display the SQL data generated by selecting options from various dropdown

My database table is structured like this: Name │ Favorite Color │ Age │ Pet ────────┼────────────────┼───────┼─────── Rupert │ Green │ 21 │ ...

Tips for choosing an attribute within a list with a CSS selector and Selenium

Is it possible to use a css selector to target an element within a <li> using Selenium? Below is the code snippet in question: <div id= "popup"> <ul> <li> <div id="item" option= "1" ....> </div> < ...