Is it possible to switch the direction of the textPath from counterclockwise to clockwise?

Is it possible to change the direction in which SVG wraps text around a path from anti-clockwise to clockwise? How can we make the floor of the text stick to the circumference rather than the ceiling?

.textspace {
  letter-spacing: 5px;
  font-family: fantasy;
  font-size: 50px;
  writing-mode: tb;
}

.curved-text {
  font-family: fantasy;
  font-size: 20px;
  letter-spacing: 5px;
  word-spacing: 10px;
}
<svg height="400" width="400">
  <defs>
    <path   d="M60,60
          A50,50
          0 
          1,0
          61,60"
          stroke="black"
          stroke-width="2"
          fill="none"
          id="tracker-path"/>
  </defs>
  
  <text x="50" y="50" class="curved-text">
    <textPath xlink:href="#tracker-path">
      Tracking successful.
    </textPath>
  </text>
</svg>

Answer №1

I've found the solution to this issue. Simply change the value of sweep-flag from 0 to 1. This will reverse the direction of the path.

.textspace
{
letter-spacing: 5px;
font-family: fantasy;
font-size: 50px;
writing-mode: tb;
}

.curved-text
{
font-family: fantasy;
font-size: 20px;
letter-spacing: 5px;
word-spacing: 10px;
}
<svg height="400" width="400">
<defs>
<path d="M80,160
A50,50
0 
1,1
81,160"
stroke="black"
stroke-width="2"
fill="none"
id="tracker-path"/>
</defs>
<text x="50" y="50" class="curved-text">
<textPath xlink:href="#tracker-path">
Tracking successful.
</textPath>
</text>
</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

The positioning of sub-menu items is incorrect

I would like the subitems in the menu to be positioned directly under the main menu items instead of being slightly offset to the right. CSS ul#menu { float:left; width:100%; margin:0; padding:0; list-style-type:none; background-c ...

Retrieve information from ngResource and then connect the output to the display

I am currently working on a project using AngularJS. At the moment, I am using ngResource to retrieve JSON data from a static file, with plans to potentially switch to a database in the future. In my approach, I have set up a controller to call the servic ...

The function assigned to [variable].onclick is not being executed, despite no errors being displayed in the console

I'm new to javascript and I'm looking for help with a simple task. I want to create a code that when clicking on an image, it will open in a modal. This feature is important for viewing full-size images on my portfolio. Although there are no erro ...

In reference to a tiling background image that is not fully tiling

After lurking on this website for several months and finding valuable information through searches, I've decided to make my first post. Please forgive me if I'm not following the proper protocol. :) I've encountered an issue for which I can& ...

When hovering over the label area, the entire rectangle will be highlighted

Could someone please assist with highlighting the entire row of the parent for the drop down feature? In the given scenario, level1 and level23 should be highlighted like the child items are. The goal is to highlight the entire row with the entire width. ...

I am currently in the process of developing a petite website with Angular. Within the app component, I have integrated the <app-navbar> element. However, I have noticed that when I scroll through the

This is the typical appearance When I scroll up, a space appears at the top of the navbar. The same issue occurs in the footer as well. I used background color in style.css for reference. How can I resolve this problem? I need the components to stay fixed ...

Customizing the select2 plugin in jQuery - A user-friendly alternative for select boxes

I am currently seeking a method to personalize the appearance of the Select2 plugin within a project. Although I have reviewed the documentation, I was unable to locate specific instructions on how to modify the styling of the select box. Please refer to ...

What is the best way to eliminate unexplained spacing at the bottom of a webpage using CSS?

I am struggling to create a basic webpage using Bootstrap and D3, and I can't seem to figure out how to remove the excess whitespace at the bottom. Any tips on how to resolve this issue would be greatly appreciated. I attempted to set the min-height ...

Tips for maximizing the height of the "container"

Below is the code snippet that I am working with. I am trying to increase the height of the "container" class, but I have been unsuccessful in finding a solution on Google. Can someone please review my code and provide guidance on how to achieve this? < ...

Transformation and swapping between two distinct visuals

In this scenario, there are two images: a boat and a plane. The specific effect desired is as follows: The boat should animate from left to right, while the plane remains hidden. Once the boat reaches the middle of the screen, it should disappear and the p ...

Ways to eliminate the ul elements from the result of a radiobuttonlist

As part of my project, I developed a unique custom field type known as RadioList. This RadioList class is an extension of the RadioButtonList class and utilizes repeatlayout UnorderedList. My goal is to eliminate the <ul> and <li> tags from th ...

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

Creating a seamless top border that remains unaffected by border radius

I'm currently working on mimicking the style of Google Calendar, and I've encountered an issue with the text input box. When clicked, it should look like this: https://ibb.co/6Hqrnt4 However, what I've created ends up looking like this: htt ...

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

Steps for transferring a checked statement from an HTML document to a JavaScript file

Struggling to transfer checked statements from HTML to JS file {{#each readValues }} <br> Plug: {{@index}} => {{this}} <input type='checkbox' class="plug" onclick="sendData();" /> {{/each}} The code above is written i ...

Tips for extracting tables from a document using Node.js

When converting an XML document to JSON using the xml-js library, one of the attributes includes HTML markup. After parsing, I end up with JSON that contains HTML within the "description":"_text": field. { "name": { ...

Launch in a new window using JavaScript

Check out my interactive map here. Currently, when I click on different sections of the map, the target page opens in the same window. However, I would like it to open in a new window instead. <iframe src="http://bluewingholidays.com/map/map.html ...

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...