Fixed SVG height & variable (100%) width - html

I'm trying to put a svg object on my html page and I want it to have a 100% width and a fixed height.
In my fiddle you can see that the height of the dark-grey object changes according to the window proportions. (This is not what I want)
http://jsfiddle.net/Lq207ery/6/
HTML
<body>
<!-- HEADER -->
<header>
<div class="logo"></div>
<div class="triangle">
<svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
<g>
<!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
<polyline fill="#CC0000" points="0,0 0,200 300,0 "></polyline>
</g>
</svg>
</div>
<div class="nav">
<svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
<polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
</svg>
</div>
</header>
<!-- CONTENT -->
CSS
body {
margin: 0;
}
header svg {
display: block;
margin: 0;
}
header .triangle {
z-index: 200;
}
header .logo {
margin-top: -90px;
}
header .nav {
position: absolute;
top:0;
left:0;
width:100%;
z-index:-1;
}


Give your SVG element a fixed height. If you do not do this the height of the element will change proportional to the width.
Adjust your viewBox to crop to the height of your content.
Fix your preserveAspectRatio value to have the proper case-sensitive value, e.g. xMinYMin (not xMinYmin).
Demo: http://jsfiddle.net/Lq207ery/8/
If you want your dark grey triangle to stretch (not preserving its aspect ratio) then instead use preserveAspectRatio="none".
Demo: http://jsfiddle.net/Lq207ery/9/


You explanation is somewhat short, but you could do it like this :
HTML Code :
<header>
<div class="triangle">
<svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
<g>
<polyline fill="#CC0000" points="0,0 0,200 300,0"/>
</g>
</svg>
</div>
<div class="nav"></div>
</header>
CSS Code :
html, body {
margin: 0;
}
header {
position: relative;
}
header .triangle {
position: relative;
z-index: 2;
}
header .nav {
position: absolute;
top:0;
left:0;
width: 2000px; // big screens
height: 100px;
background-image:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22150px%22%20height%3D%2215px%22%20viewBox%3D%220%200%20150%2015%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23222%22%20points%3D%220%2C15%200%2C0%20100%2C0%20150%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: cover;
background-position: bottom left;
z-index: 1;
}
SVG before url encoding :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="15px" viewBox="0 0 150 15">
<g>
<polygon fill="#222" points="0,15 0,0 100,0 150,0"/>
</g>
</svg>
Demo : http://jsfiddle.net/sparkup/21uaffpy/
Or line this maybe : http://jsfiddle.net/sparkup/21uaffpy/18/


In addition I'd like to add If the svg has the viewBox and preserveAspectRatio all set, another place possibility is to use a container div and font-size something like:
<div style="height: 50px; width: 50px; fontSize: 50px">
<svg>...</svg>
</div>

Related

calc() as SVG coordinate does not re-render when parent width changes

The Issue
In the following HTML code, I'm using the css calc() function to make an SVG line a percentage of the width of the parent container, minus a constant 20px:
<button onclick="myOnClick()">Click me</button>
<div id="my-div">
<svg xmlns="http://www.w3.org/2000/svg">
<line
x1="0px"
x2="calc(100% - 20px)"
y1="30px"
y2="50px"
stroke="#0000FF"
strokeWidth="10px"
/>
</svg>
</div>
When the button is clicked, the width of the parent container is changed.
function myOnClick() {
document.getElementById("my-div").style.width = "400px";
}
The expected behavior is that the line should change its ending coordinate to take into account the new width of the container. However, the line does not change width.
If you go into the element inspector and then change the x2 of the line to another value, then back to calc(100% - 20px), the line DOES update and takes on the new width of the container. This leads me to believe this is a rendering bug in Chrome.
Other Cases
Curiously, when I change one of the y coordinates to a percentage, rather than a pixel value, it works as expected:
<button onclick="myOnClick()">Click me</button>
<div id="my-div">
<svg xmlns="http://www.w3.org/2000/svg">
<line
x1="0px"
x2="calc(100% - 20px)"
y1="30px"
y2="100%" <-- LINE CHANGED
stroke="#0000FF"
strokeWidth="10px"
/>
</svg>
</div>
function myOnClick() {
document.getElementById("my-div").style.width = "400px";
}
#my-div {
width: 200px;
height: 500px;
background-color: red;
position: relative;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
<button onclick="myOnClick()">Click me</button>
<div id="my-div">
<svg xmlns="http://www.w3.org/2000/svg">
<line
x1="0px"
x2="calc(100% - 20px)"
y1="30px"
y2="100%"
stroke="#0000FF"
strokeWidth="10px"
/>
<line
x1="0px"
x2="calc(100% - 20px)"
y1="30px"
y2="50px"
stroke="#0000FF"
strokeWidth="10px"
/>
</svg>
</div>
Question
Is this expected behavior, or is this a bug in Chrome that should be reported?
This question only pertains to Chrome, as Firefox and Safari do not seem to support the calc() function for SVG components.

