Place the data input above onto the SVG curve

I am looking to position the input form element above the center of the svg curve as illustrated

The parameters for the curve are defined as follows:

<svg width="600" height="80" style="border-style: dashed;" xmlns="http://www.w3.org/2000/svg" id="" style="display: none;">
   <defs>
     <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
       <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
     </marker>
   </defs>
   <path d="M10 40 Q 95 0 200 40" stroke="black" fill="transparent" marker-end="url(#arrow)"/>
</svg>

Is there a way to achieve this? I am open to different suggestions and ideas on how it can be accomplished.

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

javascriptcsshtmlsvg

Answer №1

To determine the bounding box of the curve, you can utilize the getBoundingClientRect method and start the positioning from there. I assigned an id to the curve for easier identification.

function setCursorPosition( curve, cursor ){

  var bb = curve.getBoundingClientRect();
  
  // The DOMRect is relative to the viewport,
  // so we need to account for any scrolling in order
  // to position it absolutely on the page.
  // Additionally, I included half of the curve's width to center it horizontally.
  // You can adjust the input alignment using CSS around this point
  // or directly within this function.
  
  cursor.style.position = 'absolute';
  cursor.style.top = bb.top + document.body.scrollTop + 'px';
  cursor.style.left = bb.left + document.body.scrollLeft + bb.width / 2 + 'px';

}

var curve = document.querySelector('#myPath');
var cursor = document.querySelector('#myCursor');

window.addEventListener('resize', () => {
  
  setCursorPosition(curve, cursor);
  
});

setCursorPosition(curve, cursor);
cursor {
  
  transform: translate(-50%,-100%);
  
}
<svg width="600" height="80" style="border-style: dashed;" xmlns="http://www.w3.org/2000/svg" id="" style="display: none;">
   <defs>
     <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
       <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
     </marker>
   </defs>
   <path d="M10 40 Q 95 0 200 40" id="myPath" stroke="black" fill="transparent" marker-end="url(#arrow)"/>
</svg>

<input id="myCursor" value="positioned above the curve" />

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

Creating a React render method that relies on both asynchronous requests and state changes

Currently, I am immersing myself in the world of ReactJS and Redux. However, I have encountered a hurdle that seems insurmountable to me. In one of my projects, I have a React component that is responsible for fetching data asynchronously. export class M ...

javascriptreactjsredux

Tips for adding one document to two separate collections using JavaScript and MongoJS

Having trouble inserting data into two separate tables using javascript and mongojs. While I was able to successfully insert into a single collection by following the npm mongojs documentation, I couldn't find a solution for multiple collections on th ...

javascriptmongodbmongojs

Arrange content into a table format

Looking to create a basic table with key-value pairs. Here's the code snippet for it: import React, {FormEvent} from 'react'; import {Box, Button, Container, Grid, TextField, Typography} from '@material-ui/core'; export default fu ...

javascriptreactjsmaterial-uireact-typescript

How to create a donut chart in Highcharts without an inner pie section?

I've been scouring the internet in search of a solution to create a basic donut chart using the Highcharts library. Most examples I come across show donut charts with both an inner pie and outer donut (see here). Is there a way to remove the inner pi ...

javascripthtmlhighchartsdonut-chart

Sorting can be done in a table that is scrollable

Can someone recommend a sortable table with scrolling and a fixed header? I'm looking for a solution that can be implemented using either jQuery or plain JavaScript. Your input is greatly appreciated. Thank you! ...

javascriptjquery

Adjusting the value of a user form with multidata in PHP and Javascript

I am looking for guidance on how to modify the value of an input in a form that contains multiple data entries. Here is my form: <form method="post" action="pax-flight.php#pax-flight" class="paxform"> <input type="hidden" value="{"data":{"us ...

javascriptphpajax

Challenge with Merging Bootstrap Clean Blog Template with React Application

I am facing difficulties while trying to merge the Bootstrap Clean Blog Template (Link Attached) into my React App. This template is available for free. After downloading the template, I created a new react project and moved all static assets & files ...

javascriptreactjstwitter-bootstrapreact-hooks

JQuery is unable to initiate a keyup event

I am currently utilizing jQuery in a web application. On one of my pages, I have set up an event listener for keypresses as shown below: document.addEventListener('keyup', function (event) { event.preventDefault(); var key = event.k ...

javascriptjqueryeventstriggerslistener

How can timestamps be set in MongoDB during an insertOne() operation without relying on new Date() as in PostgreSQL's NOW()?

timestamp: { $currentDate: { $type: "timestamp" } } }); The insert() method is not functioning properly Is there anyone who can assist me with this issue? ...

javascriptnode.jsmongodbmongodb-queryaggregation-framework

Error: The middleware function is not recognized | Guide to Transitioning to React Redux Firebase v3

After utilizing these packages for my project, I encountered an error in middleware composition while creating a new react app with create-react-app. Below are the packages I have included. Can someone please help me identify what is missing here? HELP I ...

javascriptreactjsfirebasereduxreact-redux-firebase

Navigating in Angular 2: Ways to route to a different page while keeping the HTML hidden from the app.component.html file on the new page

Just recently, I encountered a minor issue. I already have a good understanding of how to navigate between different pages, but there's one thing that bothers me - each time I switch to a new page, the app.component.html always appears at the top of t ...

htmlangularroutesangular2-routing

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...

javascriptjqueryhtmlnode.jsdom-manipulation

Reducing the slide margins in impress.js?

When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre> block that would fit if it were aligned to the left, but it d ...

javascriptcssimpress.js

Images expanding beyond their designated size and overflowing the div

I am trying to use bootstrap in my HTML page to display a list of images. However, I am encountering issues where some images appear larger than others and the last image sometimes goes beyond the boundaries of my main container div. Additionally, when I r ...

htmlcssbootstrap-4

Utilizing Bootstrap 4 for creating full-width inputs with input-group-prepend functionality

Below is the code snippet: <div class="col-md-8 content-row-top-spacer"> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text">Name</span></div> <%= f.text_field :name, ...

htmlcssbootstrap-4

Troubleshooting Unforeseen Results with Bootstrap 5 Justify Content Center and Container Fluid

In my attempt to design a div that occupies 8 columns, centered within a wide viewport, and expands to take up all 12 columns in any other viewport sizes, I encountered an issue. Although I used justify-content-center to align the content, it seems that o ...

htmlcssbootstrap-5

Retrieving user input in a JavaScript/React app

I'm currently developing a search feature for my website using Algolia. When the user types in their search term, the results are updated to show relevant matches as they go. Here is an example below of what I am working on: https://codesandbox.io/s ...

javascriptreactjsalgolia

How can you add an error notification to a click on a protractor?

Is there a method to associate an error message with a protractor click function? I am envisioning something like the example line below: button.click('Button not clickable'); Currently, when an element cannot be located, I receive the non-spec ...

javascriptangularjswebdriverpromiseprotractor

Transforming this JavaScript code to be less intrusive by implementing an event listener for an unidentified ID

As I work on enhancing the functionality of this user interface, I've encountered a challenge with two tabs that require a proper event listener to ensure my JavaScript functions smoothly. This obstacle has been hindering my progress, but as I delve i ...

javascriptjqueryunobtrusive-javascript

Step-by-step guide to performing an AJAX request in JavaScript while using Ubuntu

My current setup involves using a JavaScript file in conjunction with NodeJS to execute AJAX calls. To accomplish this, I have installed and imported jQuery as demonstrated below: var http = require("http"); $ = require("jquery"); test(); funct ...

javascriptjqueryajaxubuntu