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

Mastering Angular: Tackling a Directive with Two Parts

I'm working on a directive that's responsible for embedding footnotes into a body of text while providing popover functionality. The text-notes directive is designed to be placed on a parent element, loading content and its related text notes dyn ...

javascriptangularjsdomangularjs-directive

Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works pe ...

htmlcssreactjs

Utilize a single WebAssembly instance within two separate Web Workers

After compiling a wasm file from golang (version 1.3.5), I noticed that certain functions using goroutines are not supported. When these functions are called, they run in the current thread and slow down my worker significantly. To address this issue, I w ...

javascriptvue.jsgowebpackwebassembly

Do we really need to use the eval function in this situation?

Just wondering, is it reasonable to exclude the eval() function from this code? Specifically how <script> ... ... function addGeoJson (geoJsonPath, iconPath = "leaflet-2/images/marker-icon.png", iconSize = [30,50], popUpContent, ...

javascriptjqueryjsonleafleteval

Ways to extract variables from a component and utilize them in App.js

Despite my efforts to search online, I could not find the answer or understand what I needed to. My issue: I need the "inputVal" variable from the "InputField.js" component to be accessible in the "App.js" component (specifically in the fetch request where ...

javascripthtmlreactjsfrontend

Switch button displaying stored data in sessionStorage

I am facing an issue with my small toggle button in AngularJS. I have set up sessionStorage to store a value (true or false), and upon page load, I retrieve this value from sessionStorage to display the toggle button accordingly. Depending on the value sto ...

javascriptangularjs

The data does not seem to be getting sent by the res.send() method in

I'm having trouble with the GET request not returning the data I expect. Here is my GET request code: router.get('/', (req, res) => { res.set('Content-Type', 'text/html') res.status(200).send(Buffer.from('<p& ...

javascriptnode.jsexpresssupertest

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

javascriptjqueryhtmlcanvas

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...

cssanimation

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

cssreactjsmaterial-uispacingbox

Exploring the Power of 2D Arrays in JavaScript

Hey there! I'm having trouble defining a 2D array in JS. Two errors are getting in my way and I can't figure out what's going wrong. i is generated by a for loop - it's defined. Even when I try replacing i with 0, the same error occurs. ...

javascriptarraysmultidimensional-arraybbc-microbit

Tips for effectively grouping a JavaScript object array with the help of Lodash

I have an array of objects in JavaScript that looks like this: [{ day : "August 30th", id: 1, message : "lorem ipsum1" },{ day : "August 30th", id: 2, message : "lorem ipsum2" },{ day : "August 31th", id: 3, message : " ...

javascriptarrayslodash

How can I create an image link with a hover effect using HTML and CSS?

I've streamlined my code to focus on the issue at hand - I have an image that changes when hovered over, but how can I make it so that clicking on the image redirects you to a specific website? http://pastebin.com/h83yi3e3 Here is the code snippet: ...

htmlcssimagehyperlink

The upcoming tick override feature will execute the specified function

I am looking to replace the code below The function will run in the following tick req.nextTick = typeof setTimeout !== 'undefined' ? function (fn) { setTimeout(fn, 5); } : function (fn) { fn(); }; with this new code, window.require.nextT ...

javascriptnode.jsrequirejsevent-loop

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

htmlcss

Showing off map positions on D3 using data from a JSON array

I have received a JSON response containing coordinates from PHP in the following format: {"All":[{"longitude":"36.8948669","name":" Manyanja Rd, Nairobi, Kenya","latitude":"-1.2890965","userID":"1"}, ...]} Next, I am processing it using JavaScript as sho ...

javascriptajaxd3.jssvggeo

What is the best way to retrieve a specific key from a JavaScript Map containing an array?

I am currently iterating through a two-dimensional array to populate a map. The map is using the [i,j] indices as keys and the corresponding arr[i][j] values as values: const arrMap = new Map() for(let i = 0; i < arr.length; i++){ for(let j = 0 ...

javascriptarrayses6-map

Tips for deleting HTML tags from a database

Whenever I add something to my database, it also includes the html tags. Is there a way to prevent this from happening? public function retrieveDataFromDatabase() { $query = "SELECT * FROM gb ORDER BY id DESC LIMIT 0, 4"; //data output if ...

phphtmldatabase

Using Angular's NgFor directive to loop through a list of items and trigger a click event

Is it possible to programmatically trigger a click event on a specific item within an ngFor loop? <ul> <li class="list" *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li> </ul> ...

javascriptangularngfor

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari