Changing the direction of SVG text-path on a semi-circular element

I'm struggling to make a text-path inside an SVG follow the curve of a half circle. Unfortunately, I can't seem to get it to start at the correct point.

This is how it's currently implemented in my project:

<svg viewBox="0 0 500 500">
      <path fill="transparent" id="curve" d=" M 400 0 A 200 197 0 1 1 400 -7" />
      <text x="6" width="500">
        <a href='https://google.com'><textPath href="#curve">
          Test text direction
        </textPath></a>
      </text>
    </svg>

Take a look at this image https://ibb.co/cv6vWZG to see what I'm aiming for (white text) and what I'm actually getting (black text).

Answer №1

https://i.sstatic.net/Py1hu.jpg

The content - Test text direction is positioned along the curve starting from the initial point specified in the path equation indicated by the M(move) command. To alter the starting point of the text placement, you must switch the positions of the beginning and end of the curve.

Original Configuration:

d=" M 400 0 A 200 197 0 1 1 400 -7"

New Configuration:

d=" M 0 0 A 200 200 0 0 0 400 0"

<tspan dy="-5" adjusts the distance of the text from the curve

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
            <textPath   xlink:href="#curve">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
        </text> 
      </a>
</svg>

Adjusting the position of the text relative to the start of the curve - startOffset="40%"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="40%">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</svg>

Update

Is there a more precise method to center the text on the curve rather than relying on 40% guesswork?

Add startOffset="50%" text-anchor="middle"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="50%"  text-anchor="middle" >
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</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

What is the best way to vertically align the dropdown button with the other text boxes?

I'm currently utilizing a basic bootstrap template from getbootstrap.com. I am having trouble properly aligning the account type dropdown in this section. Additionally, the dropdown list items are not correctly aligned with the dropdown button. Any as ...

Combining multiple PNG images onto a base image in PHP

I need assistance in merging 24 images with single dashes highlighted into a base circle image using PHP GD, JS or CSS. All images are in PNG format. Your help would be greatly appreciated. ...

Tips for updating the color of a chosen item with Material UI

As a newcomer to material ui, I am trying to figure out how to change the color of an item when it is clicked. Currently, it is displaying in blue with a black border, but I would like it to appear in a more subtle grey color without the black border. Can ...

Handling XMLHttpRequest Errors in React Native with Websockets (sockets.io)

Having some difficulty with setting up React-Native and sockets.io. I have a server running sockets.io and want to establish a connection through React-Native (Android version). However, when trying to execute the connection, I encounter the following erro ...

Using identical CSS styles across various classes in material UI

Three classes have been defined with identical CSS properties. const useStyles = makeStyles((theme) => ({ classA: { color: 'green' }, classB: { color: 'green' }, classC: { color: 'green' } }) Is there a way to combin ...

Sliding Menu with jQuery

My goal is to create a dynamic menu that reveals sub-menu items by sliding them down and changing the background color upon clicking. I am currently using the HTML code displayed below, with the sub1 and sub2 elements initially hidden using display:none; ...

Display toolbar title on small screens in separate lines

Recently, I encountered an issue while using v-toolbar in my vue app. Despite my efforts, I couldn't find a way to split the title into multiple lines on small screens. Currently, it displays as "Secti...." on smaller devices. Can anyone assist me wit ...

Unable to execute action in Jest

Our React app includes a cart component: import { useDispatch, useSelector } from "react-redux"; import ItemList from "./ItemList"; import { clearCart } from "../slice/cartSlice"; const Cart = () => { const dispatch = useDispatch(); const cartItems ...

Having trouble changing the state within React's useEffect() when using an empty dependencies array? Socket.io is the cause

I have a question regarding the access of allUserMessages from my state within useEffect without anything in its dependency array. Let me provide more details below. Thank you. My goal is to append data to an array in my state using useEffect similar to c ...

Converting an array of arrays to an array of objects in a React application

I have an array of arrays as follows: const arrayOfArrays = [ ['Lettuce', 60], ['Apple', 80] ]; What is the best way to transform it into an array of objects with keys for name and price, like this: const arrayOfObjects = [ {name: ...

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...

html: div broken

The HTML document reads as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"& ...

What is the best way to incorporate this custom file upload button, created with vanilla JavaScript, into a React application?

Hey there! I have successfully implemented a custom file upload button using HTML, CSS, and JS. Now, I want to recreate the same design in React. Can someone guide me on how to achieve this in React? HTML Code: <br> <!-- actual upload which is h ...

Is it possible to achieve seamless image transitions in Firefox like it does in Chrome?

To achieve the desired effect, you may need to use some javascript. Visit aditagarwal.com for more information. Styling with CSS: .images-wrapper{ position: fixed; left: 0; top: 80px; bottom: 0; width: 100%; height: 100vh; an ...

The element 'x' is not found within the 'unknown' type

I've been struggling with this issue. After searching through various sources like stackoverflow and github, I attempted a solution which involved adding a generic but I encountered the error message Expected 0 type arguments, but got 1. in relation t ...

Is there a way I can position my privacy alert so that it appears in front of all DIVs, RevSlider,

Have you had a chance to visit my website at ? I recently added a privacy alert in compliance with the new EU Regulation. However, I'm facing an issue where the alert is overlapping with some of my website components such as other DIVs and Revolution ...

An alternative MUI option for AntD notifications

I've been utilizing antD's notification API for a while now, but in my latest project, I've switched to MUI. To streamline error handling for API requests, I'm using a shared Axios instance that includes onSuccess and onError methods. I ...

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

Stylishly integrating MaterialUI with React using Styled-Components

I am trying to customize the appearance of the **Paper** element within MaterialUI's **Dialog** component. const CustomStyledDialog = styled(Dialog)` & .MuiPaper-root { width: 600px; } `; The issue I'm facing is ...

Achieving text center alignment and adding color to text within a header using Bootstrap

I am looking to center the text in a header and apply color to it using Bootstrap. Unfortunately, there is no direct option for font-color or text-color in Bootstrap. Below is my HTML and CSS code: #header { width: 800px; height: 50px; color :whi ...