Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles.

<html>
<title>Yellow circles</title>
<body>
    <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="622.4px" height="373px" viewBox="0 0 622.4 373" enable-background="new 0 0 622.4 373" xml:space="preserve">
        <polygon points="0.1,0 622.4,0 622.4,373 0.1,373 "/>
        <polygon fill="#3F3F3F" points="97,51.6 586.2,51.6 586.2,295.5 97,295.5 "/>
        <g transform="translate(342,1098.55)" fill="yellow">
            <g transform="scale(418.2,-405.9)">
                <circle cx=".2888" cy="2.0004" r=".004"></circle>
                <circle cx="-.2666" cy="2.0233" r=".004"></circle>
                <circle cx="0" cy="2.2727" r=".004"></circle>
                <circle cx="-.5845" cy="2.3201" r=".004"></circle>
                <circle cx="0" cy="2.5786" r=".004"></circle>
                <circle cx=".5845" cy="2.3201" r=".004"></circle>
            </g>
        </g>
    </svg>
</body>

The issue I am facing is that the yellow circles are not visible when using Firefox on 3 out of 10 machines. However, they are always displayed correctly in any version of Chrome.

htmlcssgoogle-chromefirefoxsvg

Answer №1

Encountering the same issue led me to discover a known bug in Firefox. Until the update (version 42) is released, I found a temporary solution by using an ellipse instead of a circle, like so:

<ellipse cx=".2888" cy="2.0004" rx=".004" ry=".004"></ellipse>

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 source of this additional space?

To view my Codepen project, check out this link: http://codepen.io/leongaban/pen/aFJfs I have noticed that the spacing issue is related to the .email-tip-icon and the tip-message classes. When I remove them, the extra space disappears. Even though both th ...

htmlcsspositionspacing

Is there a way to ensure my chat view functions properly without relying on partial views?

I am currently working on integrating a private chat feature using SignalR in my project, and I have encountered an issue while creating a View with accessible model values to pass to the server. Specifically, I have a list of doctors, and when a user clic ...

javascripthtmlcssasp.net-mvcsignalr

What is the best way for me to automatically square a number by simply clicking a button?

How do I create a functionality that multiplies a number by itself when a specific button is clicked? I want this operation to only occur when the equals button is pressed. I have been attempting to set this up for over an hour without success. My current ...

javascripthtmlcalculatorcalc

The JQuery UI datepicker is constantly popping open

On my website, I have implemented a JQuery UI date and time picker in a form. Users can select the date, time, and provide additional information. However, whenever the user clicks on the text input for additional information, the date and time picker pop- ...

phphtmljquery-ui

Difficulty creating a fresh FirefoxDriver with versions 48 and higher has caused a timeout

Previously, I encountered an issue with Firefox versions 43 and above, as discussed here. Error message: Failed to start up socket within 45000 ms. Attempted to connect to the following addresses: 127.0.0.1:7055 This problem arose in my code: driver = ...

c#seleniumfirefoxselenium-webdriver

Steps to conceal an accordion upon loading the page and reveal it only when clicking on a specific element

Below is the code I am using to display an accordion in a Fancybox popup. However, I do not want the accordion to be visible on page load. If I hide it, the content inside also gets hidden when showing the accordion in the popup. When user clicks on Click ...

jqueryhtmlcssaccordion

When an accordion is clicked, the content is dynamically loaded within the accordion on the page using PHP, jQuery, and AJAX

To optimize the loading speed of my information-filled page connected to two databases using php, javascript, jquery, I'm looking for a way to make the upload process faster. Currently, some data is displayed immediately while other details are hidden ...

javascriptphpjqueryhtmlajax

What is the best way to retrieve the value of an element enclosed within a tag?

<div class="player__AAtt"> <div> <play-js data-account="1234567890" data-id="32667_32797"> </play-js> </div> </div> Is there a way to extract the values of data attr ...

pythonhtmlseleniumtags

Determine the height of a DIV element and its contents using JQuery

In this div, there are various elements present: <div class="menuItem designMenu" id="dMenu"> <ul class="menuList menu"> <li class="menuHeader">Design</li> <li class="projectHeader">Mother</li> <li clas ...

javascriptjqueryhtmlheight

Having difficulty changing the value of a Select element in AngularJS

Struggling to update the select value from AngularJs. Check out my code below: <select ng-model="family.grade" > <option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option> </s ...

javascripthtmlangularjs

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

javascripthtmlangular

The custom font in my Next.js project is functioning perfectly in the development environment, but when I try to build it locally, the font doesn

Incorporating the Amazon Ember font as a custom font in my application has been a bit of a challenge. I followed the necessary steps of setting up a font.ts file in the lib folder and exporting the font correctly, as guided by various blog posts. Initially ...

cssnext.jsfontsnextjs14

What is the best way to utilize Enquire.js for dynamically adding and removing CSS classes?

I'm looking to dynamically add and remove a css class based on a media query using Enquire.js but I could use some guidance on utilizing the functions properly. Here's what I envision in pseudo code: if (screens max-width > 480px){ #thumb.r ...

javascriptcssenquire.js

JavaScript Switch Open/Close Mobile Navigation Menu

I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...

javascriptjqueryhtmlcss

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

javascripthtmlcssgoogle-chrome

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish t ...

cssreactjsmaterial-uihover

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: I'm attempting to achieve this look using CSS: I've experimented with skewing but the red area persists, regardless of the degree value used. Here is my basic structure: <div class= ...

htmlcsstransform

Retrieve the chosen option from a Select Dropdown and display it in a modal before carrying out the form submission

I need help figuring out how to send a warning message when a "delete" button is clicked on my webpage. I want the message to appear in a modal and display the selected value from a dropdown menu. Here is the code I have so far: <form action="elim ...

phphtmlformsbootstrap-5

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

javascripthtmlangular

Using PHP, eliminate all hyperlinks from the DOM HTML

I have a string called $processhtml that contains some HTML. My goal is to remove all link tags and their contents from the HTML using PHP. For example: "This is some text with <a href="#">link</a>" should become: "This is some text with" ...

phphtmldomhtml-parsingdomdocument