viewbox works in chrome and firefox but not in phantomjs - html

I have a web app that displays an SVG timeline. The SVG is using a ViewBox to properly scale the timeline as the browser page grows/shrinks.
The SVG timeline properly appears in firefox/chrome etc. It also properly appears in chrome when I print to pdf straight from chrome.
WORKS IN FIREFOX AND CHROME BUT NOT IN PHANTOMJS...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" viewBox="0 0 1138 130" aria-describedby="qtip-26">
When I print to pdf using phantomjs however, the SVG timeline does not appear at all. If instead of using a viewBox, I use fixed width and height for the SVG timeline, it does properly show up in the phantomjs pdf.
WORKS IN PHANTOMJS...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" width="1100" height="900" aria-describedby="qtip-26">
Does anyone have any insight/heads up in terms of why this is occurring? Have stackoverflowed, googled the issue but nothing specific
Thanks in advance for any help
David
ccprog,
per your kind request, below is the enclosing html etc. viewBox="0 0 718 130" below works in chrome/FF, does not work in phantomjs
Thanks fot any heads up/help in advance
<!DOCTYPE html><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Objective Arts</title>
<meta name="viewport" content="width=device-width">
<!-- iOS -->
<link rel="apple-touch-icon" href="public/images/logo-white.png">
<!--<link rel="apple-touch-startup-image" href="/startup.png">-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="images/logo-white.png">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css">
<link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css">
<link rel="stylesheet" href="bower_components/angular-xeditable/dist/css/xeditable.css">
<link rel="stylesheet" href="bower_components/bootstrap-additions/dist/bootstrap-additions.min.css">
<link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
<link rel="stylesheet" href="bower_components/c3/c3.css">
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/app.css">
<link rel="stylesheet" href="styles/navbar.css">
<link rel="stylesheet" href="styles/cfsPrint.css">
<link rel="stylesheet" href="styles/assessmentNavigator.css">
<link rel="stylesheet" href="styles/assessmentValidations.css">
<link rel="stylesheet" href="styles/plan.css">
<link rel="stylesheet" href="styles/abn_tree.css">
<link rel="stylesheet" href="styles/flags.css">
<link rel="stylesheet" href="styles/chronoline.css">
<link rel="stylesheet" href="bower_components/qtip2/jquery.qtip.min.css">
<!-- endbuild -->
<style type="text/css"></style></head>
<body ng-app="oaClientJs" style="" class="ng-scope">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser
to improve your experience.</p>
<![endif]-->
<div full-screen-loader="" class="ng-isolate-scope"><div id="fullscreenloaderoverlay" style="zoom: 1;" ng-show="visible" class="ng-hide">
</div>
<div id="fullscreenloadermessage" class="panel panel-default ng-hide" ng-show="visible">
<div class="panel-body">
<div class="text-centered">
<h5 class="ng-binding">Loading Form<img src="images/loader.gif"></h5>
</div>
</div>
</div></div>
<div growl="" class="ng-isolate-scope"><div class="growl-container growl-fixed top-right" ng-class="wrapperClasses()"><!-- ngRepeat: message in growlMessages.directives[referenceId].messages --></div></div>
<!-- AngularJS controlled views -->
<div class="container fill">
<!-- ngView: --><div ng-view="" class="fill ng-scope"><style xmlns:page-break-inside="http://www.w3.org/1999/xhtml" class="ng-scope">
.narrative {
zoom: 0.8;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.strength {
background-color: #a0b2be !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.three {
background-color: #be969c !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.two {
background-color: #fae190 !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.one {
background-color: #7abe77 !important;
border: 1px solid #ddd !important;
-webkit-print-color-adjust: exact;
}
.note {
font-style: italic;
font-size: 10px;
}
.date {
font-style: italic;
font-size: 10px;
border: 1px solid lightgrey;
-webkit-print-color-adjust: exact;
align-content: center;
}
.unbreakable {
display: inline-block;
}
.centered {
text-align: center;
}
.sphere {
height: 10px;
width: 10px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
border: 1px solid black;
}
.printOnly{
display:none;
}
#media print {
html {
zoom: .7;
}
.printOnly{
display:block;
}
}
</style>
<!-- <test> start of form panel -->
<div id="detailHideContent" class="row hidden-print ng-scope">
<div id="realContent" class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon-list-alt"></span> <b class="ng-binding">Form - ....</b>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...:</b></div>
<div class="col-md-3 col-sm-3 col-xs-6 ng-binding">ID10006</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>....:</b></div>
<div class="col-md-5 col-sm-3 col-xs-6 ng-binding">....</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-3 col-sm-3 col-xs-6"><a ng-href="#/clientTab/10006" class="ng-binding" href="#/clientTab/10006">....</a></div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-5 col-sm-3 col-xs-6 ng-binding">...</div>
</div>
<div class="row top-buffer">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-3 col-sm-3 col-xs-6 ng-binding">12</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
<div class="col-md-5 col-sm-3 col-xs-6">
<!-- ngIf: !isEditMode --><span ng-if="!isEditMode" class="ng-binding ng-scope">...</span><!-- end ngIf: !isEditMode -->
<!-- ngIf: isEditMode -->
<!-- ngIf: isEditMode -->
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>Org Unit:</b></div>
<div class="col-md-10 col-sm-9 col-xs-6">
<span ng-show="isEditMode && availableOus.length == 0" class="ng-hide">No placements exist for the specified time range</span>
<span ng-show="!isEditMode || availableOus.length == 1" class="ng-binding">WEFC - EIIS (36EWEI)</span>
<select ng-show="isEditMode && availableOus.length > 1" class="form-control ng-pristine ng-valid ng-hide" ng-options="placement.nameCode for placement in availableOus track by placement.id" ng-model="selected.orgUnit"><option value="140" selected="selected">...</option></select>
</div>
</div>
<div class="row ng-hide" ng-show="isEditMode && regenerateRequired()">
<div class="col-md-2 col-sm-3 col-xs-6"> </div>
<div class="col-md-10 col-sm-9 col-xs-6">
<span>Regenration is required</span>
</div>
</div>
</div>
</div>
</div> <!-- end <div id="detailHideContent" class="row hidden-print"> -->
<!-- END OF FORM PANEL -->
<!-- START OF COURSE OF CARE PANEL -->
<div id="detailHideContent" class="row ng-scope">
<div id="formDetails" class="panel panel-default" ng-show="showDetails()">
<div class="panel-heading"><span class="glyphicon"></span> <b>...</b>
</div>
<div class="panel-body">
<div class="timeline-tgt ng-isolate-scope" reactive-chrono-line=""
chrono-data="chronoline"><div class="chronoline-wrapper
chronoline-draggable"><div class="chronoline-canvas" style=""><svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
data-hasqtip="7" viewBox="0 0 718 130" style="overflow: hidden; position:
relative; left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color:
rgba(0, 0, 0, 0);"></defs><circle cx="493.62499999999994" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Assessment</title></circle><circle cx="508.5833333333333" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="519.2678571428571" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="534.2261904761905" cy="73.5" r="2.5"
fill="#00ffff" stroke="#00ffff" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">Collateral</title></circle><circle cx="549.1845238095237" cy="73.5" r="2.5"
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="564.1428571428571" cy="73.5" r="2.5"
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="579.1011904761905" cy="73.5" r="2.5"
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">...</title></circle><circle cx="534.2261904761905" cy="64.5" r="2.5"
fill="#006400" stroke="#006400" stroke-width="2" class="chronoline-event"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Plan Dev -
MHS</title></circle><path fill="none" stroke="#b8b8b8" d="M0,80L718,80"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="15"
y="118" text-anchor="middle" font-family=""Arial"" font-size="10px"
stroke="none" fill="#000000" font-weight="bold"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">2017</tspan></text><path
fill="none" stroke="#b8b8b8" d="M-36.32738095238095,80L-36.32738095238095,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="-36.32738095238095" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text
x="15" y="106" text-anchor="middle" font-family=""Arial""
font-size="10px" stroke="none" fill="#000000" font-weight="bold"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">JAN</tspan></text><path
fill="none" stroke="#b8b8b8" d="M-6.410714285714286,80L-6.410714285714286,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="-6.410714285714286" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">15</tspan></text><path
fill="none" stroke="#b8b8b8" d="M29.916666666666664,80L29.916666666666664,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text
x="29.916666666666664" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text
x="29.916666666666664" y="106" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
font-weight="bold" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-anchor: middle; font-family: Arial; font-size: 10px; font-weight:
bold;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">FEB</tspan></text><path fill="none" stroke="#b8b8b8"
d="M59.83333333333333,80L59.83333333333333,84"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text
x="707.3154761904761" y="94" text-anchor="middle"
font-family=""Arial"" font-size="10px" stroke="none" fill="#000000"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle;
font-family: Arial; font-size: 10px;"><tspan dy="3.5"
style="-webkit-tap-highlight-color: rgba(0, 0, 0,
0);">15</tspan></text></svg>
</div><div class="chronoline-left"
style="margin-top: 40px; height: 40px; display: none;"><div
class="chronoline-left-icon" style="margin-top: 12.5px;"></div></div><div
class="chronoline-right" style="margin-top: 40px; height: 40px; display:
none;"><div class="chronoline-right-icon" style="margin-top:
12.5px;"></div></div></div></div>
svg ELEMENT IN CHROME/FF USING viewBox
svg ELEMENT IN PHANTOMJS USING same viewBox