As calc() doesn't work for svg attributes in Firefox or Safari, you could get a similar layout
by applying padding to the parent <svg>
function myOnClick() {
document.getElementById("my-div").style.width = "400px";
}
#my-div {
width: 200px;
height: 500px;
background-color: red;
position: relative;
}
svg {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-right: 20px;
}
<button onclick="myOnClick()">Click me</button>
<div id="my-div">
<svg xmlns="http://www.w3.org/2000/svg">
<line
x1="0px"
x2="100%"
y1="30px"
y2="100%"
stroke="#0000FF"
strokeWidth="10px"
/>
<line
x1="0px"
x2="100%"
y1="30px"
y2="50px"
stroke="#0000FF"
strokeWidth="10px"
/>
</svg>
</div>

calc() is a CSS function and the x2 attribute is not a presentation attribute (can not be used in CSS) and can only take a length, number or percentage.
What if the width of the SVG was 100% - 20px like in this example:
function myOnClick() {
document.getElementById("my-div").style.width = "400px";
}
#my-div {
width: 200px;
height: 200px;
border: thin solid black;
display: flex;
align-items: flex-end;
flex-direction: column;
}
svg {
width: calc(100% - 20px);
height: 100%;
}
<button onclick="myOnClick()">Click me</button>
<div id="my-div">
<svg xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="30"
x2="100%" y2="50"
stroke="#0000FF"
stroke-width="10" />
</svg>
</div>

How can I make an <svg> element scale to a parent element's height?

I have an <svg> element within a wrapping element.
I want the <svg> to fill the height of the wrapping element, however I cannot seem to get this to work.
I have tried the following:
.image-banner__overlay {
height: 90%;
position: absolute;
z-index: 999;
}
svg {
height: 100%;
background-color: black;
}
path {
fill: red;
height: 100%;
}
<div class="cell small-12 medium-6 image-banner__image-wrapper">
<div class="image-banner__overlay">
<svg>
<path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
</svg>
</div>
<div class="image-banner__image" style="#backgroundImage">
</div>
</div>
But the <svg> seems to only ever take up a max of about 75% of the space, eg:
I've tried using viewBox, eg:
height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
But this makes the SVG way too big (overflows the parent element).
Would anyone know how I could get this to stretch the complete height of the parent element (without turning it into an <img>)?

Here's a viewbox for you, I know it's horrible but you should read up on it!
.image-banner__overlay {
height: 90%;
position: absolute;
z-index: 999;
}
svg {
height: 100%;
background-color: black;
}
path {
fill: red;
height: 100%;
}
<div class="cell small-12 medium-6 image-banner__image-wrapper">
<div class="image-banner__overlay">
<svg viewbox="0 0 80 250">
<path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
</svg>
</div>
<div class="image-banner__image" style="#backgroundImage">
</div>
</div>

Problem making an svg button fully clickable due to other objects nearby

