css on focus change another div's styling - html
I want the svg to change the fill color when a user have focus on the input.
But I don't understand how to write the css to make it happen.
Added Html and css for you to check out! I'm using scss for the css.
<div class="search">
<svg width="20px" height="20px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Icon-Search" fill="#b3b3b3" fill-rule="nonzero">
<path d="M86.829,81.172 L64.128,58.471 C69.055,52.312 72,44.5 72,36 C72,16.118 55.883,0 36,0 C16.118,0 0,16.118 0,36 C0,55.882 16.118,72 36,72 C44.5,72 52.312,69.054 58.471,64.127 L81.172,86.828 C81.953,87.609 82.977,88 84,88 C85.024,88 86.048,87.609 86.829,86.828 C88.391,85.267 88.391,82.733 86.829,81.172 Z M36,64 C20.536,64 8,51.464 8,36 C8,20.536 20.536,8 36,8 C51.465,8 64,20.536 64,36 C64,51.464 51.465,64 36,64 Z" id="Shape"></path>
</g>
</g>
</svg>
<input class="input inputSearchField" type="text" placeholder="Search...">
</div>
.input{
width: 250px;
height: 35px;
padding-left: 16px;
font-weight: 700;
background-color: $white-color;
border-radius: 4px;
border: 1px solid $lighter-gray;
font-size: 16px;
outline:none;
transition: all 0.30s ease-in-out;
&::placeholder {
color: $light-gray;
}
&:focus {
box-shadow: 0 0 5px #64e469;
border: 1px solid #64e469;
}
}
.search {
position: relative;
margin: 0 auto;
text-align: center;
width: 270px;
margin-bottom: 30px;
}
.search svg {
position: absolute;
top: 7px;
right: 22px;
fill: $lighter-gray;
}
Check out this CodePen Demo. You'll need to move your input before your SVG, otherwise you'll have to use some JavaScript to do this, because CSS doesn't have a "look behind" selector of any kind. Even the General Sibling Combinator only looks ahead of the current selector target.
If you move the input first, you can just do:
.input:focus + svg #Icon-Search {
fill: #64e469;
}
If you do want to keep the current structure, the JavaScript would look something like on this Demo
let search = document.getElementsByClassName('inputSearchField');
let svgFill = document.getElementById('Icon-Search');
search[0].onfocus = function(){ svgFill.style.fill = '#64e469'; }
search[0].onblur = function(){ svgFill.style.fill = '#b3b3b3'; }
You can see it's a fair bit more tedious!
I'm wondering that you have a html like it:
<div class="search">
<input class="input" />
<svg />
</div>
Your css can be something like this:
.input:focus + svg { ... }
If svg comes before input, then you can use ~ instead +
Related
How do I use an HTML inline tag inside a string?
I have an svg icon (which is the symbol of the Enter key): <kbd class="DocSearch-Commands-Key"> <svg width="15" height="15" aria-label="Enter key" role="img"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"> <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path> </g> </svg> </kbd> I have an input text field like this: <input type="text" placeholder="Press the ENTER key"> I want to append the svg icon inside the placeholder of the input field, such that the placeholder is like Press the <-| key How do I achieve this? EDIT: The button icons should be like this: enter image description here
You can't do it with placeholder property since it only supports text.
If your icon can be a font icon, you could do it as Use Font Awesome Icon in Placeholder.
There's a workaround that you could fake a placeholder using :placeholder-shown pseudo class, so the "placeholder" can be anything.
For example:
.input-wrapper {
position: relative;
}
.input-wrapper .placeholder {
display: none;
height: 100%;
top: 0;
left: 8px;
align-items: center;
position: absolute;
pointer-events: none;
opacity: 0.5;
font-size: 0.8em;
}
.input-wrapper input:placeholder-shown + .placeholder {
display: flex;
}
/* customization */
input {
padding: 6px;
}
.DocSearch-Commands-Key {
border: solid 1px #ccc;
border-radius: 4px;
height: 16px;
display: flex;
align-items: center;
margin: 0 4px;
margin-top: -1px;
padding: 0 4px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
background-color: #eee;
}
<div class="input-wrapper">
<input type="text" placeholder=" ">
<span class="placeholder">
Press the
<kbd class="DocSearch-Commands-Key">
<svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
key
</span>
</div>
First, you need to convert your SVG to URI to use as a background.
I used the following site to convert the SVG to URI
SVG to CSS background-image converter
Then you need to adjust the width of your input field to show it in the centre of the text.
You can also adjust the width of the SVG to adjust it between words.
function myFunction()
{
let input = document.getElementById('input')
if(input.value.length>0)
{
input.style.background = 'none'
}
else{
input.style.background = `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat`;
}
}
label {
position: relative;
}
input {
padding: 10px 10px;
width: 150px;
border: none;
border-left: 2px solid black;
outline: none;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat;
background-origin:border-box;
}
<label>
<input type="text" placeholder="Press the Key" id='input' oninput="myFunction();"/>
</label>
Inverted border radius using a :before background?
I want to do an inverted border radius using a background, like so:
Here is my code:
.curved {
background: #D3041E;
height: 200px;
width: 100%;
position: relative;
}
.curved::before {
content: '';
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
position: absolute;
top: 0;
width: 100%;
background: #fff;
height: 3%;
}
<div class="curved">
</div>
and here's what I get so far:
Since you have no fine control on the curve made by border radius, the next best option could be drawing splines with svg.
I made a very simple path with a basic bezier curve for the sake of this example. There are further details here:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Frankly speaking the path I chose may not perfectly match with your expected result, anyway feel free to walk through this path (no pun intended) if you can't find the solution aimed for using the magics of borders and you want to consider a different option.
I also added a range slider to show how to alter the curve in real time keeping in mind that here I have only one control point for the bezier curve that I'm simply shifting on the y axis.
const slider = document.querySelector('input[type=range]');
slider.addEventListener('input',(event)=>{
changeCurve(event.target.value);
});
function changeCurve(y){
const d = `M 0 0 Q 50 ${y} 100 0`;
document.querySelector('.curved svg path')
.setAttribute('d', d);
}
.curved{
background: #D3041E;
height: 200px;
position: relative;
border: solid 8px black;
border-top: none;
margin: 1em;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
border: solid;
}
input[type=range]{
cursor: pointer;
margin: 1em;
}
<div class="slider">
<label>Change the curve:</label>
<input
id="slider"
type="range"
value="50"
min="0"
max="100"
step="1">
</div>
<div class="curved">
<svg width="100%" viewBox="0 0 100 100">
<path d="M 0 0 Q 50 5 100 0" fill="white" />
</svg>
</div>
Justify the text inside a grid
I'm trying to justify my text inside a grid on cargo collective. Till now I couldn't do that and I had to export a svg for each title and place it as an image (like in this page: https://gracegloriadenis.com/IN-FROM-AND-WITH)
But right now the text would be afftected by a dark mode toggle and a svg won't be affected at all so I'll have to find a solution to justify the text in the div (as in "In, From and With" the title of the page I've just shared with you)
This is my code:
<div grid-col="x12" grid-pad="0" class=""><h1>CIVITONIA</h1>
Civitonia is the title that should be justified and it should touch both sides of the div always. Doing that I'd like not to have a size for the text (ex: font size:45rem;) but to have the text as big as the container. Is it possible?
Doing that it would be a lot easier even to have a responsive version of it, as the box would be smaller in the mobile and the text would follow it.
This is the script I'm using for the dark mode:
the script
<button onclick="myFunction()">Dark Mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
CSS related to it:
.dark-mode {
background-color: black!important;
color: #d9ff76!important;
}
.dark-mode button {
color: black!important;
background-color: #d9ff76;
padding: 5px 5px 5px 5px;
border-radius: 15px;
border: solid 1px #000000;
cursor: pointer;
position: absolute;
bottom: 10px;
}
Best you're going to get with just CSS (which is pretty close) is using clamp for font size, use like:
font-size: clamp(<min value>, <preferred value>, <max value>);
Then you set "min value" to 0px and set "max value" to 1000px (a value that will never be reached). The preferred value will need some tweaking based on the font family used and the amount of characters -- so you will have to do it on a per instance basis. I've set the below example up using CSS custom properties (variables) to make it a bit easier, all you have to do is set --clampFontSize: <prefered-value> on an element (preferably in vw units (viewport width))
body { line-height: 1; margin: 0 } h1 { margin: 0 }
.clampText h1 {
font-size: clamp(0px, var(--clampFontSize, 1vw), 1000px);
text-align: center
}
<div class="clampText" style="--clampFontSize: 17.5vw">
<h1>CIVITONIA</h1>
</div>
<div class="clampText" style="--clampFontSize: 12vw">
<h1>In, from, <em>and</em> with</h1>
</div>
Otherwise, if you put your SVG inline then you can control the color on the fly with CSS — the example will have a dark gradient background and white svg color if dark mode is on. Else it will have a light gradient background and black svg color if dark more is off
Note each <path> is set to fill: currentColor in the CSS, this is to inherit the path fill color from the parent <svg> which is inheriting the color from #colorOuterSVG — sometimes paths shouldn’t be filled though and instead have a stroke, or sometimes it’s a circle or something else. So the CSS may need to be adapted to your needs.
The gradients and button color are setup using CSS Custom Properties (variables)
:root {
--gradient1: #fca5a5, #fcd34d, #bef264, #6ee7b7, #67e8f9; /* Body */
--gradient2: #f0abfc, #c4b5fd, #93c5fd, #67e8f9, #6ee7b7; /* SVG Container */
--color: black; --contrast: white;
--darkOn: none; --darkOff: block;
}
:root.dark-mode {
--gradient1: #991b1b, #92400e, #3f6212, #065f46, #155e75; /* Body */
--gradient2: #86198f, #5b21b6, #1e40af, #155e75, #065f46; /* SVG Container */
--color: white; --contrast: black;
--darkOn: block; --darkOff: none;
}
body { background: linear-gradient(60deg, var(--gradient1)) no-repeat }
.darkModeOn { display: var(--darkOn) }
.darkModeOff { display: var(--darkOff) }
button {
background-color: var(--contrast);
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
cursor: pointer;
display: inline-flex;
align-items: center;
margin-bottom: 8px;
padding: .5em 1em;
}
button span { margin-right: .25em }
.colorOuterSVG {
background: linear-gradient(60deg, var(--gradient2)) no-repeat;
border: 1px solid currentColor;
border-radius: 0.375em;
color: var(--color);
padding: 0.5em
}
.colorSVG { display: block }
.colorSVG path { fill: currentColor }
<button onclick="document.documentElement.classList.toggle('dark-mode')"><span class="darkModeOn">Disable</span><span class="darkModeOff">Enable</span>Dark Mode</button>
<div class="colorOuterSVG">
<svg class="colorSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1920 239.3" style="enable-background:new 0 0 1920 239.3;" xml:space="preserve">
<g>
<path d="M20.5,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C14.5,180,20.5,175.1,20.5,165.3z"/>
<path d="M87.6,165.3v-116c0-8.5-1.5-14.3-4.6-17.5c-3.1-3.2-7.8-4.8-14.4-4.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8 c2.9,0.4,7.9,0.6,14.9,0.6c7,0,11.6,0.3,13.8,0.9c2.2,0.6,4.1,2.4,5.9,5.2L179.6,147c0.7,1.1,1.5,1.6,2.4,1.6 c1.5,0,2.3-1.4,2.3-4.1V41.7c0-9.7-5.7-14.6-17.2-14.6c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c3.1,0.4,9.4,0.6,18.9,0.6 c9.5,0,15.8-0.2,18.8-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-9,0-13.6,4.9-13.6,14.6V185c0,4.2-0.6,6.3-1.8,6.3 c-1.2,0-2.6-1.3-4.3-3.8l-87-137.5c-0.8-1.1-1.5-1.6-2.3-1.6c-0.8,0-1.1,0.8-1.1,2.3v114.6c0,9.8,5.4,14.7,16.1,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.4-0.6-12.1-0.9-19.9-0.9c-7.8,0-14.5,0.3-20,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8C82,180,87.6,175.1,87.6,165.3z"/>
<path d="M234.3,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C230,159.6,232,159.1,234.3,159.1z"/>
<path d="M346.2,165.3V41.5c0-9.2-6.3-13.8-18.8-13.8c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c7.8,0.4,17.5,0.6,29,0.6 c11.6,0,22.6-0.1,33.3-0.3c10.6-0.2,21.7-0.3,33.3-0.3c4.7,0.1,7.1,0.9,7.3,2.4v41.3c0,1.5-1.3,2.3-3.8,2.3c-2.5,0-3.8-0.8-3.8-2.3 c0-21.3-8.7-32.3-26.1-32.9l-30.1-1.3c-2.8,0-4.1,1.7-4.1,5.1v62c0,2.6,0.9,3.9,2.8,3.9h16.4c5,0,8.2-1.3,9.7-3.8 c1.4-2.5,2.1-6.7,2.1-12.6V67.8c0-1.1,1.2-1.6,3.5-1.6c2.3,0,3.5,0.5,3.5,1.6c-0.5,5.9-0.8,17.7-0.8,35.6c0,17.9,0.3,29.8,0.8,35.7 c0,1.1-1.2,1.6-3.5,1.6c-2.3,0-3.5-0.5-3.5-1.6v-14.7c0-5.9-0.8-10-2.5-12.4c-1.7-2.4-4.8-3.6-9.3-3.6h-16.7c-1.7,0-2.5,1-2.5,3.1 v53.9c0,9.8,6.3,14.7,18.8,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-5.9-0.6-14.8-0.9-26.6-0.9s-20.6,0.3-26.4,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C340.2,180,346.2,175.1,346.2,165.3z"/>
<path d="M463.7,165.3V41.5c0-9.2-6.3-13.8-19-13.8c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c7.7,0.4,14.8,0.6,21.3,0.6 c6.5,0,13-0.1,19.4-0.3c6.4-0.2,11.7-0.3,15.7-0.3c15.4,0,27.5,4,36.3,12.1c8.8,8.1,13.2,19.7,13.2,34.8c0,23.2-9,37.8-26.9,43.7 c-1.8,0.7-1.8,3.1,0,7.2c9.7,21.5,21.7,40.7,36,57.6c7.4,8.8,13.7,13.2,18.7,13.2c0.9,0,1.4,0.7,1.4,2.2s-0.5,2.2-1.4,2.3 c-2.8,0.3-5,0.5-6.7,0.5c-11,0-19-2.3-24.2-6.8c-8.2-7.1-15.3-15.6-21.2-25.4l-17.6-32.1c-3.2-5.9-5.7-9.7-7.5-11.3 c-1.8-1.6-4.6-2.4-8.4-2.4c-3.7,0-6.6-0.1-8.6-0.4c-2-0.3-3.3-0.2-3.8,0.3s-0.8,1.3-0.8,2.3v49.3c0,9.8,6.5,14.7,19.5,14.7 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.2-0.6-14.1-0.9-26.9-0.9c-12.7,0-21.6,0.3-26.7,0.9c-0.9,0-1.4-1.6-1.4-4.7 s0.5-4.7,1.4-4.8C457.7,180,463.7,175.1,463.7,165.3z M479.8,100.2c0,2.6,1.3,4.2,3.8,4.9c2.5,0.7,6.1,1,10.8,1 c25.9,0,38.8-13.6,38.8-40.9c0-11-3.5-20.2-10.5-27.8c-7-7.6-16.7-11.4-29.1-11.4h-9c-3.1,0-4.6,1.3-4.6,3.9V100.2z"/>
<path d="M586.8,104.9c0-22,5.9-42.5,17.6-61.6c11.8-19,27.6-28.6,47.5-28.6c17.8,0,33,8.7,45.6,26.1c12.6,17.4,18.9,38.9,18.9,64.5 c0,21.4-5.8,41.2-17.5,59.4c-11.6,18.2-27.5,27.2-47.6,27.2c-19.4,0-35.1-8.6-46.9-25.7C592.7,149.2,586.8,128.7,586.8,104.9z M606,97.5c0,26,5,46.6,15,62c10,15.4,20.6,23.1,31.8,23.1c14.2,0,25.2-7.2,33-21.7c7.7-14.5,11.6-32.3,11.6-53.5 c0-23.4-4.9-43.2-14.6-59.4c-9.8-16.2-20.4-24.4-32.1-24.4c-14.1,0-25,7.6-32.9,22.7C609.9,61.6,606,78.6,606,97.5z"/>
<path d="M747.1,165.3l6-118.5c0.4-9-2.4-15-8.4-17.8c-2.7-1.3-6.2-1.9-10.7-1.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 c3,0.4,8,0.6,15,0.6c7,0,11.6,0.6,13.7,1.9c2.1,1.3,3.8,3.7,5.1,7.2l47.5,126.6c0.8,2.3,1.5,3.4,2.1,3.4c0.7,0,1.5-1.2,2.4-3.6 l48.7-127.1c1.4-3.8,3.3-6.2,5.6-7.1c2.3-0.9,6.7-1.3,13.3-1.3c6.6,0,11.4-0.2,14.6-0.6c0.9,0,1.4,1.6,1.4,4.8 c0,3.2-0.5,4.8-1.4,4.8c-8.6,0-14.2,2.9-16.8,8.8c-1.4,3.4-2.1,8.1-2,13.9l0.6,115.5c0.1,9.8,5.4,14.7,15.9,14.7 c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5-0.6-12.7-0.9-23-0.9s-18.3,0.3-24,0.9c-0.9,0-1.4-1.6-1.4-4.8 c0-3.2,0.5-4.8,1.4-4.8c10,0,15-4.9,14.9-14.7l-0.4-107.1c0-1.1-0.3-1.6-0.9-1.6c-0.6,0-1.1,0.5-1.5,1.5l-50.7,131.3 c-0.6,1.4-1.3,2.1-2.3,2.1c-0.9,0-1.6-0.7-2.1-2.1L763.2,58c-0.5-1.4-1-2.1-1.6-2.1c-0.6,0-0.9,0.7-1,2.1l-5.1,107.4 c-0.5,9.8,4.8,14.7,15.8,14.7c1,0,1.5,1.6,1.5,4.8c0,3.2-0.5,4.8-1.5,4.8c-5.4-0.6-11.9-0.9-19.7-0.9s-14.5,0.3-20.1,0.9 c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8C741.5,180,746.7,175.1,747.1,165.3z"/>
<path d="M933.6,159.1c5.3,0,9.7,2.8,13.3,8.5c3,4.8,4.5,10.2,4.5,16.2c0,13-4.2,25.2-12.7,36.5c-4.7,6.3-9.9,11.2-15.6,14.7 c-0.1,0.2-0.2,0.3-0.4,0.3c-1.8,0-2.6-1.1-2.6-3.4c0-0.3,0-0.6,0.1-0.8l9.5-12.8c4.9-7.7,7.4-15.2,7.4-22.5c0-4.1-1.2-6.7-3.5-7.7 c-7.8-3.8-11.7-9.4-11.7-17c0-4.9,1.8-8.4,5.5-10.5C929.3,159.6,931.3,159.1,933.6,159.1z"/>
<path d="M1087.5,163.2c-0.7,2.9-1,5.4-1,7.4c0,3.4,1.1,5.1,3.3,5.1c2.2,0,6.5-3.9,13.1-11.8c0.6-0.8,1.5-0.3,2.8,1.4 c0.9,1.1,1.4,2,1.4,2.8c0,0.4-0.1,0.8-0.3,1c-4.4,6.8-9.3,12.3-14.7,16.6c-5.4,4.3-10,6.4-13.9,6.4c-4.1,0-6.2-3.3-6.2-9.9 c0-4.7,0.8-9.7,2.4-15.1l4.4-14.4l-1.3-0.5c-15.9,26.6-29.4,39.9-40.6,39.9c-4,0-7.1-2-9.2-6c-2.1-4-3.2-9-3.2-15.1 c0-17.7,5.8-36.8,17.5-57.4c11.6-20.6,23.9-30.9,36.9-30.9c4.9,0,9.3,2.3,13.4,7l2.4-8.8c0.5-2,2.7-3,6.7-3c3.9,0,5.7,1,5.1,3 L1087.5,163.2z M1084.9,120.5l4.5-19c-2.8-7-7.2-10.5-13.2-10.5c-9,0-17.4,9.2-25.2,27.6c-7.7,18.4-11.6,34.4-11.6,48 c0,7.9,2,11.8,5.9,11.8c3.7,0,8.9-4.2,15.6-12.6c6.7-8.4,11.9-16.2,15.7-23.4C1080.4,135.2,1083.1,127.9,1084.9,120.5z"/>
<path d="M1188.1,163.2c-0.7,2.8-1,5.4-1,7.8c0,3.3,1.1,4.9,3.5,4.9c2.3,0,6.5-3.9,12.5-11.7c0.2-0.3,0.4-0.4,0.6-0.4 c0.8,0,1.7,0.5,2.4,1.6c0.8,1.1,1.2,1.9,1.2,2.5c0,0.6-0.1,1-0.3,1.1c-10.7,15.3-20.3,23-28.6,23c-3.7,0-5.5-3.5-5.5-10.5 c0-3.3,0.3-6.6,1-10l12.6-55.9c2-8.9,3-14.9,3-18.2c0-3.8-1-5.7-3-5.7c-5.7,0-13.9,9.7-24.5,29c-10.6,19.3-20,41.9-28.3,67.7 c-0.7,2.4-3,3.6-7,3.6c-4,0-5.7-1.4-5.1-4.1l17.7-77.7c0.4-1.8,0.6-3.4,0.6-4.9c0-3.9-1.1-5.9-3.2-5.9c-2.1,0-5.7,3.6-10.7,10.8 c-0.3,0.3-0.5,0.4-0.8,0.4c-0.8,0-1.6-0.5-2.4-1.6c-0.8-1-1.3-1.9-1.3-2.7c0-0.3,0.1-0.6,0.3-0.8c10.3-15.9,19.3-23.9,26.9-23.9 c3.8,0,5.8,3.8,5.8,11.3c0,3.5-1,9.3-2.9,17.3l-6.9,30.3l0.8,0.5c16.5-39.6,31.5-59.4,45.1-59.4c7.1,0,10.7,5.2,10.7,15.7 c0,5.1-0.9,11.8-2.8,20.1L1188.1,163.2z"/>
<path d="M1284,162.4c-0.5,2.4-0.8,4.4-0.8,5.9c0,4.1,0.8,6.2,2.5,6.2c3.4,0,7.9-3.9,13.4-11.8c0.2-0.3,0.7-0.2,1.6,0.3 c0.9,0.4,1.6,1.2,2.1,2.3c0.5,1.1,0.6,1.8,0.4,2.1c-11.6,16.5-20.8,24.7-27.6,24.7c-4,0-6-4.5-6-13.4c0-2.2,0.2-4.5,0.6-6.9l4-22.4 l-1.4-1.4c-6.9,12.5-14,22.9-21.5,31.4c-7.5,8.5-14.5,12.7-21.1,12.7c-4.1,0-7.2-2.2-9.3-6.5c-2.1-4.3-3.1-9.4-3.1-15.1 c0-17.8,5.8-37.1,17.4-57.8c11.6-20.7,23.9-31,37-31c5.4,0,9.8,2.6,13.2,7.9l9.3-51.6c1-5.6,1.5-9.6,1.5-12.1 c0-6.9-2.6-10.3-7.7-10.3c-1,0-1.5-1.1-1.5-3.3c0-2.2,0.5-3.3,1.5-3.3c4.7,0,9.6-1.1,14.9-3.5c5.2-2.3,8-3.5,8.4-3.5 c0.8,0,1.3,0.5,1.3,1.6c0,0.3-0.1,0.8-0.3,1.5L1284,162.4z M1282.9,102.3c-2.9-8.2-7.4-12.3-13.3-12.3c-9,0-17.4,9.3-25.2,28 c-7.7,18.7-11.6,34.7-11.6,48.1c0,8.2,2,12.3,5.9,12.3c4.7,0,11.3-6,20-18.1c8.6-12.1,15.3-23.7,20-34.8L1282.9,102.3z"/>
<path d="M1382,41.5c-3.4-9.6-8.4-14.4-14.8-14.4c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3,0.4,10.1,0.6,21.4,0.6 c11.3,0,18.5-0.2,21.7-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.6,0-11.4,2.4-11.4,7.2c0,2,0.5,4.4,1.5,7.3L1440,152 c0.7,1.6,1.3,2.4,1.8,2.4c0.8,0,1.4-0.9,2-2.6l14.6-39.8c0.5-1.5,0.8-3.1,0.8-4.9c0-1.8-0.3-3.7-1-5.7l-21.5-59.9 c-3.4-9.6-8-14.4-13.7-14.4c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8c2.9,0.4,9.9,0.6,20.8,0.6c11,0,18-0.2,21.1-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7.5,0-11.3,2.3-11.3,6.9c0,2,0.5,4.5,1.5,7.5l11.7,32.5c0.8,1.9,1.4,2.9,1.9,2.9 c0.6,0,1.3-1,2-3.1l11.3-31.1c1.2-3.1,1.8-5.7,1.8-7.9c0-5.1-3.3-7.7-10-7.7c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8 c3,0.4,9.3,0.6,19,0.6c9.6,0,16-0.2,19.1-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10,0-16.3,3.6-19,10.8l-17.6,48.7 c-0.7,2.1-1,4-1,5.8c0,1.3,0.2,2.7,0.6,4l20,55.6c0.7,1.6,1.3,2.4,1.9,2.4c0.7,0,1.3-0.9,1.8-2.6l39.8-109.1 c1.2-3.1,1.8-5.7,1.8-7.8c0-5.2-3.3-7.8-10-7.8c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8c3.2,0.4,9.2,0.6,18.1,0.6 s14.9-0.2,18-0.6c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8c-8.7,0-14.4,3.6-17.1,10.8l-54.4,149.9c-1.2,3-2.1,4.5-2.8,4.5 c-0.8,0-1.6-1.5-2.6-4.4l-23-64.3c-0.5-1.3-1-2-1.6-2c-0.5,0-1,0.7-1.5,2l-23.2,64.3c-1,2.9-1.9,4.4-2.8,4.4 c-0.6,0-1.5-1.5-2.6-4.4L1382,41.5z"/>
<path d="M1589,165.3V41.5c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6 s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-7,0-11.8,1-14.3,3.1c-2.5,2.1-3.8,5.9-3.8,11.3v123.8 c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-5.8-0.6-14.5-0.9-26.1-0.9c-11.6,0-20.3,0.3-26.1,0.9 c-0.8,0-1.3-1.6-1.3-4.8c0-3.2,0.4-4.8,1.3-4.8C1583,180,1589,175.1,1589,165.3z"/>
<path d="M1688.2,165.3V33.5c0-3.8-1.6-5.8-4.9-5.8h-15.2c-17.7,0-26.6,11.6-26.6,34.7c0,1.2-1.3,1.8-3.8,1.8 c-2.6,0-3.8-0.6-3.8-1.8V22.3c0-2.8,2.6-4.1,7.8-4.1c6.8,0,15.6,0.1,26.6,0.3c10.9,0.2,20.3,0.3,28.1,0.3c7.8,0,17.1-0.1,27.9-0.3 c10.8-0.2,20-0.3,27.6-0.3c5.3,0,7.9,1.4,7.9,4.1v40.1c0,1.2-1.3,1.8-3.8,1.8c-2.6,0-3.8-0.6-3.8-1.8c0-23.1-8.8-34.7-26.4-34.7 h-16.2c-3.4,0-5.1,1.9-5.1,5.8v131.8c0,9.8,6.3,14.7,19,14.7c0.9,0,1.4,1.6,1.4,4.8c0,3.2-0.5,4.8-1.4,4.8 c-6.2-0.6-15.3-0.9-27.4-0.9c-12.1,0-21.2,0.3-27.4,0.9c-0.9,0-1.4-1.6-1.4-4.8c0-3.2,0.5-4.8,1.4-4.8 C1681.6,180,1688.2,175.1,1688.2,165.3z"/>
<path d="M1900.7,165.3c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10.7-0.6-19.4-0.9-26.1-0.9 c-6.7,0-15.4,0.3-26,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7v-54.6c0-3.2-1.3-4.8-3.9-4.8h-70.6 c-2.6,0-3.9,1.6-3.9,4.8v54.6c0,9.8,6,14.7,18.1,14.7c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-10-0.6-18.5-0.9-25.5-0.9 c-7,0-15.9,0.3-26.6,0.9c-0.8,0-1.3-1.6-1.3-4.7s0.4-4.7,1.3-4.8c12,0,18-4.9,18-14.7V41.5c0-9.6-6.3-14.4-19-14.4 c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6s23.5-0.2,26.6-0.6c0.8,0,1.3,1.6,1.3,4.8 c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4v49c0,3.3,1.3,4.9,3.9,4.9h70.6c2.6,0,3.9-1.6,3.9-4.9v-49 c0-9.6-6.3-14.4-19-14.4c-1,0-1.5-1.6-1.5-4.8c0-3.2,0.5-4.8,1.5-4.8c3,0.4,11.9,0.6,26.6,0.6c14.7,0,23.5-0.2,26.6-0.6 c0.8,0,1.3,1.6,1.3,4.8c0,3.2-0.4,4.8-1.3,4.8c-12.1,0-18.1,4.8-18.1,14.4V165.3z"/>
</g>
</svg>
</div>
Display Icon to left of Title & Text with Flex
I'm trying to create a type of 'blurb' with SVG icon with Title & Text using Flex. I have attached a visual example to show you what I'm trying to achieve.
I feel close, but what I've got so far is still kinda sketchy, and I'm struggling to get the exact output. Any advice to point me in the right direction would be appercaited. Thanks
EDIT: How do you reduce the space between H3 & P tags? (I did try margin & padding, yet it didn't have any effect)
Link to CodePen
HTML
<div class="blurb-container">
<div class="blurb-icon">
<svg width="99px" height="89px" viewBox="0 0 99 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Homepage---Desktop---First-Time-Visitor" transform="translate(-780.000000, -859.000000)">
<g id="Group-6" transform="translate(180.000000, 828.000000)">
<g id="home-icon-1-copy" transform="translate(600.000000, 31.000000)">
<path d="M22.150176,37.2957114 L58.414244,16.7220133 C60.8963066,15.3138644 63.9757833,15.5045087 66.2652073,17.2080509 L95.4458727,38.9211515 C97.7262512,40.617963 98.7949315,43.4975614 98.1736475,46.2712415 L89.8690907,83.346375 C89.1324698,86.6349692 86.2132711,88.9726247 82.8431877,88.9726247 L30.3226487,88.9726247 C26.6804011,88.9726247 23.6118056,86.2526419 23.1746879,82.6367194 L18.5550504,44.4221834 C18.2065153,41.539034 19.6242293,38.7287571 22.150176,37.2957114 Z" id="Path" fill="#ADC4DA"></path>
<path d="M68.593607,3.0866438 L94.8814573,28.4607721 C95.8351433,29.3813096 95.8620155,30.900668 94.941478,31.8543541 C94.489197,32.3229217 93.8659168,32.5875735 93.2146766,32.5875735 L88.608603,32.5874054 L88.6088522,55.3077597 C88.6088522,57.9587266 86.4598189,60.1077599 83.808852,60.1077599 L64.7380969,60.1074054 L64.7382432,44.0318665 L71.7133122,44.0322664 C72.3680935,44.0322664 72.9944465,43.7647377 73.4471807,43.2916941 C74.3636574,42.334105 74.3303291,40.8148745 73.37274,39.8983979 L73.37274,39.8983979 L50.1500969,17.6714054 L65.2600458,3.0866438 C66.1899666,2.18904546 67.6636861,2.18904546 68.593607,3.0866438 Z" id="Combined-Shape" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M39.9033277,7.86593791 L73.37274,39.8983979 C74.3303291,40.8148745 74.3636574,42.334105 73.4471807,43.2916941 C72.9944465,43.7647377 72.3680935,44.0322664 71.7133122,44.0322664 L64.7382432,44.0318665 L64.7389267,74.5510029 C64.7389267,77.2019698 62.5898934,79.3510031 59.9389265,79.3510031 L16.5488733,79.3510031 C13.8979064,79.3510031 11.7488731,77.2019698 11.7488731,74.5510029 L11.7482432,44.0318665 L4.77448753,44.0322664 C3.44900408,44.0322664 2.37448744,42.9577498 2.37448744,41.6322664 C2.37448744,40.9774851 2.64201622,40.3511321 3.11505975,39.8983979 L36.5844721,7.86593791 C37.5124905,6.97776243 38.9753093,6.97776243 39.9033277,7.86593791 Z" id="Combined-Shape-Copy-10" stroke="#000000" stroke-width="4.80000019"></path>
<path d="M31.0829269,50.4861382 L45.404878,50.4861382 C46.7303614,50.4861382 47.804878,51.5606549 47.804878,52.8861383 L47.804878,79.3510031 L47.804878,79.3510031 L28.6829268,79.3510031 L28.6829268,52.8861383 C28.6829268,51.5606549 29.7574435,50.4861382 31.0829269,50.4861382 Z" id="Rectangle" stroke="#000000" stroke-width="4.80000019"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="blurb-content">
<h3 class="blurb-title font-graphikmedium">Search properties</h3>
<div class="blurb-label">Browse thousands of exclusive properties across the country.</div>
</div>
CSS
.blurb-container {
display: flex;
margin-top: 0px;
width: 470px;
height: 98px;
}
.blurb-container * {
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blurb-icon {
float: left;
display: block;
width: 99px;
height: 89px;
}
.blurb-content {
margin-left: 10px;
}
.blurb-title {
font-weight: bold;
font-size: 20px;
}
.blurb-label {
margin-top: 0px;
font-size: 18px;
}
.font-graphikmedium {
font-family: "graphikmedium";
}
You don't need to use floats. You can use flexbox for this entire thing. You also should be using a paragraph element underneath your h3 instead of a div.
The HTML and CSS is below, and I've also linked the codepen so you can play around with it and see the code in action.
https://codepen.io/bdlowery/pen/gOxqqKa
<div class="container">
<picture>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</picture>
<div class="text-content">
<h3>Search properties</h3>
<p>Browse thousands of exclusive properties across the country.</p>
</div>
</div>
/* main idea to get what you want */
picture {
max-width: 100px;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
}
/* setup to get responsive svgs */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
picture {
display: block;
}
svg {
display: block;
width: 100%;
height: 100%;
}
Add align-items: center; to the equation and replace the div under your h3 to a p tag instead. Here's the sandbox and I put a red border around it just so I could visually see what was going on. The code is the same as yours, I just added the align-items and replaced the div with a p. https://codesandbox.io/s/small-shadow-fde90?file=/index.html
Add this css
.text-content {
display:flex;
flex-direction:column;
width: 335px;
padding-left: 20px;
}
h3 {
font-family: 'Montserrat', sans-serif; font-size: 28px;
margin-bottom:-20px;
}
p {
color: #48525B;
font-family: "Helvetica Neue",Helvtica,Arial,sans-serif;
font-size: 20px;
line-height: 28px;
letter-spacing: 0;
}
How do I set different size SVGs same height?
I use a RestAPI, it's giving me different size SVG. Some images are fit but some images don't fit.
Example: If you look at the border and image, you gonna understand.
The main problem is that; I don't know all pictures sizes, How can ı set this case? (İf it's given 100% height change the card height and ı don't want this.)
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
There is no standard for flag dimensions. RestCountries provides flags in their true dimensions.
I created a 29 kB Single File Web Component that does all SVG flags in fixed dimensions (like most SVG flag Repos do).
And can use RestCountries (or any other SVG flag Repo) as alternative source:
https://flagmeister.github.io/
Alas, I did not create all crests, you picked the exact two I failed to complete: Afghanistan and Andorra for your screenshots. Those flags FlagMeister will default to RestCountries unless prevented with the detail setting.
<script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
<style>
div {
display:grid;
grid-template-columns:repeat(6,100px);
gap:10px;
}
[nodetail] {
--flagmeisterdetail:99999;
}
</style>
<h3>RestCountries & FlagMeister (forced to no-detail)</h3>
<div>
<flag-af></flag-af>
<flag-af nodetail></flag-af>
<flag-by></flag-by>
<flag-by nodetail></flag-by>
<flag-ad></flag-ad>
<flag-ad nodetail></flag-ad>
</div>
If you can live with making local copies of all the flags. Then, if you add the following attribute to all SVGs, they will stretch to fit your <img> width and height.
preserveAspectRatio="none"
For instance, the Belarus flag becomes:
svg {
width: 300px;
height: 300px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="450" viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E" width="1098" height="549"/>
<rect y="366" fill="#4AA657" width="1098" height="183"/>
<rect fill="#FFF" width="122" height="549"/>
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>