Related

Bootstrap 5 mobile Dropdown not sliding while clicking

Few things to know before starting:-
I'm using Django (python)
I'm using Bootstrap
And Obviously I'm using html and css
What I did (in order, when before I got an error):
I copied the navbar template from the bootstrap navbar docs
I linked my own custom css and js file from the static directory of django in the following order below:-
Javascript Files
(Copied from Bootstrap, so don't mind the comments) :)
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
Css Files
<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
Code in main html file
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{% static 'css/styles.css'%}" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>{%block title%} {%endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="{% static '/img/Socklet-logos.jpeg' %}"
alt="error in loading static files, may encounter bad design"
id="brand-logo"
class="float-start"
/>
<h1 id="brand">{%block brand%}{%endblock%}</h1></a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent navbar"
>
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="navigation-bar">
<li class="nav-item" id="nav">
<a
class="nav-link active"
aria-current="page"
href="#"
id="nav-link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-house-door"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
/>
</svg>
Home</a
>
</li>
<hr style="color: white" />
<li class="nav-item" id="nav">
<a class="nav-link" id="nav-link" href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-kanban-fill"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"
/>
</svg>
Projects</a
>
</li>
<hr style="color: white" />
<li class="nav-item dropdown" id="nav">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
id="nav-link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-three-dots"
viewBox="0 0 16 16"
class="nav-icon"
>
<path
d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
/>
</svg>
More
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Book Club</a></li>
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Our Employees</a>
</li>
</ul>
</li>
</ul>
<div class="d-flex">
<a href="{{login_logout_link}}">
<button
class="btn btn-outline-success"
name="login"
id="login-btn"
>
{{login_logout}}
</button>
</a>
</div>
</div>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
Code in custom Css file
#media screen and (max-width: 767px) {
.nav-icon {
height: auto;
width: auto;
max-height: 40px;
max-width: 140px;
}
}
#media screen and (min-width: 768px) {
.nav-icon {
height: auto;
width: auto;
max-height: 50px;
max-width: 125px;
}
}
#nav {
font-size: 30px;
}
#nav:hover {
background-color: black;
text-shadow: 500px;
}
#login-button {
align-items: right;
}
#brand:hover {
color: black;
}
#login-btn {
height: 45px;
width: 100px;
}
#nav-link {
padding: 10px;
}
svg {
height: 30px;
width: 30px;
}
#media (min-width: 767px) {
#brand {
padding-right: 250px;
font-size: 50px;
}
#brand-logo {
padding-right: 10px;
height: auto;
width: auto;
max-width: 250px;
max-height: 90px;
}
}
#brand-logo {
height: auto;
width: auto;
max-width: 100px;
max-height: 55px;
padding-right: 5px;
}
#navigation-bar {
align-items: center;
}
But here's the final output with a gif in which I'm clicking the dropdown but it doesn't slide:-
The id on:
<div
class="collapse navbar-collapse"
id="navbarSupportedContent navbar"
>
Must have the same value as data-bs-target="#navbarSupportedContent". That's how the button and the dropdown <div> are linked.
Try changing it to id="navbarSupportedContent"

