Optimizing Textpaths Placement within SVG Elements

Check out this sample fiddle. (Make sure to view it in Firefox) Any suggestions on how I can adjust the positioning of my textpath within my SVG so that it isn't hidden?

I attempted to include x and y attributes in both the svg and text tags, but the text remains stationary.

<svg width="597" height="98" style="overflow:visible; ">
<defs>
    <path d=" M 0,0  L 596,0  M 0,96  L 596,96 " id="_x0000_i1042tp" />
</defs>
<text x="10" y="40" style="font-size:48px; font-family:&quot;Times New Roman&quot;; fill:#369; " method="stretch">
    <textPath xlink:href="#_x0000_i1042tp" xmlns:xlink="http://www.w3.org/1999/xlink">WortArt Test3</textPath>
</text>

In addition, the above demonstration doesn't display properly in Chrome (or other webkit browsers), as they tend to hide overflowing SVG elements. Any tips on resolving this issue?

Thanks for your help!

csshtmlsvg

Answer №1

To align the text inside the two lines, adjust the baseline and alignment attributes. The code below will position it correctly within the lines:

<textPath dominant-baseline="hanging" xlink:href="#mypath">WortArt Test3</textPath>

For a demonstration in Chrome, you can access the full fiddle here:

http://fiddle.jshell.net/Qcaa8/1/

Answer №2

To modify the code from 0,0 L 596,0 to 0,X L 596,X, you need to replace X with the Y-coordinate of the bottom of the text. This means that if you want the text to align with the top of the image, you should use a font size that approximately matches the height of the text.

Answer №3

To adjust the position of text, use dy on the <text> element for moving it down or modify the path to align with the desired text baseline. Check out this example on our website.

In Chrome, the overflow:visible property does not work as expected due to a known issue logged as bug 231577. It's worth noting that webkit/Safari faces a similar problem mentioned in bug report 96163.

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

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

phpjqueryhtmlajax

What could be the reason for the text covering the image on the larger breakpoint?

I am having an issue with this code where the Lorem Ipsum text is not staying centered at all times. Instead, it overlaps the image when I reach the large breakpoint. Can you please explain why this is happening and suggest a solution? Here is the curren ...

htmlcssbootstrap-4

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

phpcssregex

What is the way to modify the standard request for an "@" in the email address?

Although I've successfully changed the error message for when the user forgets to type in their email, I'm now wondering how to modify it when the user enters their email in the wrong format. Below is the code I've written in the style of B ...

htmltwitter-bootstrapformsbootstrap-4

Updating a section of a webpage using jQuery Mobile

I'm currently facing an issue with modifying a specific section of my webpage. Although this problem has been discussed before, I haven't found a satisfactory solution yet. The element in red on the page needs to change dynamically based on the ...

javascriptjqueryhtmlajaxjquery-mobile

Changing the visibility of a model in a method using the setVisible() method with Wicket Ajax

So in my code, I have: public class MyClass extends WebPage { static AjaxFallbackLink ddd = null; static AjaxFallbackLink dddd = null; (...) } Within the constructor, I have: ddd = new AjaxFallbackLink("previous") { @Override pub ...

javahtmlajaxbuttonwicket

Deselect the checkbox if you are checking a different checkbox

Struggling with my code, it's hit or miss. Feeling defeated. Seeking assistance to uncheck a checkbox when another checkbox is checked. Check out the code below: JavaScript: $("#1 #checkAll").change(function() { if ($("#1 #checkAll").is(' ...

javascriptjqueryhtmlcheckbox

Disappearing Value Dilemma in Submit Button

I'm encountering an issue with a button. After making a minor modification to an echo line, the button that I have to submit a form suddenly has a blank value. This only happens when I make this specific change. I am aware of the duplicate IDs of "sub ...

phphtmlformssubmit

Incorporating React's dynamic DIV layout algorithm to generate a nested box view design

My goal is to showcase a data model representation on a webpage, depicting objects, attributes, and child objects in a parent-child hierarchy. I had the idea of developing a versatile React component that can store a single data object while also allowing ...

javascriptcssreactjshtmluser-interface

Show specific content based on which button is selected in HTML

I am working on a project where I have three buttons in HTML - orders, products, and supplier. The goal is to display different content based on which button the user clicks: orders, products, or supplier information. function showData(parameter){ i ...

javascripthtmlbutton

Transform the contents of a div tag into a function by removing the entire div tag

My goal is to find a clever solution for removing the contents between specific HTML classes using PHP. For example, I want to erase all the HTML within the "sometestclass" class. The function below is somewhat functional but not perfect. It eliminates so ...

phpfunctionhtml

How to trigger a PHP function from an external HTML file?

Previous entries on this topic suggest that the only way to achieve this is by utilizing Ajax. However, I am unable to find a solution to my specific problem: I simply want to be able to trigger a PHP function by clicking a button in an HTML file. Suppose ...

phpajaxhtml

Why is it necessary to separate PHP from HTML?

After exploring comments on various websites, pages, and questions I've asked about the separation of PHP and HTML, I'm curious. Does it mean structuring code like this: <?php myPhpStuff(); ?> <html> <?php morePhpStuff(); ?& ...

phphtmlformatting

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

htmlcss

Is it possible to use HTML5 and JavaScript to automatically clear the input field whenever I press the spacebar? I want to ensure that only one word is displayed in the input field at a time

I am currently working on a project with two input fields, where the second field mirrors the content of the first. I have implemented the following code: window.onload = function() { var src = document.getElementById("paragraph-text"), d ...

javascripthtml

I made some adjustments to the program, but I'm having trouble identifying the issue

Here's a simple form I'm using to input and send the category name: <form action="insertexp.php" method="post"> Category Name: <input type="text" name="name"><br> <input type="submit"> </form> This is my PHP script ...

phphtmlmysqlsql

The Bootstrap navbar collapse feature is malfunctioning

My navigation bar is not functioning correctly with Bootstrap 5. I have all the necessary CSS and JavaScript files included in my HTML, but when I try to toggle the navbar, the dropdown menu does not appear. I have checked my code multiple times and it a ...

htmljquerycssruby-on-railsbootstrap-5

How can I implement a while loop for this animation using Javascript?

I've been delving into the world of JavaScript for a few days now, but I've hit a roadblock when it comes to implementing a while loop/switch statement in this animation project. The idea behind the program is that the image will "level up" and ...

javascriptjquerycsswidgetjquery-animate