What is the best way to make a nested SVG line responsive and positioned correctly in relation to other elements

How can I create a responsive line using SVG with two triangles positioned at the sides and a line in the middle? The line should adjust its width based on the space available between the triangles when resizing both horizontally and vertically. I've attempted to set the width as a percentage, but it only works for horizontal resizing. The vertical resizing causes issues because the width of the triangles changes dynamically. Here's a link to the codepen: https://codepen.io/roppazvan/pen/dyyPKKL?editors=1100


<svg
class='input-source'
stroke='black'
stroke-width='0'
fill="black">
<rect x="20" y="20%" width="100%" height="60%"
stroke='black'
stroke-width='0'
>
</rect>
<!-- The right head -->
<svg class='head input-source' id='right'
height="100%"
width='100%'
viewBox="0 0 20 40"
preserveAspectRatio="xMaxYMid"
>
<rect width="100%" height="100%"/>
</svg>

<!-- The left head -->
<svg class='head input-source' id='left'
height="100%"
width='100%'
viewBox="0 0 15 30"
preserveAspectRatio="xMinYMid"
>
<rect width="100%" height="100%"/>
</svg>
</svg>
<svg width="110px" height="40px" version="1.0" state='normal'>
<svg
class='input-source'
stroke='black'
stroke-width='0'
fill="black">
<rect x="20" y="20%" width="100%" height="60%"
stroke='black'
stroke-width='0'
>
</rect>
<!-- The right head -->
<svg class='head input-source' id='right'
height="100%"
width='100%'
viewBox="0 0 20 40"
preserveAspectRatio="xMaxYMid"
>
<rect width="100%" height="100%"/>
</svg>

<!-- The left head -->
<svg class='head input-source' id='left'
height="100%"
width='100%'
viewBox="0 0 15 30"
preserveAspectRatio="xMinYMid"
>
<rect width="100%" height="100%"/>
</svg>
</svg>
htmlcsssvg

Answer №1

For those seeking a simple and user-friendly way to learn and apply, utilizing flex-box may be the most optimal choice.

#svg-container {
  margin-top: 100px;
  width: 100%;
  border: 1px solid #bada55;

  display: flex;
  flex-direction: row;
}

svg {
  height: 10vh;
}

/* stretch the middle box */
svg:nth-child(2) {
  flex: 1;
}
<div id="svg-container">
<!--    left head  -->
  <svg viewBox="0 0 14 14" preserveAspectRatio="xMinYMid" opacity="0.5">
     <polygon points="0,7 14,0 14,14 " />
  </svg>
<!--     line -->
  <svg viewBox="0 0 14 14" preserveAspectRatio="none">
    <rect y="30%" width="100%" height="40%" />
  </svg>
<!--     right head -->
  <svg viewBox="0 0 14 14" preserveAspectRatio="xMaxYMid" opacity="0.5">
    <polygon points="14,7 0,0 0,14 "/>
  </svg>
</div>

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

Using JavaScript variables in a Jinja array

I encountered a frustrating issue that has been causing me some trouble. In my project setup, data is being transferred from Python to the frontend using Jinja in the form of a 2D list. My goal is to loop through this array using a for loop, but I'm ...

javascriptpythonhtmlflaskjinja2

Utilizing JavaScript to display numerous variables within a text box