Flex divs not colliding and flexing relative to each other

I want the lower div (containing the image and the button) to collide as in not overlap with the division above it (texts' divisions), so when the button hits, collides, with the division above it the button moves down squishing the image under it if there is no space available. You can see the GIF to visualize what I'm trying to do.
I tried putting both divisions on the same z-index since they weren't but that was futile.
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
flex: 1 0 auto;
}
.waveContainer {
position: absolute;
z-index: -1;
max-height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wave {
position: absolute;
z-index: -1;
}
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1610px;
bottom: 0;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
z-index: 1;
}
.contact {
width: 300px;
height: 71px;
border: none;
background: #009ABC;
border-radius: 18px;
border-style: solid;
border-color: #ffffff;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-align: center;
letter-spacing: 0.3em;
color: #ffffff;
}
.contactContainer {
z-index: 2;
max-height: 500px;
}
.programmer {
max-height: 500px;
}
#programmer {
max-width: 100%;
height: auto;
}
<div class="content">
<div class="flexParent">
<div class="programmer">
<svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g clip-path="url(#clip0)">
<path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
<path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
<path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
<path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
<path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
<path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
<path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />
<path d="M404.397 141.047H250.498C250.183 141.047 249.881 140.922 249.659 140.699C249.436 140.476 249.311 140.174 249.311 139.859C249.311 139.544 249.436 139.242 249.659 139.02C249.881 138.797 250.183 138.672 250.498 138.672H404.397C404.553 138.672 404.708 138.702 404.852 138.762C404.996 138.822 405.127 138.909 405.237 139.02C405.347 139.13 405.435 139.261 405.495 139.405C405.554 139.549 405.585 139.703 405.585 139.859C405.585 140.015 405.554 140.17 405.495 140.314C405.435 140.458 405.347 140.589 405.237 140.699C405.127 140.809 404.996 140.897 404.852 140.956C404.708 141.016 404.553 141.047 404.397 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.76 154.11H199.911C199.596 154.11 199.294 153.985 199.071 153.763C198.849 153.54 198.723 153.238 198.723 152.923C198.723 152.608 198.849 152.306 199.071 152.083C199.294 151.86 199.596 151.735 199.911 151.735H297.76C298.075 151.735 298.377 151.86 298.6 152.083C298.823 152.306 298.948 152.608 298.948 152.923C298.948 153.238 298.823 153.54 298.6 153.763C298.377 153.985 298.075 154.11 297.76 154.11V154.11Z" fill="#F2F2F2" />
<path d="M404.397 154.348H306.548C306.233 154.348 305.931 154.223 305.708 154C305.486 153.777 305.36 153.475 305.36 153.16C305.36 152.845 305.486 152.543 305.708 152.321C305.931 152.098 306.233 151.973 306.548 151.973H404.397C404.712 151.973 405.014 152.098 405.237 152.321C405.46 152.543 405.585 152.845 405.585 153.16C405.585 153.475 405.46 153.777 405.237 154C405.014 154.223 404.712 154.348 404.397 154.348V154.348Z" fill="#F2F2F2" />
<path d="M297.998 167.174H200.148C199.834 167.174 199.531 167.049 199.309 166.826C199.086 166.603 198.961 166.301 198.961 165.986C198.961 165.671 199.086 165.369 199.309 165.147C199.531 164.924 199.834 164.799 200.148 164.799H297.998C298.313 164.799 298.615 164.924 298.838 165.147C299.06 165.369 299.186 165.671 299.186 165.986C299.186 166.301 299.06 166.603 298.838 166.826C298.615 167.049 298.313 167.174 297.998 167.174V167.174Z" fill="#F2F2F2" />
<path d="M298.236 180.238H200.386C200.071 180.238 199.769 180.112 199.546 179.89C199.324 179.667 199.198 179.365 199.198 179.05C199.198 178.735 199.324 178.433 199.546 178.21C199.769 177.987 200.071 177.862 200.386 177.862H298.236C298.55 177.862 298.853 177.987 299.075 178.21C299.298 178.433 299.423 178.735 299.423 179.05C299.423 179.365 299.298 179.667 299.075 179.89C298.853 180.112 298.55 180.238 298.236 180.238V180.238Z" fill="#F2F2F2" />
<path d="M342.648 128.221H314.623C314.308 128.221 314.006 128.096 313.783 127.873C313.561 127.65 313.435 127.348 313.435 127.033C313.435 126.718 313.561 126.416 313.783 126.193C314.006 125.971 314.308 125.846 314.623 125.846H342.648C342.963 125.846 343.265 125.971 343.487 126.193C343.71 126.416 343.835 126.718 343.835 127.033C343.835 127.348 343.71 127.65 343.487 127.873C343.265 128.096 342.963 128.221 342.648 128.221V128.221Z" fill="#F2F2F2" />
<path d="M342.648 167.174H314.623C314.308 167.174 314.006 167.049 313.783 166.826C313.561 166.603 313.435 166.301 313.435 165.986C313.435 165.671 313.561 165.369 313.783 165.147C314.006 164.924 314.308 164.799 314.623 164.799H342.648C342.963 164.799 343.265 164.924 343.487 165.147C343.71 165.369 343.835 165.671 343.835 165.986C343.835 166.301 343.71 166.603 343.487 166.826C343.265 167.049 342.963 167.174 342.648 167.174V167.174Z" fill="#F2F2F2" />
<path d="M342.648 180H314.623C314.467 180 314.312 179.97 314.168 179.91C314.023 179.851 313.892 179.763 313.782 179.653C313.671 179.543 313.583 179.412 313.524 179.267C313.464 179.123 313.433 178.969 313.433 178.812C313.433 178.656 313.464 178.502 313.524 178.357C313.583 178.213 313.671 178.082 313.782 177.972C313.892 177.861 314.023 177.774 314.168 177.714C314.312 177.655 314.467 177.624 314.623 177.625H342.648C342.804 177.624 342.959 177.655 343.103 177.714C343.247 177.774 343.379 177.861 343.489 177.972C343.6 178.082 343.687 178.213 343.747 178.357C343.807 178.502 343.838 178.656 343.838 178.812C343.838 178.969 343.807 179.123 343.747 179.267C343.687 179.412 343.6 179.543 343.489 179.653C343.379 179.763 343.247 179.851 343.103 179.91C342.959 179.97 342.804 180 342.648 180V180Z" fill="#F2F2F2" />
<path d="M389.673 180H361.648C361.333 179.999 361.032 179.874 360.81 179.651C360.587 179.429 360.463 179.127 360.463 178.812C360.463 178.498 360.587 178.196 360.81 177.974C361.032 177.751 361.333 177.625 361.648 177.625H389.673C389.829 177.624 389.983 177.655 390.128 177.714C390.272 177.774 390.403 177.861 390.514 177.972C390.624 178.082 390.712 178.213 390.772 178.357C390.832 178.502 390.863 178.656 390.863 178.812C390.863 178.969 390.832 179.123 390.772 179.267C390.712 179.412 390.624 179.543 390.514 179.653C390.403 179.763 390.272 179.851 390.128 179.91C389.983 179.97 389.829 180 389.673 180V180Z" fill="#F2F2F2" />
<path d="M227.223 141.047H199.198C198.884 141.047 198.581 140.922 198.359 140.699C198.136 140.476 198.011 140.174 198.011 139.859C198.011 139.544 198.136 139.242 198.359 139.02C198.581 138.797 198.884 138.672 199.198 138.672H227.223C227.538 138.672 227.84 138.797 228.063 139.02C228.286 139.242 228.411 139.544 228.411 139.859C228.411 140.174 228.286 140.476 228.063 140.699C227.84 140.922 227.538 141.047 227.223 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.404 320.374H199.555C199.24 320.374 198.938 320.249 198.715 320.026C198.492 319.803 198.367 319.501 198.367 319.186C198.367 318.871 198.492 318.569 198.715 318.346C198.938 318.124 199.24 317.999 199.555 317.999H297.404C297.719 317.999 298.021 318.124 298.244 318.346C298.467 318.569 298.592 318.871 298.592 319.186C298.592 319.501 298.467 319.803 298.244 320.026C298.021 320.249 297.719 320.374 297.404 320.374Z" fill="#F2F2F2" />
<path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
</g>
<defs>
<clipPath id="clip0">
<rect width="594" height="451" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="contactContainer">
<button class="contact" onclick="document.location.href='contact.html'"> VIEW </button>
</div>
Move .waveContainer outside flex parent div, and remove position: absolute;.

