Chrome's Problem with SVG

Recently, starting from 2022, I have encountered an issue with a circular svg that was functioning perfectly well in the past. Strangely, this problem seems to occur only on Chrome.

Edge

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

Firefox

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

Opera/Chrome

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

Here is the code snippet causing the issue:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300" class="a-scrollIndicator__text">
                <defs>
                    <path id="txt-path" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "></path>
                </defs>
                <text dy="0" font-size="15">
                    <textPath startOffset="0" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
                        SCROLL • SCROLL •
                    </textPath>

                    <textPath startOffset="50%" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
                        SCROLL • SCROLL •
                    </textPath>
                </text>
            </svg>
htmlcssgoogle-chromesvgcompatibility

Answer №1

It appears that Chrome may encounter a problem when placing two <textPath> elements under a single <text>. The issue can be resolved by wrapping each <textPath> element with its own <text> container:

body {
  background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 300 300" class="a-scrollIndicator__text">
  <defs>
    <path id="txt-path" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "></path>
  </defs>
  <text dy="0" font-size="15">
    <textPath startOffset="0" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
      SCROLL • SCROLL •
    </textPath>
  </text>
  <text dy="0" font-size="15">
    <textPath startOffset="50%" xlink:href="#txt-path" side="left" method="align" style="fill:transparent;text-align:center;font-weight: bold;font-family: MonumentBold;stroke: white;stroke-width: 0.3;">
      SCROLL • SCROLL •
    </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

Utilizing HTML5 Server Sent Events with various events and distinct URLs

When working with two different types of events, there are a couple of ways to separate them using HTML5 Server Sent Events: One way is to attach the respective event keyword to every message pushed from the server. Another option is to expose the differ ...

htmlserver-sent-events

Text gently appearing and disappearing within a block

I’m looking to create a smooth fade effect for the content inside a block that is being dynamically changed by script. Instead of an instant change, I want the old content to fade out and the new content to fade in gradually without using jQuery — just ...

javascripthtmlcssfade

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...

javascripthtmlangularjs

HTML text field within the same line

Is there a way to create multiple text fields on the same line? I have tried this code: <div class="col-lg-2"> <div class="form-group"> <label>Working experience</label> <input type="text" class="form-contro ...

html

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

javascriptjquerycssqtip2

Issue with the style of the inline menu is not functioning properly in IE11

My menu with inline block links is working perfectly in all browsers except for IE11. In Chrome, it looks like this: https://i.sstatic.net/78EcQ.png In IE11, it looks like this: https://i.sstatic.net/HbPBt.png Here is the CSS code snippet: .rlist-- ...

htmlcss

Substituting Specific Content on a Webpage

I need to update a specific phone number within a paragraph without accessing the code inside the body myself. It has been provided by our partner and I am unable to modify it directly. If you would like to explore different options, please reach out to ...

javascriptjqueryhtmlcss

Can Selenium be used to prevent file downloads in Chrome?

While using ChromeDriver and Selenium to visit certain pages, I encountered an issue where a particular file would automatically download, causing the code to halt. Is there a way to prevent file downloads by adjusting ChromeOptions or preferences when cre ...

javagoogle-chromeseleniumselenium-chromedriver

Find the content within a div element while bypassing any span elements

In my Selenium project in Visual Studio, I am writing a test case that involves opening a drop-down menu. I am trying to find the unique identifier for this menu. The structure of the code is as follows: <div class="mat-select-value"> <span c ...

c#htmlvisual-studioselenium

Unlocking the style within a .css file during an Angular unit test - here's how to do

I have been working on unit testing for an Angular app, specifically trying to access styles from a .css file within the unit test. I will share with you what I have attempted so far. component.listedIps.length=0; fixture.detectChanges(); let whitelis ...

cssangulartypescriptunit-testingkarma-jasmine

Center elements at % on the webpage using CSS styling

When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark. Here is how I am currently drawing the triangle: .arrowUp { width: 0; height: 0; border-left: 10px solid transparent; border-right ...

csssass

Why is my Angular form submitting twice?

Currently, I am working on a user registration form using AngularJS with ng-submit and ng-model. However, I am facing an issue where the form triggers submission twice when the user submits it. I have checked for common causes such as declaring the contro ...

javascriptangularjshtmlforms

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Ways to design an overlapping image

In the process of creating a product information page, I am facing an issue where clicking on a product should display the product image, description, and recommended products below. However, for some products, the layout gets disrupted as the product imag ...

cssreactjs

Utilizing CSS with a JavaScript variable

Is there a way to style a JavaScript variable by adding color and border using CSS? Below is the code I have been working on: var msg = "OK"; //I would like this to be styled with a green color and border. msg = "Conflict"; //I want this one to have a red ...

javascriptcss

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

Receive the most current PHP information within JavaScript

I am attempting to update the content of a div on my HTML page every time a button labeled refresh is clicked. The goal is to invoke a JavaScript function when the user clicks the button, and this function should refresh the contents of the div with data r ...

javascriptphphtml

After receiving a response from an Ajax call, the forms are reloaded

Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...

jqueryhtmlajax

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

javascriptjqueryhtmlajaxasp.net-mvc-5