How can I maintain circle radius while resizing SVG to 100% width?

Our line graphs are drawn using SVG technology:

https://i.stack.imgur.com/PLpPT.png

When generating SVG, the width is set to 100%, but the exact value remains unknown. To ensure that the SVG fills the entire width without distortion, we use preserveAspectRatio="none". However, this can sometimes cause circles to be distorted.

To prevent distortion in our lines, we utilize the vector-effect="non-scaling-stroke" option. Do you know of any tricks to maintain consistent circle radius when scaling SVG?

csssvg

Answer №1

To solve the problem, you can substitute circle with a zero-length line that has round caps. This will make each "circle" appear as follows -

<line x1="x" y1="y" x2="x" y2="y" 
style="stroke:#00a7e1;stroke-linecap:round;stroke-width:13px;vector-effect:non-scaling-stroke" />

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 could be causing the FontAwesome social icons in <ul> to malfunction?

I'm a beginner and I've been following various tutorials to achieve my goal. The main objective is to create animated social icons in the footer. However, I have encountered an issue where the social icons from FontAwesome are not working. When ...

htmlcssfont-awesome

Managing form submissions using Jquery and checkboxes

Whenever I submit my dynamically created form, all checkboxes briefly become selected for a split second. Does anyone have an explanation for this behavior? Is it common or is there something wrong with my code? Although the form submits correctly, it migh ...

javascriptjqueryhtmlcssforms

What is causing myInterval to not be cleared properly?

const homeButton = document.getElementById('home'); window.myInterval = 0; const showHome = () => { console.log('showHome'); window.myInterval = setInterval(wait, 400) } const wait = () => { console.log('wait'); ...

javascripthtmlcsssetinterval

Troubleshooting the Height Problem in Material-UI's Menu

I am trying to make the menu height responsive by setting it equal to the window height using CSS. I want the menu height to increase as the page length increases due to added elements. I have attempted using "height:100%" and "height: 100vh" in the styles ...

javascriptcssreactjsmaterial-uimenu-items

Struggling to align the Title Tags perfectly in the center of Images

When attempting to center align images and their post titles, I encountered an issue where the left part of the image and title were being cut off by a small margin. Despite trying various methods, I was unable to successfully center the title tags. You ca ...

javascriptjqueryhtmlcsscentering

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Tips for customizing the appearance of dayMouseover in Fullcalendar

While working on my Angular application, I encountered an issue with the Fullcalendar plugin. Specifically, I want to dynamically change the cell color when hovering over a time slot in AgendaWeek view (e.g. 7.30am-8.00am). I am striving for something like ...

htmlcssangularjsfullcalendar

Utilizing jQuery to dynamically load CSS files on a webpage

For my website, I have implemented 4 different .css files to handle various screen resolutions. Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen. <link id="size-stylesheet" rel="st ...

jqueryhtmlcss

I'm currently working with Bootstrap 5. Is there a technique available to reposition the elements within a div without relying on padding or margin properties?

Developing a Website: <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmlcssbootstrap-5

Issue with Bootstrap 4 Dropdown Menu not directing to specified href destination

Project URL: You can download the file by clicking on "Download bootstrap menu file for testing" I have implemented a Bootstrap 4 hover menu that works fine on desktop, but on mobile devices, it converts to a clickable menu. Everything is functional so ...

htmlcsstwitter-bootstrapbootstrap-4

A pair of div containers with one set to adjust its height automatically and the other to

I have a container with a height set to 100%. Inside, there are two child divs. Is it achievable to achieve the following heights: First div equal to the height of its content Second div equal to the remaining free space in the container ...

htmlcss

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

javascripthtmlcssweb

Tips for creating a full-screen first page while keeping the others standard

Looking to create a dynamic HTML5/CSS/JS Website where the first page always displays in fullscreen mode with a background image, while the subsequent pages appear in a normal layout. Here's an example of what I'm aiming for: I've created ...

jquerycsshtmlfullscreenfullpage.js

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site lengt ...

javascriptcss

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

jqueryhtmlcsstwitter-bootstrap

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...

cssgwt

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are ...

htmlcss

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

javascriptcss

The CSS ::after selector is experiencing a decrease in animation speed

There is a dropdown menu set to fade in once a link is clicked. Everything works well, the menu fades in properly. However, when clicking off and triggering a function that fades out the dropdown, the triangle on top of the box fades out slightly slower th ...

javascriptjqueryhtmlcssdrop-down-menu

Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...

javascriptjqueryhtmlcss