Max-height and max-width not applying to flex children

I'm trying to set max-width and height to flex children, but, the div gets squished down to fit its children exactly. I found out that div .content (or its styling) is causing the issue, but, not sure why.
I expect the division has a max-width and height of 1600px x 500px so they can flex correctly; i.e move closer to each other as the page gets smaller in width.
html,body { /* removes all default margin and padding */
margin: 0;
padding: 0;
min-height: 100vh;
}
body {
background-image: url(/Component\1\–\1svg);
background-repeat: no-repeat;
padding: none;
margin: none;
font-family: "Alata", sans-serif;
background-color: #e5e5e5;
display: flex;
flex-direction: column;
}
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
flex: 1 0 auto;
}
.waveContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#wave {
position: absolute;
z-index: -1;
}
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
max-height: 500px; /* both max width and height are not being applied to the div; notice how the div is not 1600x500 */
opacity: 0.6;
background-color: yellow;
}
.contact {
width: 369px;
height: 71px;
border: 0;
padding: 0;
background: #00d1ff;
border-radius: 12px;
border-color: 20px white;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 71px;
text-align: center;
letter-spacing: 0.3em;
margin: 0px 0px 0px 0px;
color: #ffffff;
}
<body>
<div class="content">
<div class="waveContainer">
<svg id="wave" data-name="Component 1 – 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1" data-name="Rectangle 1" width="100%" height="100%" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_1" data-name="Mask Group 1" clip-path="url(#clip-path)">
<path id="Vector_3_3" data-name="Vector 3 3" d="M827.436,426.125C1163.09,111.934,1825.38,153.689,1986.77,0L2157,822.019,12.675,854-34,562.171C215.951,541.969,491.785,740.316,827.436,426.125Z" transform="translate(-46 122)" fill="#00d1ff" />
<path id="Vector_2_2" data-name="Vector 2 2" d="M827.436,426.125C1163.09,111.934,1825.38,153.689,1986.77,0L2157,822.019,12.675,854-34,562.171C215.951,541.969,491.785,740.316,827.436,426.125Z" transform="translate(-37 195)" fill="#00bae2" />
<path id="Vector_1_1" data-name="Vector 1 1" d="M831.436,426.125C1167.09,111.934,1829.38,153.689,1990.77,0L2161,822.019,16.675,854-30,562.171C219.951,541.969,495.785,740.316,831.436,426.125Z" transform="translate(-42 273)" fill="#009abc" />
</g>
</svg>
</div>
<div class="flexParent">
<div class="programmer">
<svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g clip-path="url(#clip0)">
<path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
<path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
<path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
<path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
<path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
<path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
<path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />
<path d="M404.397 141.047H250.498C250.183 141.047 249.881 140.922 249.659 140.699C249.436 140.476 249.311 140.174 249.311 139.859C249.311 139.544 249.436 139.242 249.659 139.02C249.881 138.797 250.183 138.672 250.498 138.672H404.397C404.553 138.672 404.708 138.702 404.852 138.762C404.996 138.822 405.127 138.909 405.237 139.02C405.347 139.13 405.435 139.261 405.495 139.405C405.554 139.549 405.585 139.703 405.585 139.859C405.585 140.015 405.554 140.17 405.495 140.314C405.435 140.458 405.347 140.589 405.237 140.699C405.127 140.809 404.996 140.897 404.852 140.956C404.708 141.016 404.553 141.047 404.397 141.047V141.047Z" fill="#F2F2F2" />
<path d="M297.76 154.11H199.911C199.596 154.11 199.294 153.985 199.071 153.763C198.849 153.54 198.723 153.238 198.723 152.923C198.723 152.608 198.849 152.306 199.071 152.083C199.294 151.86 199.596 151.735 199.911 151.735H297.76C298.075 151.735 298.377 151.86 298.6 152.083C298.823 152.306 298.948 152.608 298.948 152.923C298.948 153.238 298.823 153.54 298.6 153.763C298.377 153.985 298.075 154.11 297.76 154.11V154.11Z" fill="#F2F2F2" />
<path d="M404.397 154.348H306.548C306.233 154.348 305.931 154.223 305.708 154C305.486 153.777 305.36 153.475 305.36 153.16C305.36 152.845 305.486 152.543 305.708 152.321C305.931 152.098 306.233 151.973 306.548 151.973H404.397C404.712 151.973 405.014 152.098 405.237 152.321C405.46 152.543 405.585 152.845 405.585 153.16C405.585 153.475 405.46 153.777 405.237 154C405.014 154.223 404.712 154.348 404.397 154.348V154.348Z" fill="#F2F2F2" />
<path d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="#2F2E41" />
<path opacity="0.1" d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="black" />
<path d="M90.1718 307.533C88.1423 312.998 91.1255 318.903 93.7173 324.124C100.102 336.987 104.536 350.713 108.947 364.38C109.277 365.404 109.607 366.521 109.239 367.532C108.921 368.25 108.405 368.862 107.751 369.297C104.71 371.607 100.838 372.43 97.2152 373.638C93.7144 374.807 90.3615 376.378 87.2241 378.322C84.5991 379.949 82.1401 381.827 79.686 383.701L71.8735 389.668C71.3677 390.01 70.9257 390.438 70.5677 390.933C69.8142 392.115 70.1228 393.658 70.498 395.009C71.4915 398.586 72.7706 402.077 74.323 405.449C74.5785 406.188 75.0648 406.826 75.7102 407.267C76.9296 407.922 78.4211 407.054 79.3523 406.029C80.2834 405.005 81.0888 403.73 82.4014 403.29C83.7125 402.851 85.1555 403.383 86.5248 403.19C88.7393 402.88 90.2096 400.839 91.8059 399.273C98.3279 392.874 109.217 393.338 116.391 387.68C117.428 386.752 118.526 385.895 119.678 385.113C120.891 384.396 122.266 384.002 123.524 383.369C127.352 381.441 129.758 377.456 131.047 373.369C132.336 369.282 132.704 364.967 133.63 360.783C134.109 358.62 134.739 356.48 134.952 354.275C135.089 352.223 135.044 350.164 134.818 348.121L132.23 316.094C132.019 313.487 131.808 310.876 131.399 308.293C123.71 308.567 116.027 308.877 108.335 308.968C102.214 309.04 95.9798 309.468 90.1718 307.533Z" fill="#2F2E41" />
<path d="M87.3455 315.025C88.3884 316.703 90.9269 316.668 92.6748 315.749C94.4228 314.829 95.7808 313.284 97.533 312.372C99.8874 311.147 102.673 311.193 105.327 311.268C109.527 311.386 113.779 311.513 117.82 312.664C122 313.855 126.069 316.147 130.391 315.69C131.143 315.61 131.965 315.394 132.375 314.758C132.615 314.298 132.727 313.781 132.702 313.263L132.843 309.486C132.929 308.833 132.825 308.169 132.542 307.574C132.179 307.079 131.682 306.698 131.11 306.477C124.958 303.499 117.942 302.944 111.112 302.71C107.64 302.591 104.166 302.542 100.691 302.563C97.742 302.581 94.2018 302.155 91.3348 302.943C87.487 304 85.3934 311.886 87.3455 315.025Z" fill="#2F2E41" />
<path d="M125.974 216.124C117.913 216.053 110.609 210.732 102.549 210.602C101.575 210.535 100.6 210.703 99.7046 211.093C98.5815 211.659 97.8432 212.753 96.99 213.677C94.6069 216.258 91.1559 217.636 88.7076 220.155C86.412 222.517 85.1353 226.036 86.0416 229.203C86.9479 232.37 90.3685 234.799 93.573 234.038C94.864 229.858 97.5286 226.238 101.135 223.762C103.011 222.559 104.989 221.521 107.045 220.66C110.667 219.018 114.718 217.346 118.5 218.576C119.895 219.103 121.21 219.82 122.408 220.707L128.713 224.943C127.978 222.045 127.317 218.795 125.974 216.124Z" fill="#007089" />
<path d="M92.6445 231.236C91.5742 232.571 93.116 234.506 92.8801 236.201C92.7233 237.327 91.7965 238.187 91.4106 239.257C91.0109 240.365 91.2228 241.592 91.0712 242.76C90.9191 243.61 90.6941 244.444 90.3987 245.255C89.7196 247.677 89.2457 250.152 88.9818 252.653L87.5709 263.19C87.3261 264.776 87.1771 266.375 87.1247 267.979C87.1958 269.177 87.1157 270.38 86.8863 271.559C86.5738 272.71 85.8821 273.717 85.4167 274.816C84.9514 275.915 84.7357 277.244 85.3643 278.258C83.2591 280.011 82.6331 283.455 84.1051 285.766C84.3854 286.126 84.6046 286.53 84.754 286.961C84.8353 287.564 84.7359 288.177 84.4682 288.723L83.0416 292.525C82.6765 293.498 82.561 294.979 83.5762 295.201C82.7353 296.074 82.0802 297.109 81.6504 298.243C81.4419 298.812 81.3796 299.425 81.4692 300.024C81.5588 300.624 81.7975 301.191 82.1633 301.675C82.5177 301.986 82.8195 302.352 83.057 302.759C83.1965 303.327 83.1605 303.923 82.9537 304.47C82.7404 305.3 82.6992 306.165 82.8328 307.012C82.9665 307.859 83.272 308.669 83.7306 309.393C84.2058 310.108 84.8788 310.668 85.6673 311.006C86.4559 311.344 87.3258 311.445 88.1708 311.297C91.0245 310.653 93.5888 309.637 96.4662 310.165C102.661 311.302 108.877 312.444 114.877 314.359C121.725 316.546 128.356 319.753 135.514 320.426C135.985 320.522 136.474 320.446 136.894 320.211C137.258 319.865 137.485 319.399 137.532 318.899C138.269 315.441 139.007 311.984 139.744 308.526C140.636 304.693 141.314 300.814 141.777 296.907C142.029 294.385 142.101 291.849 142.173 289.315L142.743 269.149C143.01 266.177 142.614 263.182 141.582 260.382L138.303 249.912C136.432 243.938 132.138 238.639 130.61 232.568C129.643 228.725 128.928 224.601 126.334 221.606C122.635 217.336 116.236 216.672 110.635 217.406C108.105 217.738 105.553 218.31 103.364 219.622C100.833 221.14 98.9688 223.53 97.1651 225.866C95.6786 227.791 94.1655 229.338 92.6445 231.236Z" fill="#00657B" />
<path d="M105.722 290.551C106.184 292.541 107.153 294.376 107.746 296.331C108.74 299.606 108.656 303.133 109.648 306.409C110.064 307.784 110.667 309.104 110.966 310.509C111.663 313.785 110.645 317.174 109.382 320.276C108.118 323.377 106.579 326.436 106.169 329.76C105.88 332.101 106.295 334.744 108.1 336.264C109.973 337.841 112.695 337.734 115.135 337.524C116.011 337.5 116.876 337.32 117.689 336.993C119.554 336.11 120.34 333.902 120.777 331.884C122.238 325.122 121.821 318.113 121.396 311.208L120.285 293.15C120.071 289.674 119.842 286.125 118.771 282.787C118.381 281.573 117.702 279.119 116.593 278.344C115.494 277.576 112.358 277.542 110.998 277.478C104.617 277.178 104.688 286.085 105.722 290.551Z" fill="#FBBEBE" />
<path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
</g>
<defs>
<clipPath id="clip0">
<rect width="594" height="451" fill="white" />
</clipPath>
</defs>
</svg>
</div>
CODEPEN
Try to put width and height after max-width and max-height
.flexParent {
display: flex;
justify-content: space-between;
align-items: center;
/* FOR TESTING */
max-width: 1600px;
max-height: 500px;
width: 200px;
height: 300px;
opacity: 0.6;
background-color: yellow;
}

Use SVG image on website with rounded corners - showing white for rounded area

I am creating a very simple React page with an SVG image on it. That SVG image has round corners. I can open it up in GIMP and see the rounded corners shown.
Now I add it to my website like this:
import cardBackR from '../img/cards/2B.svg'
...
<img className='card' src={cardBackR} />
And then when I view the page with the card over a background image, the rounded corners show as white:
Here is the full SVG code of that image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
<defs>
<pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M3 0L6 3L3 6L0 3Z" fill="red"></path>
</pattern>
</defs>
<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"></rect>
<rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect>
</svg>
I've tested this in both Firefox and Chrome. Any ideas what is causing the rounded corners to fail?
SVG in an IMG src should work fine, provided you escape the # with %23
<style>
body{
background:green;
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
class='card' face='2B' height='3.5in' preserveAspectRatio='none' viewBox='-120 -168 240 336' width='2.5in'>
<defs><pattern id='B2' width='6' height='6' patternUnits='userSpaceOnUse'>
<path d='M3 0L6 3L3 6L0 3Z' fill='red'></path></pattern></defs>
<rect width='239' height='335' x='-119.5' y='-167.5' rx='12' ry='12' fill='white' stroke='black'></rect>
<rect fill='url(%23B2)' width='216' height='312' x='-108' y='-156' rx='12' ry='12'></rect>
</svg>">
Figured out the issue. I unfortunately picked a poor name for my class. That is a special class in Bootstrap and that was adding the following CSS:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}

SVG Bounding Box - Hyperlink

I've a number of SVG icons which I'd like to act as hyperlinks when clicked.
I've tried a few different approaches but the result is always the same, the
clickable area is limited to the SVG's path, or to use an analogy, where the pen has touched the paper.
Consequently some icons have a large non-clickable area:
Is it possible to define a bounding box around the icons and make this clickable? EG:
Here's what I have so far:
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<html>
<head>
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="svgicons.css">
</head>
<body>
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>
</body>
</html>
As I've commented I would add a transparent rect before the path. Please Please observe the attribute pointer-events="all" added to make it clickable.
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<!--add a transparent rect before the path -->
<rect width="28" height="28" style="fill:none" pointer-events="all"></rect>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>