After creating an HTML form, I encountered an issue where only one selected item was displayed in the text field. Can anyone help me solve this problem so that multiple names can be printed in the textfield? function myFun(extras) { document.get ...

javascripthtmlcssforms

Update the style dynamically in Angular using an ngFor directive and an array of data

Is there a way to dynamically set the width using data from an array in Angular? The usual approach doesn't seem to work. How can I solve this issue? <div *ngFor="let item of products"> <div [style.width.px]="item.size" class="Holiday"&g ...

htmlangulartypescriptarraylist

What is the method for verifying a condition within a Javascript function?

Recently delving into Javascript, I have encountered a situation with a JS method. It seems that most of the time, both the SSID and SecurityMode are the same in the lists of wifi networks I receive. I would like to filter out instances where both SSID and ...

javascripthtmlios

Placing a form amidst two div containers

I am delving into the world of CSS and Bootstrap, attempting to recreate a simple layout. However, I'm encountering some challenges. My goal is to stack 2 divs on top of each other with a form that spans both divs. Can you provide insight on how to a ...

htmlcssformstwitter-bootstrapbootstrap-4

Improving Performance in JavaScript by Altering Class Properties

I need to dynamically change the color properties of two classes, but my current code is sluggish since these classes are repeated over 100 times throughout the code. Any tips on optimizing this for better performance? if (mainColor) { var elColors = ...

javascriptjquerycss

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Display file names in a file input using Angular through coding techniques

Hi there, I'm currently working on a project using Angular15, and one of the features involves populating a table with data about team members. When adding a new member, a button is clicked to open a modal window where users can input their informat ...

htmlangulartypescriptfile

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

When attempting to set the fontWeight property in TypeScript, I encounter the following error: Types of property 'test' are incompatible. Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>&a ...

javascriptcsstypescriptmaterial-designmaterial-ui

Adding Items to the Beginning of a Drop-down List using jQuery.prepend

I have created a select list for various types of restaurants. Users can choose a food type, click search, and receive a list of restaurants specializing in that particular cuisine. To add an initial option to the select dropdown, I used the following cod ...

jqueryhtml

Is it possible for me to modify the Event Listener functionality of PayPal buttons to trigger a hidden surprise, and then revert it back to its original settings afterwards?

I am currently working on implementing a fun easter egg feature on my website that will activate when a specific donation amount is entered. Is there a way to customize the behavior of the PayPal button so that instead of redirecting to the standard PayPa ...

javascripthtmlpaypalpaypal-sandboxevent-listener

Navigating tag blocks in VIM can be done easily by using the open

Is there a way to wrap a block inside tags in Vim, similar to how it's done in Sublime as shown in the image? ...

htmlvim

How can I use jQuery to activate and deactivate a class in HTML?

My jQuery function for handling tabs is as follows: jQuery(document).ready(function($) { tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); ...

jqueryhtml

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

javascripthtmljquerycssbootstrap-5

Choosing the div elements that have a PNG background image assigned to them

Is there a way to use jQuery to target all the div elements with a background-image property set to url(somepath/somename.png) in their style? ...

jqueryhtmlpngjquery-selectors

The relationship between a CSS parent and child elements

Currently, I have successfully included my form within <ul><li> tags, functioning well with label and form elements. The CSS code for the form is straightforward and requires no explanation: #form ul {....} #form ul li {....} Now, my dilemma ...

css

Is it possible to alter the color of the background image using jQuery?

My website currently has the css code below. I am looking for a way to allow users to change the color of an image by entering a #colorcode in a text field. Is this functionality possible to implement? .button{ background-image:url(../pattern/_img/b ...

javascriptjqueryhtmlcss

Radio Buttons for Nested Question Toggling

My current setup involves using radio buttons and JavaScript/jQuery to handle nested questions. Based on the radio button clicked (Yes to show, No to hide), extra information is displayed or hidden. Here is an example of the HTML code: <div class="form ...

javascripthtmljqueryformsradio-button

Troubleshooting Problem with Resizing Background Images on Bootstrap 4 Cards

Currently, I am utilizing Bootstrap's grid system along with a simple card element. Within the card, I am dynamically rendering a background image similar to Instagram's grid system. Everything seems to be functioning correctly, except for when t ...

htmlcssbootstrap-4

Utilize the HTML img tag in conjunction with AngularJS and Ionic to showcase dynamic images

Currently, I am working on a hybrid mobile app using ionic and Angularjs. I am facing an issue with displaying images through the img html tag in my app. The main layout of my page includes a carousel at the top that displays images and a list containing s ...

javascriptjqueryhtmlangularjs