exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image.

Should I use JavaScript to listen for size changes and adjust the points for the polygon element, or is there a cleaner CSS implementation available? I will be using Bootstrap, and the menu should align about 50px to the left and right of the main container.

<div style="width: 1138px; height: 555px">
    <img src="example-picture1.jpg"
</div>

<svg width="1300" height="200" id="main_menue_svg">
    <polygon id="main_menue_polygon" points="0,0 33,33 0,66 1244,66 1211,33 1244,0 0,0"
    style="fill:rgb(51, 76, 25);stroke:rgb(51, 76, 25);stroke-width:0;fill-rule:evenodd;" />
</svg>
javascriptcsshtmlsvgtwitter-bootstrap-3

Answer №1

Utilize the bounding box to define the svg's width/height and viewBox settings. The illustration presented here incorporates a polygon shape, adjusting responsively to window size changes.

<!DOCTYPE HTML>

<html>

<head>
  <title>Adjust Polygon Size</title>
</head>

<body>
<svg style='position:absolute;top:0px;left:0px;' >
    <polygon id="main_menue_polygon" points="0,0 33,33 0,66 1244,66 1211,33 1244,0 0,0"
    style="fill:rgb(51, 76, 25);stroke:rgb(51, 76, 25);stroke-width:0;fill-rule:evenodd;" />
</svg>

<script>
//--onload, onresize----
function resizePolygon()
{
    var mySVG=document.getElementsByTagName("svg")[0]
    var svgW=window.innerWidth
    var svgH=window.innerHeight
    var bb=mySVG.getBBox()
    var bbx=bb.x//-300
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height

        mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
        mySVG.setAttribute("width",svgW)
        mySVG.setAttribute("height",svgH)
}
resizePolygon(); //---initialize window---
document.addEventListener("onload",resizePolygon(),false)
window.onresize=resizePolygon</script>

</body>

</html>

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 jQuery to animate a form submission in CodeIgniter

I have integrated two jQuery plugins into my application, which are: jQuery validate : . jQuery blockui : http://malsup.com/jquery/block/#download The application is developed using PHP Codeigniter and jQuery. It consists of a form created with the fol ...

javascriptphpjquerycodeigniter

The AngularJs 2 framework encountered an issue with booting up after attempting to combine all TypeScript files into a single JavaScript file

I am currently utilizing Angular 2 with TypeScript (V-1.8) in my project setup. I have configured my tsconfig to output the code into a single .js file. This single.js file includes the necessary code to bootstrap the application, as the boot.ts file is al ...

javascriptangularjsangulartsconfigtypescript1.8

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

javascriptjqueryhtmlcssajax

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Having trouble with preventDefault() not working during a keyup event?

I am struggling to make preventDefault() function properly. Here are a few variations of the code that I have attempted: First: $(document).keyup(function (evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode == 192) { ...

javascriptjquerygoogle-chromeinternet-explorer-8

The font color in Bootstrap is set to be lighter than the background color

Bootstrap has made great improvements in displaying navbar item colours that blend well with the background colour of the navbar. Can we apply a similar technique to body text as well? For example, if the container background is purple, can we have the t ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

It seems that the `to` required prop was missing in the `Link` component of React-Router

Currently, I am facing an issue while trying to integrate react-router. The error message I'm encountering is: Failed propType: Required prop to was not specified in Link. Check the render method of app. Unfortunately, I am unable to pinpoint ex ...

javascriptreactjsreact-router

How can I access the object that created an interval from inside an interval callback function?

I am facing a challenge with JavaScript as a beginner. I am working on a React App and trying to add a timer feature to it. I have successfully created the timer functionality, but the issue lies in the timer callback (similar to this query: setInterval in ...

javascriptnode.jsreactjsnpm

Navigating with Vue Router on Internet Information Services (IIS)

I am encountering difficulties understanding why my routes are failing when I refresh my VueJS application hosted on IIS. Everything works fine during normal browsing, but once I press F5 or update view information through a button, a 403 error is thrown. ...

javascripthtmlvue.jsiis

How to turn off automatic formatting in CKEditor

Whenever data is entered into a field using CKEditor, the Save button becomes enabled. However, if I programmatically set data into the field using Javascript, the Change event always triggers causing the Save button to remain enabled even if the field is ...

javascriptckeditor

<p> The box is massive, and its size is a mystery to me

Why is the box around my paragraph tag so large? I suspect this could be why I am unable to move the <p> tag down with margin-top: 50px; .train p { margin: 0; font-size: 2.5vw; } <div class="train"> <p class="train">In Training& ...

htmlcssparagraph

Harnessing the power of data within different components

In my setup, I have two vital components in play. The initial one is responsible for presenting a list of items, while the second dictates the design and layout of these items. These items reside in an array located within the app.vue file. Here lies my p ...

javascriptarraysvue.jsvuejs2vuex

What is the best way to remove any objects in this array that have empty strings as values?

I have been developing a form using Angular 14. The form consists of a primary section, which includes the user's necessary information, and a secondary section where users can input additional data (an array of residences displayed in a table) befor ...

javascriptangularangularjsangular14

Guide to importing multiple controllers using express

For my upcoming full stack project, I am working on various controllers like signup, login, and profile. Instead of manually requiring each controller and adding them to the app using individual lines of code, I am seeking a more efficient solution. I env ...

javascriptnode.jsexpress

Breaking down a string and then retrieving elements from an array

Just diving into the world of Javascript and jQuery, so I have a simple query. I've got a date that I need to break down into a string and then display it as an array. var date = "12/10/2010"; var dateArray = date.split(/); $('#printbox') ...

javascriptjqueryhtml

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

jqueryhtmlcssslick.js

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

In the array below, there are three post photos. When I click on each post button, I should see a corresponding post photo div at the bottom for each post. Issue: I am facing a problem where only one post photo div is being displayed, which keeps replaci ...

cssreactjs

HTML Navigator encountering Javascript Anomaly

Here is the code snippet I'm working with: driver = new HtmlUnitDriver(); ((HtmlUnitDriver) driver).setJavascriptEnabled(true); baseUrl = "http://www.url.com/"; driver.get(baseUrl + "/"); ... However, whenever I ...

javascriptseleniumhtmlunit

Mastering image focus with javascript: A comprehensive guide

On my HTML page, I have two images and a textbox. I want the focus to shift between the images based on the first character entered in the textbox. For example, when the user types '3', the first image should be focused, and for '4', th ...

javascripthtmlcss