Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are similar questions on this topic here, I am seeking a more specific answer due to my limited understanding.

My goal is to create a horizontal SVG line whose length adjusts based on the webpage's width.

Currently, I have managed to generate a horizontal line using the following code:

<svg id="horizontalLine" width="500" height="5">
       <line x1="0" y1="0" x2="500" y2="0"></line>
 </svg>

CSS:

#horizontalLine {
    stroke: black;
    stroke-width: 1;
    
}

The issue lies in the lack of responsiveness in this line. Ideally, I want the line's "width" to decrease proportionally to the website's width where the SVG is placed, akin to using "vw" as a size unit in CSS.

htmlcsssvg

Answer №1

Although I enjoy working with SVG, sometimes a more straightforward approach can be just as effective. In this instance, I decided to style a <hr> -- also known as a horizontal rule. It proved to be much simpler to deal with in this particular case.

hr {
  background: black;
  height: 2px;
  position: relative;
}

hr:before {
  width: 10px;
  height: 10px;
  background: black;
  content: '';
  display: block;
  position: absolute;
  left: -2px;
  top: -4px;
  border-radius: 5px;
}

hr:after {
  width: 10px;
  height: 10px;
  background: black;
  content: '';
  display: block;
  position: absolute;
  right: -2px;
  top: -4px;
  border-radius: 5px;
}
<div style="width:100%">
  <hr/>
</div>

<div style="width:66%">
  <hr/>
</div>

<div style="width:33%">
  <hr/>
</div>

Answer №2

Aha! All it took was adjusting the "width" to "x vw" and setting "x2" equal to the width value.

Answer №3

If you're looking to implement the vw approach, keep in mind that it may not be compatible with very old browsers. Alternatively, you can use the viewBox method for a more traditional solution.

#horisontalLinje {
  stroke: black;
  stroke-width: 1;
}
<svg id="horisontalLinje" width="100%" height="1" viewBox="0 0 10 1" preserveAspectRatio="none">
  <line x1="0" y1="0.5" x2="100" y2="0.5></line>
</svg>

An issue with your SVG is that the y coordinates are set at 0, causing half of the line to be off-screen. The visible part should be from 0 < y < 0.5, but with the current setup, you're only seeing a stroke of 0.5 despite setting stroke-width to 1. To resolve this, adjust the y coordinates to 0.5.

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 best way to align text to the left without causing it to wrap to the next line?

Currently, I am in the process of designing a banner that will only be displayed when necessary. I am looking for techniques to achieve this goal effectively. Is there a way to align text centrally only if it fits on one line and does not wrap onto a new ...

jqueryhtmlcss

A fresh javascript HTML element does not adhere to the css guidelines

While attempting to dynamically add rows to a table using Javascript and jQuery, I encountered an issue. Here is my code: <script> $(document).ready(function(){ for (i=0; i<myvar.length; i++){ $("#items").after('<tr class="item- ...

javascriptjqueryhtmlcss

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

How can I assign a value other than a string to a placeholder or vue property?

As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...

htmlvue.jsinputpugnuxt.js

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

javascripthtmlcss

How to eliminate ampersands from a string using jQuery or JavaScript

I'm having trouble with a seemingly simple task that I can't seem to find any help for online. My CSS class names include ampersands in them (due to the system I'm using), and I need to remove these using jQuery. For example, I want to chan ...

javascriptjqueryhtmlcss

Storing a string in an array in PHP: A step-by-step guide

I'm facing an issue with storing a string in an array, as it seems to not save the changes in the array properly: <?php session_start(); $username = $_POST["username"]; $password = $_POST["password"]; $users = array(); $passe ...

phphtmlarraysforms

How can I create a circular Datepicker in JavaFX?

Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...

javacssjavafxjavafx-8javafx-css

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...

htmlcssangularstyles

CSS hover effects are malfunctioning

Having an issue with hover in CSS. Attempting to create a menu bar using saved PNG files, each file within its own div. When applying a class name and hover modifier, it only works on the first element. As the pointer moves to subsequent elements, they are ...

htmlcss

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

htmlajax

Is it possible to rearrange column order in Bootstrap 4x according to different viewport sizes?

One of the great things about Bootstrap is its ability to rearrange columns regardless of the HTML structure. However, I am looking to have a different order of elements when the viewport size is smaller (e.g., Mobile). The current HTML structure looks li ...

htmlcssbootstrap-4

Conceal the content within the body and reveal a uniquely crafted div element using Print CSS

I came across numerous resources on using CSS to hide specific parts of a webpage. However, I am not looking to hide multiple divs like this: #flash,#menu,#anuncios { display:none; } Instead, my goal is to hide the entire body of the page and only displ ...

htmlcss

How come certain invisible screen elements suddenly become visible when the document is printed?

When creating a play-off tournament bracket, I face the challenge of adjusting for varying numbers of participants in each round. Typically, there are 2^n participants in each tour: 16, 8, 4, 2 which can be easily accommodated in a flex column layout. Howe ...

htmlcssprintingmaterial-ui

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

javascripthtmlcss

Unable to modify variable values in AngularJS

I'm currently utilizing AngularJS along with the "Angular Material" implementation (found here: https://material.angularjs.org/latest/#/) One of the components I'm using is the SideNav component: https://material.angularjs.org/latest/#/demo/mate ...

javascripthtmlangularjs

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Question: <md-list-item> <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon> <div class="md-list-item-text"> <p>{{ transcript.text }}</p> </di ...

cssvue.jsmaterial-designvue-material

Tracking User Visits in Codeigniter

Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...

phphtmlcodeigniterwebhitcounter

Equal dimensions for all cards in the TailwindCSS gallery display

I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks: https://i.stack.imgur.com/ABdFo.png Each image component is structured like this: <div className="flex items-center"> < ...

htmlcssreactjstailwind-cssimage-gallery

Displaying an array using Javascript that contains variables along with HTML code

First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...

javascripthtmlarraysvariablesoutput