What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <text>
    <textPath href="#MyPath">
      The quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

Unfortunately, I encountered an issue where the <textPath> element didn't display, only the <path> rendered.

I attempted to adjust the width, display settings, overflow properties, but nothing seemed to work. It remained at a size of 0x0.

This problem is puzzling to me, especially since the same code works in other tabs when Vue is not involved.

To clarify, I am working with Vue and Gridsome.

cssvue.jssvggridsome

Answer №1

Spent an entire hour debugging, and finally discovered the root of the issue: Text fails to render when the body contains dir="rtl".

All it took was changing the SVG's direction back to ltr.

But how can I make it work in rtl mode???

Check out this unanswered question.

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

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

Navigating with Angular Material and md-nav-bar for efficient routing

Currently, I am delving into Angular and have opted to utilize the Angular Material library for my initial application. After tweaking some basic code borrowed from this source, which I adjusted to suit my requirements, I encountered difficulties with rout ...

javascripthtmlcssangularjsangular-material

Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spa ...

csshtmldreamweavernav

Steps for verifying that an object property contains the necessary properties

I have a component that receives an object as a prop: <foo :ob='object'></foo> Within the component, the prop is defined like this: props: { ob: { type: Object, required: false, default: {} } } Typically, the expe ...

vue.jsvuejs2

Stop the image transformation/transition when the back face is not visible

Experience the magic of a box that flips with just a click. Inside, an image awaits to zoom in upon hovering. Check out this sample. The only glitch is that the zoom transition on the hidden image appears for a brief moment when I move my mouse out or ba ...

csscss-transitions

Issue with vuejs: npm run dev command not functioning

I'm facing an issue with running VueJS webpack on a server using the command: npm run dev. Instead of it running smoothly, I am getting a long list of errors. You can view the screenshot of the errors by clicking here. ...

npmvue.js

I desire my grid to exhibit an identical appearance to that of the jquery datepicker

I have an interactive element called the "open grid" that, when clicked on, reveals a grid of buttons. I'm looking for help with coding it so that instead of being displayed below the textbox, the grid of buttons can be hovered over the "open grid" li ...

jquerycssbuttongrid

Discover the color value within an array that begins with the "#" symbol

In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...

javascriptphphtmlcssarrays

Tips on aligning multiple elements vertically in a justified manner

I'm struggling to articulate what I need, but I'll give it a shot. I want to vertically align three different elements, each wrapped in their own divs. This is my current code: .service_info { margin-top: 45px; clear: both; ...

htmlcssalignmentvertical-alignmentvertical-text

Confusion arises from conflicting Vue component script indentation guidelines

As I work on setting ESLint rules for my new Vue project, I am extending both eslint-plugin-vue and airbnb. All is well except for one issue - the indentation of the tag inside Vue components. The usual accepted format looks like this: <script> ex ...

javascriptvue.jsvue-componenteslintlint

Using Font Awesome icons with Buefy for beautiful designs

Currently, I am in the process of transitioning my project from utilizing bulma + jQuery to buefy. The resources I am loading include buefy, vue, and font awesome from a CDN. However, despite specifying the defaultIconPack as 'fas' for font aweso ...

vue.jsfont-awesomebuefy

Encountering the error message "Received 1 argument, when expecting 4" while attempting to utilize a vuex getter in TypeScript

I encountered an issue while unit testing a getter function. The error message Expected 4 arguments, but got 1. appeared when I attempted to use the getter. My application was built using Quasar and utilizes TypeScript. The value of HttpMocks.mockToken is ...

typescriptvue.jsjestjsvuexquasar

I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, bu ...

htmlcss

React Animation Library With Smooth Initial Render and No Dependency on External Props

I'm currently implementing a Modal component within my app, utilizing Portals. My goal is for the Modal to smoothly fade in when it is rendered and fade out when it is no longer displayed. Upon examining the documentation for react-transition-group, ...

cssreactjsanimationreact-transition-group

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

When modifying an array, the v-for directive causes all styles to be re-rendered

I am facing an issue with my v-for list that displays items from an array. The main problem is that when I make changes to the array, all the components get re-rendered entirely instead of just appending or prepending new elements. This results in a signif ...

vue.jsvuejs2

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

When it comes to web frontend projects (html/css/javascript), they are often perceived as more complex to read and maintain compared to Java/C#/C/C++ projects. Is it possible to outline some optimal strategies for enhancing the readability, modularizatio ...

javascripthtmlcss

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

My tech stack includes Django and Django REST framework on the backend, along with Vue.js on the frontend. While GET requests function smoothly and POST requests using Postman or Insomnia work fine, encountering an error in the Browser console when sending ...

javascriptpythondjangovue.jscsrf

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

Is there a way to automatically activate the Bootstrap-vue overlay when any child element makes a request, such as using axios? I am looking for a solution that will trigger the overlay without manual intervention. <b-overlay> <child> ...

typescriptvue.jsaxiosbootstrap-vue