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

Customizing the HTMLElement class to modify particular attributes

Is there a way to modify the behavior of an HTMLElement's scrollTop property by adding some extra logic before updating the actual value? The common approach seems to be deleting the original property and using Object.defineProperty(): delete element. ...

htmltypescriptinheritancepropertiesadapter

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

pythonhtmlseleniumweb-scraping

Tips and tricks for stopping a jquery animation

I have created a hover effect for list items. When I hover over an item, it triggers an animation using the .animate() method. However, when I move my cursor away from the item, the hover animation continues until it reaches its end point. Is there a way ...

jqueryhtmlcssjquery-animate

Troubleshooting WordPress <?php body_class(); ?> Problem

After successfully integrating my theme into WordPress, I decided to add WooCommerce to create a shop. However, I encountered an issue where the styles of WooCommerce were not appearing properly. Upon researching, I discovered that the root cause was the a ...

phphtmlcsswordpress

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

javacsseclipseubuntugtk3

Bootstrap - placement of label to the left of the checkbox

Here is an example of a checkbox I am working with: <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox < ...

csstwitter-bootstrapcheckboxbootstrap-4label

Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table? I want the button at the bottom to extend beyond the borders of the table. https://i.sstatic.net/VH0HP.png Do I need to abandon the table styling to achieve this effect? Check out this JsF ...

htmlcss

Distinguish using section class in Selenium

Currently grappling with a Python selenium issue, I need to extract and print an email address in my code: [email protected] Just looking for a hint... HTML: <section tabindex="-1" class="pv-profile-section pv-contact-info artdeco- ...

pythonhtmlselenium-webdriverweb

What is the process for printing the CSS stylesheet for PPI::HTML highlight?

PPI::HTML has done an impressive job of formatting the HTML highlighting for my Perl code, similar to the example on CPAN. However, I am facing challenges in making the output usable without the appropriate CSS styles. Unfortunately, I am unsure of how to ...

htmlcssperlppi

What are some solutions for resolving the problem with the anchor attribute in Safari?

There is a problem with the anchor tag used in my website. The number 619-618-1660 is being displayed when I view the site on Safari browser or an iPhone, even though it is written as (href="tel:619-618-1660"). See the image at the link below for reference ...

phpwordpresshtmlcss

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Incorporating SQLSRV results into clickable <td> elements: A dynamic approach

As a newcomer to the world of JS/PHP/web development, I'm seeking help with a seemingly simple task. My goal is to make each <td> element in a table clickable, and retrieve the text contained within the clicked <td>. Currently, I have a S ...

javascriptphphtmljquerysqlsrv

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

htmlcss

Unable to substitute a value using the useState hook in React

Whenever I click a key, I attempt to update the value of a variable but it appears not to be working as intended. ↓ The current implementation is not effective and needs improvement import React, { useState, useEffect } from 'react'; const Li ...

javascripthtmlreactjs

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and ...

htmlcsshyperlink

How can I connect the box using the Interactive Picture jQuery tool?

When using the Interactive picture jQuery, I have the following code snippet within my document: jQuery(document).ready(function(){ $( "#iPicture6" ).iPicture({ animation: true, animationBg: "bgblack", animationType: "ltr-slide ...

javascriptjqueryhtmlcssinteractive

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

javascripthtmludpwebrtc

Asynchronous AJAX request using JQuery loader with async:false setting

As a newbie to the world of jQuery, I find myself lost in solving my current issue. Despite checking various solutions to similar problems, none seem to work for me. Working on MAC OS X using Safari with JQuery 2.1.1, I must ensure that my platform is comp ...

phpjqueryhtmlajax