First of, i have made a nearly identical question before, and the problem was fixed (at the time).
I'm making a buttons panel using multiple in-line svgs. All of them work perfectly and have been position just where i want them, but this has render my central (home) button parcially ineffective.
Basically, the top half works great and the bottom one is NOT clickable (i'd like to solve this).
The bounding box of another button runs through that area, though it is not visible. This is the same problem i fix before, by appliying a circle clip path to the home button, but for some reason this doesn't work anymore.
Below i leave a piece of html with the svgs and relevant divs. You'll also find my css data, which shows how was all positioned and what kind of clip paths are active.
PS: Sorry for long code, i'm new and don't know how much info you need.
#brand{
position: absolute;
clip-path: circle(50%);
}
#reserve{position: absolute;}
#services{margin: auto;}
#faq{margin: auto;}
#login{margin: auto;}
#destinies{margin: auto;}
#media screen and (min-width: 751px){
#wide-interface{
overflow: hidden;
white-space: nowrap;
letter-spacing: 5px;
text-align: center;
}
#brand{
width: 9.5%;
overflow: hidden;
top: 2.6%;
left: 0;
right: 0;
}
#reserve{
width: 83%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
top: 12%;
left: 0;
right: 0;
}
#faq{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: 1%
}
#header{padding-bottom: 5%;}
#login{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
#services{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: -3%;
}
#destinies{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-left: -3%;
}
<div id="wide-interface">
<div id="top-buttons">
<div id="services">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.47 59.96"><defs>
<style>.cls-3{fill:#ffffff;}</style>
</defs><a xlink:href="services.html"><path class="cls-3" d="M0,0V42.09A17.81,17.81,0,0,0,17.81,59.91L258,60c1.27-23.16,12.07-42.66,33.48-59.9ZM76.15,37.75a7.42,7.42,0,0,1-3.22,2.5,13.09,13.09,0,0,1-5.22.94,19.78,19.78,0,0,1-5.06-.65,12.32,12.32,0,0,1-4-1.72l2-4.48A12.76,12.76,0,0,0,64,35.88a13,13,0,0,0,3.74.58c2.33,0,3.5-.58,3.5-1.75a1.46,1.46,0,0,0-1-1.37,18.22,18.22,0,0,0-3.2-.93A30.42,30.42,0,0,1,63,31.29a6.83,6.83,0,0,1-2.8-1.92A5.17,5.17,0,0,1,59,25.81a6.16,6.16,0,0,1,1.07-3.55,7.3,7.3,0,0,1,3.21-2.5,13.24,13.24,0,0,1,5.23-.92,18.27,18.27,0,0,1,4.17.48,13.13,13.13,0,0,1,3.63,1.39l-1.88,4.52a12.43,12.43,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.6,1.6,0,0,0,65,25.5a1.4,1.4,0,0,0,1,1.29,17.91,17.91,0,0,0,3.16.89,29.55,29.55,0,0,1,4.07,1.12A6.92,6.92,0,0,1,76,30.7a5.1,5.1,0,0,1,1.19,3.55A6,6,0,0,1,76.15,37.75Zm21.12,3H80V19.27H96.87V24H86v3.62h9.55v4.54H86v3.93H97.27Zm16.66,0L110,35.05h-3.31v5.71h-6.08V19.27h9.82a12.2,12.2,0,0,1,5.07,1A7.47,7.47,0,0,1,118.84,23,7.55,7.55,0,0,1,120,27.22a7.55,7.55,0,0,1-1.09,4.07A7.4,7.4,0,0,1,115.8,34l4.64,6.76Zm22,0h-6l-9.18-21.49h6.57l5.83,14,6-14h6Zm16.54,0H146.4V19.27h6.08Zm10.11-7.54a5.31,5.31,0,0,0,2.12,2.16,6.16,6.16,0,0,0,3.11.77,6.37,6.37,0,0,0,5.07-2.52l3.86,3.5a10.11,10.11,0,0,1-3.93,3,12.89,12.89,0,0,1-5.3,1,12.74,12.74,0,0,1-6.07-1.43,10.71,10.71,0,0,1-4.22-4A11,11,0,0,1,155.7,30a11,11,0,0,1,1.53-5.77,10.76,10.76,0,0,1,4.22-4,12.74,12.74,0,0,1,6.07-1.43,12.89,12.89,0,0,1,5.3,1.05,10.08,10.08,0,0,1,3.93,3l-3.86,3.5a6.36,6.36,0,0,0-5.07-2.51,6.26,6.26,0,0,0-3.11.76,5.34,5.34,0,0,0-2.12,2.17,7.22,7.22,0,0,0,0,6.41Zm34.11,7.54H179.45V19.27H196.3V24H185.47v3.62H195v4.54h-9.54v3.93H196.7Zm19.37-3a7.42,7.42,0,0,1-3.22,2.5,13.16,13.16,0,0,1-5.22.94,19.91,19.91,0,0,1-5.07-.65,12.51,12.51,0,0,1-4-1.72l2-4.48a12.84,12.84,0,0,0,3.34,1.54,13.06,13.06,0,0,0,3.75.58c2.33,0,3.5-.58,3.5-1.75a1.47,1.47,0,0,0-1-1.37,18.39,18.39,0,0,0-3.21-.93,31.31,31.31,0,0,1-4-1.12,6.87,6.87,0,0,1-2.79-1.92,5.18,5.18,0,0,1-1.17-3.56A6.17,6.17,0,0,1,200,22.26a7.21,7.21,0,0,1,3.2-2.5,13.32,13.32,0,0,1,5.24-.92,18.27,18.27,0,0,1,4.17.48,12.94,12.94,0,0,1,3.62,1.39l-1.87,4.52a12.46,12.46,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.58,1.58,0,0,0,205,25.5a1.38,1.38,0,0,0,1,1.29,17.65,17.65,0,0,0,3.16.89,30,30,0,0,1,4.07,1.12A7.06,7.06,0,0,1,216,30.7a5.09,5.09,0,0,1,1.18,3.55A6.1,6.1,0,0,1,216.07,37.75Z"/><path class="cls-3" d="M110.09,24.06h-3.37v6.29h3.37a4.28,4.28,0,0,0,2.83-.81,2.9,2.9,0,0,0,1-2.32,2.94,2.94,0,0,0-1-2.33A4.23,4.23,0,0,0,110.09,24.06Z"/></a></svg>
</div>
<div id="faq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-4{fill:#ffffff;}</style></defs><path class="cls-4" d="M124.63,27.62a6.49,6.49,0,0,0-.75-3.15,5.36,5.36,0,0,0-2-2.12,5.92,5.92,0,0,0-5.77,0,5.36,5.36,0,0,0-2,2.12,6.49,6.49,0,0,0-.75,3.15,6.42,6.42,0,0,0,.75,3.14,5.3,5.3,0,0,0,2,2.12,5.86,5.86,0,0,0,5.77,0,5.3,5.3,0,0,0,2-2.12A6.42,6.42,0,0,0,124.63,27.62Z"/><polygon class="cls-4" points="82.78 29.66 88.19 29.66 85.48 22.92 82.78 29.66"/><path class="cls-4" d="M35.82,0C14.44,17.22,1.3,36.68,0,59.79l155.46.11A63.86,63.86,0,0,1,209.09.8V0ZM63.88,21.69H53.32v4.63h9.3v4.61h-9.3v7.22h-6V17.09H63.88ZM71,37.46a3.59,3.59,0,0,1-4.89,0,3.5,3.5,0,0,1,0-4.88,3.72,3.72,0,0,1,4.92,0,3.57,3.57,0,0,1,0,4.88Zm20.62.69-1.65-4.09H81l-1.65,4.09H73.3l9.3-21.06h5.86l9.33,21.06ZM105,37.46a3.59,3.59,0,0,1-4.89,0,3.53,3.53,0,0,1,0-4.88,3.44,3.44,0,0,1,2.46-.93,3.39,3.39,0,0,1,2.46.93A3.24,3.24,0,0,1,106,35,3.29,3.29,0,0,1,105,37.46Zm24.16,5.1a8.08,8.08,0,0,1-3.32.68,9.62,9.62,0,0,1-6-1.94,25.31,25.31,0,0,1-3.2-2.91,11.68,11.68,0,0,1-4.88-2,10.55,10.55,0,0,1-3.32-3.8,10.75,10.75,0,0,1,4.51-14.56,13.49,13.49,0,0,1,12,0,10.54,10.54,0,0,1,5.7,9.54,10.57,10.57,0,0,1-7.16,10.17,3.84,3.84,0,0,0,1.19.93A3,3,0,0,0,126,39a4.35,4.35,0,0,0,3.19-1.47l2.58,3.07A6.9,6.9,0,0,1,129.16,42.56Z"/></svg>
</div>
<div id="login">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-5{fill:#ffffff;}</style></defs><path class="cls-5" d="M97.83,24.58a6,6,0,0,0-5.89,0,5.57,5.57,0,0,0-2.09,2.16,7.16,7.16,0,0,0,0,6.42,5.57,5.57,0,0,0,2.09,2.16,6,6,0,0,0,5.89,0,5.5,5.5,0,0,0,2.09-2.16,7.08,7.08,0,0,0,0-6.42A5.5,5.5,0,0,0,97.83,24.58Z"/><path class="cls-5" d="M173.27,0H0V.8A63.85,63.85,0,0,1,53.63,59.9l155.46-.11C207.8,36.68,194.65,17.22,173.27,0ZM82,40.69H65.67V19.21h6.08V35.87H82Zm23.28-5a10.87,10.87,0,0,1-4.27,4,13.75,13.75,0,0,1-12.25,0A10.76,10.76,0,0,1,83,30a10.76,10.76,0,0,1,5.81-9.73,13.75,13.75,0,0,1,12.25,0,11.16,11.16,0,0,1,4.27,15.47Zm10.54-2.56A5.56,5.56,0,0,0,118,35.31a6.3,6.3,0,0,0,3.16.78,7.77,7.77,0,0,0,3.28-.71V29.49h5.37v8.9a13.94,13.94,0,0,1-4.23,2,16.88,16.88,0,0,1-4.79.7,12.72,12.72,0,0,1-6.08-1.43,10.58,10.58,0,0,1-4.23-4A11,11,0,0,1,108.91,30a11,11,0,0,1,1.54-5.77,10.54,10.54,0,0,1,4.26-4,13.14,13.14,0,0,1,6.17-1.43,13.79,13.79,0,0,1,5.4,1,10.4,10.4,0,0,1,4,2.92l-3.86,3.5a6.82,6.82,0,0,0-5.22-2.4A5.79,5.79,0,0,0,115.05,30,6.51,6.51,0,0,0,115.82,33.13Zm32.84,7.56h-6.08V19.21h6.08Zm24.76,0h-5l-9.48-11.44V40.69h-6V19.21h5l9.48,11.45V19.21h5.95Z"/></svg>
</div>
<div id="destinies">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.47 59.84"><defs><style>.cls-6{fill:#ffffff;}</style></defs><path class="cls-6" d="M79.37,24H75.53V35.78h3.84a6.2,6.2,0,0,0,4.43-1.57,5.63,5.63,0,0,0,1.67-4.32,5.66,5.66,0,0,0-1.67-4.33A6.24,6.24,0,0,0,79.37,24Z"/><path class="cls-6" d="M0,0C21.41,17.25,32.22,36.75,33.49,59.9l240.17-.11A17.83,17.83,0,0,0,291.47,42V-.13ZM90.11,35.57a10,10,0,0,1-4.24,3.74,14.22,14.22,0,0,1-6.26,1.32H69.45V19.15H79.61a14.22,14.22,0,0,1,6.26,1.32,10,10,0,0,1,4.24,3.74,10.58,10.58,0,0,1,1.5,5.68A10.58,10.58,0,0,1,90.11,35.57Zm21.94,5.06H94.8V19.15h16.85v4.69H100.82v3.62h9.54V32h-9.54v3.92h11.23Zm19.37-3a7.25,7.25,0,0,1-3.23,2.5,12.9,12.9,0,0,1-5.21.94,19.91,19.91,0,0,1-5.07-.65,12.74,12.74,0,0,1-4-1.71l2-4.49A13.46,13.46,0,0,0,123,36.33c2.33,0,3.5-.58,3.5-1.75a1.45,1.45,0,0,0-1-1.36,18.49,18.49,0,0,0-3.21-.94,30.42,30.42,0,0,1-4-1.12,6.8,6.8,0,0,1-2.79-1.92,5.16,5.16,0,0,1-1.17-3.56,6.12,6.12,0,0,1,1.08-3.54,7.07,7.07,0,0,1,3.2-2.5,13.09,13.09,0,0,1,5.23-.92,18.29,18.29,0,0,1,4.18.47,12.65,12.65,0,0,1,3.62,1.4l-1.87,4.51a12.47,12.47,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.61,1.61,0,0,0-.82,1.4,1.38,1.38,0,0,0,1,1.29,17.82,17.82,0,0,0,3.16.88,29.81,29.81,0,0,1,4.07,1.13,7,7,0,0,1,2.79,1.9,5.06,5.06,0,0,1,1.18,3.54A6.08,6.08,0,0,1,131.42,37.62ZM152.19,24h-6.56V40.63h-6.08V24H133V19.15h19.24Zm8.35,16.67h-6.08V19.15h6.08Zm24.77,0h-5l-9.48-11.45V40.63h-5.95V19.15h5l9.48,11.44V19.15h6Zm10.37,0H189.6V19.15h6.08Zm21.58,0H200V19.15h16.85v4.69H206v3.62h9.55V32H206v3.92h11.24Zm19.36-3a7.22,7.22,0,0,1-3.22,2.5,12.92,12.92,0,0,1-5.22.94,19.83,19.83,0,0,1-5.06-.65,12.54,12.54,0,0,1-4-1.71l2-4.49a13.53,13.53,0,0,0,7.09,2.12c2.34,0,3.5-.58,3.5-1.75a1.44,1.44,0,0,0-1-1.36,18,18,0,0,0-3.2-.94,30.42,30.42,0,0,1-4-1.12,6.83,6.83,0,0,1-2.8-1.92,5.21,5.21,0,0,1-1.16-3.56,6.11,6.11,0,0,1,1.07-3.54,7.16,7.16,0,0,1,3.21-2.5,13.06,13.06,0,0,1,5.23-.92,18.26,18.26,0,0,1,4.17.47,12.71,12.71,0,0,1,3.63,1.4l-1.88,4.51a12.43,12.43,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.62,1.62,0,0,0-.83,1.4,1.4,1.4,0,0,0,1,1.29,18,18,0,0,0,3.17.88,29.63,29.63,0,0,1,4.06,1.13,6.82,6.82,0,0,1,2.79,1.9,5.07,5.07,0,0,1,1.19,3.54A6,6,0,0,1,236.62,37.62Z"/></svg>
</div>
</div>
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106"><defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs><a xlink:href="index.html"><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></a></svg>
</div>
<div id="reserve">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 944.38 115.07">
<defs><style>.cls-2{fill:#ff7800;}</style></defs>
<a xlink:href="reserve.html"><path class="cls-2" d="M494.41,80.8h-3.78v7h3.78a4.7,4.7,0,0,0,3.15-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.65,4.65,0,0,0,494.41,80.8Z"/><path class="cls-2" d="M400.62,80.8h-3.77v7h3.77a4.73,4.73,0,0,0,3.16-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.68,4.68,0,0,0,400.62,80.8Z"/><path class="cls-2" d="M940.67,10a55.59,55.59,0,0,0,3.71-10H535.66A63.67,63.67,0,0,1,474,59.85h-3.54A63.67,63.67,0,0,1,408.72,0H0A55.59,55.59,0,0,0,3.71,10H364.28V20H9.42a68.63,68.63,0,0,0,8.32,10H364.28V40H30.75C40.78,45.88,53.9,50,71,50H364.29V98.82a16.24,16.24,0,0,0,16.25,16.25h183.3A16.25,16.25,0,0,0,580.1,98.82V50H873.4c17.08,0,30.2-4.12,40.23-10H580.1V30H926.64A68.52,68.52,0,0,0,935,20H580.1V10ZM404.92,99.48l-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.75,8.75,0,0,1,3.8,12.37,8.38,8.38,0,0,1-3.49,3l5.19,7.55Zm29.84,0h-19.3v-24h18.85V80.7H422.19v4h10.68v5.08H422.19v4.4h12.57Zm21.67-3.36a8.25,8.25,0,0,1-3.61,2.79,14.55,14.55,0,0,1-5.84,1,22.23,22.23,0,0,1-5.66-.72,14,14,0,0,1-4.47-1.92l2.23-5A14.38,14.38,0,0,0,442.83,94a14.06,14.06,0,0,0,4.19.65c2.61,0,3.91-.65,3.91-2a1.62,1.62,0,0,0-1.11-1.53,21.14,21.14,0,0,0-3.59-1,35.84,35.84,0,0,1-4.54-1.25,7.63,7.63,0,0,1-3.12-2.15,5.79,5.79,0,0,1-1.31-4,6.84,6.84,0,0,1,1.21-4,8,8,0,0,1,3.59-2.8,14.69,14.69,0,0,1,5.85-1,20.9,20.9,0,0,1,4.67.53,14.31,14.31,0,0,1,4.05,1.57l-2.09,5a14.06,14.06,0,0,0-6.66-1.85,5.63,5.63,0,0,0-3,.6,1.79,1.79,0,0,0-.92,1.56,1.55,1.55,0,0,0,1.09,1.45,20.1,20.1,0,0,0,3.54,1,34.24,34.24,0,0,1,4.55,1.25,8,8,0,0,1,3.13,2.13,5.72,5.72,0,0,1,1.32,4A6.8,6.8,0,0,1,456.43,96.12Zm23.62,3.36h-19.3v-24h18.86V80.7H467.48v4h10.68v5.08H467.48v4.4h12.57Zm18.65,0-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.42,8.42,0,0,1,3.71,3.09,8.5,8.5,0,0,1,1.31,4.73,8.41,8.41,0,0,1-1.22,4.55,8.32,8.32,0,0,1-3.49,3L506,99.48Zm24.62,0h-6.7l-10.26-24h7.34l6.53,15.66,6.66-15.66h6.73Zm31,0H535v-24h18.85V80.7H541.76v4h10.68v5.08H541.76v4.4h12.57Z"/></a></svg>
</div>
</div>

Equivalent to background position percentage (%) in SVG

I have an SVG image that has the equivalent of background-size: cover; assigned to it using preserveAspectRatio="xMidYMid slice".
However on phone devices less than 737px I'd like to move this image to the left within its container. If was was using the CSS background property I would just do background-position: 85%; or similar.
Is there an equivalent way of doing this with SVG images?
Codepen: https://codepen.io/emilychews/pen/Zqragv
Many thanks in advance for any help.
body {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
#section-1, .home-image-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.home-image, .home-image-wrapper {
position: absolute;
right: 0;
}
#home-image-1 {right: 0%}
<section id="section-1">
<div class="home-image-wrapper">
<svg class="home-image" id="home-image-1" width="60%" height="100%">
<image xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
</svg>
</div>
</section>

Setting position on svg elements
If you just want to change the svg element on a container (assuming <g> element).
You can apply a simple transform on any element:
Example:
<svg viewBox="0 0 100 100" width="300px">
<!--black rect-->
<g>
<rect x="0" y="0" width="20" height="20" />
</g>
<!--blue rect-->
<g transform="translate(20)" fill="#08a">
<rect x="0" y="20" width="20" height="20" />
</g>
</svg>

In SVG you can set the viewBox attribute. This defines the x, y, width and height of the visible part of the SVG. Let's say your jpg image has a width of 200 and a height of 100. In this case you set viewBox="0 0 200 100" by default to the <svg> element. On phone devices you can change the the viewBox value to something like 50 0 100 100, which would only display the middle 100 pixels of the image.
You can find more on the viewBox attribute here: http://jonibologna.com/svg-viewbox-and-viewport/

Cutting hole in DIV with background image [duplicate]

Is there an elegant, some kind of an easy way to switch the circle's background with the div's background under them?
I want the circles to apply the div "one" image background, but the div "one" to be invisible(not the visibility:hidden ofc).
I don't need to hardcore the heck out of it, I want an elegant/sort of an easy way to make this.
IE10/11 support and above.
.one {
position: relative;
width: 500px;
height: 300px;
background-image: url("https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg");
}
.two,
.three {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 15px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
}
.three {
left: initial;
right: 15px;
}
<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>

I don't think there is an easy CSS solution for this but you can use SVG:
body {
background: linear-gradient(to right, blue, red)
}
<svg width="500" height="300">
<defs>
<!-- define the mask-->
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- the first hole -->
<circle r="50" cx="100" cy="150" fill="black"/>
<!-- the second hole -->
<circle r="50" cx="400" cy="150" fill="black"/>
</mask>
<!-- define the background image -->
<pattern id="img" patternUnits="userSpaceOnUse" width="500" height="300">
<image xlink:href="https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg" x="0" y="0" width="500" height="300" />
</pattern>
</defs>
<!-- create a rect, fill it with the image and apply the above mask -->
<rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>