I created a loading Icon in FIGMA and after copying it from that I pasted it in HTML but it is not rendering entirely, half of it is not displaying. I don't if it is hidden or not.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: #f2f2f2;
}
svg {
width : 200px;
height : 200px;
overflow : visible;
}
<svg viewBox="0 0 28 28" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 7C15 7.55228 14.5523 8 14 8C13.4477 8 13 7.55228 13 7V1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V7ZM11 8.80384C11.4783 8.5277 11.6421 7.91611 11.366 7.43782L8.36601 2.24167C8.08987 1.76337 7.47827 1.5995 6.99998 1.87564C6.52169 2.15178 6.35781 2.76337 6.63396 3.24167L9.63396 8.43782C9.9101 8.91611 10.5217 9.07999 11 8.80384ZM8.43786 9.63399C8.91615 9.91013 9.08003 10.5217 8.80388 11C8.52774 11.4783 7.91615 11.6422 7.43786 11.366L2.24171 8.36604C1.76341 8.0899 1.59954 7.47831 1.87568 7.00001C2.15182 6.52172 2.76341 6.35784 3.24171 6.63399L8.43786 9.63399ZM8 14C8 13.4477 7.55228 13 7 13H1C0.447715 13 0 13.4477 0 14C0 14.5523 0.447715 15 1 15H7C7.55228 15 8 14.5523 8 14ZM7.43789 16.6339C7.91618 16.3578 8.52777 16.5217 8.80391 17C9.08006 17.4783 8.91618 18.0899 8.43789 18.366L3.24174 21.366C2.76344 21.6421 2.15185 21.4783 1.87571 21C1.59957 20.5217 1.76344 19.9101 2.24174 19.6339L7.43789 16.6339ZM11 19.1962C10.5217 18.92 9.91009 19.0839 9.63395 19.5622L6.63395 24.7584C6.35781 25.2366 6.52169 25.8482 6.99998 26.1244C7.47827 26.4005 8.08986 26.2366 8.366 25.7584L11.366 20.5622C11.6421 20.0839 11.4783 19.4723 11 19.1962ZM14.0001 20C13.4478 20 13.0001 20.4477 13.0001 21V27C13.0001 27.5523 13.4478 28 14.0001 28C14.5523 28 15.0001 27.5523 15.0001 27V21C15.0001 20.4477 14.5523 20 14.0001 20ZM17.0001 8.80381C17.4784 9.07996 18.09 8.91608 18.3661 8.43779L21.3661 3.24164C21.6423 2.76334 21.4784 2.15175 21.0001 1.87561C20.5218 1.59947 19.9102 1.76334 19.6341 2.24164L16.6341 7.43779C16.3579 7.91608 16.5218 8.52767 17.0001 8.80381ZM20.5622 11.366C20.0839 11.6422 19.4723 11.4783 19.1961 11C18.92 10.5217 19.0839 9.91013 19.5622 9.63399L24.7583 6.63399C25.2366 6.35785 25.8482 6.52173 26.1243 7.00002C26.4005 7.47831 26.2366 8.0899 25.7583 8.36604L20.5622 11.366ZM20.0001 14C20.0001 14.5523 20.4478 15 21.0001 15H27.0001C27.5523 15 28.0001 14.5523 28.0001 14C28.0001 13.4477 27.5523 13 27.0001 13H21.0001C20.4478 13 20.0001 13.4477 20.0001 14ZM19.5622 18.366C19.0839 18.0899 18.92 17.4783 19.1962 17C19.4723 16.5217 20.0839 16.3578 20.5622 16.634L25.7584 19.634C26.2366 19.9101 26.4005 20.5217 26.1244 21C25.8482 21.4783 25.2366 21.6421 24.7584 21.366L19.5622 18.366ZM17.0001 19.1961C16.5218 19.4723 16.3579 20.0839 16.6341 20.5622L19.6341 25.7583C19.9102 26.2366 20.5218 26.4005 21.0001 26.1244C21.4784 25.8482 21.6422 25.2366 21.3661 24.7583L18.3661 19.5622C18.09 19.0839 17.4784 18.92 17.0001 19.1961Z" fill="url(#gradient)" />
<defs>
<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14 14) scale(14)">
<stop offset="0.669733" stop-color="#595F67" />
<stop offset="0.716307" stop-color="#262626" stop-opacity="0.01" />
</radialGradient>
</defs>
</svg>
I even set svg { overflow: visible; } but nothing worked!
NOTE
As ÁlvaroGonzález complaint of its small size I increased it.
IT SHOULD LOOK LIKE THIS
FIGMA FILE Try this Loader
Related
I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
I am trying to add a text inside svg path i copy from figma.
Here is how it's look in figma:
Here is my code base:
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
The main thing is to swap the order of the path and text elements so the text element is drawn on top of the path. After that you just need to position the text where you want it and ensure it has a fill colour so you can see it.
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
I am simply trying to render the svg on the page however it is not loading.
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path
d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z"
fill="#404040" />
</g>
</g>
</svg>
This is my SVG from my HTML, on the webpage it is loaded.
However it doesn't render to the page.
I should add I also have a width and height on the svg of 25px.
Maybe there is something on top the icon. Try with
svg {
width: 25px;
z-index: 200;
}
<clipPath id="b">
<path d="M712 0h39.1v23.6H712z"/>
</clipPath>
<g clip-path="url(#b)">
Id's for all components were the same. Ids need to be unique. Must have been a setting in Affinity Designer.
I hate weird Matrix conversions.
Your SVG is a soccerball, and I presume all that mumbo jumbo is to make it look round? It is not round!
I multiplied the path by 10 with: https://yqnn.github.io/svg-path-editor/
Made it a Relative path so positioning is all done with the first M225 444
adjusted viewBox
removed SVG mumbo jumbo
added <circle> for reference
Took some minutes to adjust to scale(1.08, 1.333) and position with M225 444
re-adjusted viewBox
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx='50%' cy='50%' r='50%' fill='red'></circle>
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z" fill="#404040" />
</g>
</g>
</svg>
<!-- My Version: -->
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<circle cx='50%' cy='50%' r='50%' fill='green'></circle>
<path transform="scale(1.08, 1.333)" fill='#404040' d='M225 444v-58l63-30l63 30v55a338 338 90 01-126 3zm-125-65a421 421 90 00110 53v10a334 334 90 01-125-57l15-7zm378 3a296 296 90 01-118 56v-53l62-30l55 26zm-260-121l63 29v58l-63 30l-63-30v-58l63-30zm-204 27l60-27l63 29v58l-61 28c-29-25-50-54-62-88zm532-3a214 214 90 01-60 89l-55-26v-58l63-30l52 25zm-123-120l62 30v58l-62 29l-63-30v-58l63-30zm-135 0l63 30v58l-63 29l-62-30v-58l62-30zm-275 0l61 30v58l-63 29a182 182 90 012-116zm522 104c5-17 6-30 6-46c0-17-6-34-10-45l15-7a171 171 90 012 105l-13-7zm-318-200l63 29v58l-63 30l-63-30v-58l63-30zm-138 2l58 27v58l-63 30l-59-28a220 220 90 0164-87zm404 3c28 25 50 54 62 87l-51 24l-63-29v-58l52-24zm-123-62c43 10 82 30 114 54l-51 24l-63-30v-48zm-134-6a347 347 90 01125 4v50l-63 30l-62-30v-54zm-12 15c-23 5-46 12-61 20c-16 6-40 21-51 30l-14-6a301 301 90 01126-57v13z' />
</svg>
<style>
svg {
background: pink;
width:180px;
}
</style>
I have social svg buttons . I need to change only background, but when I hover of "f" letter in facebook icon, it does not changes. Problem is that svg tag contains two figures inside. Here I recreate my problem https://codesandbox.io/s/smoosh-surf-bhrcu
.tours-full__content-social-links {
svg {
:hover {
&:first-child {
fill: #000000;
}
}
}
}
<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="52" height="53" rx="26" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0986 35.5403C18.806 36.8848 20.9952 36.8848 22.3404 35.5403Z" fill="#B8B8B8"/>
</svg>
You were close
svg {
&:hover {
:first-child {
fill: #000000;
}
}
}
which compiles to svg:hover :first-child {fill: #000000;}
When you hover the SVG as a whole, change the fill of the first path only.
svg:hover :first-child {
fill: #000000;
}
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="white"/>
<path d="M32.4351 12.0054L28.8373 12C24.7953 12 22.1832 14.5115 22.1832 18.3986V21.3488H18.5657C18.2531 21.3488 18 21.5863 18 21.8793V26.1538C18 26.4467 18.2534 26.6839 18.5657 26.6839H22.1832V37.4698C22.1832 37.7628 22.4363 38 22.7489 38H27.4686C27.7812 38 28.0343 37.7625 28.0343 37.4698V26.6839H32.264C32.5766 26.6839 32.8297 26.4467 32.8297 26.1538L32.8314 21.8793C32.8314 21.7386 32.7717 21.6039 32.6658 21.5044C32.5598 21.4048 32.4155 21.3488 32.2654 21.3488H28.0343V18.8479C28.0343 17.6459 28.34 17.0357 30.0109 17.0357L32.4346 17.0348C32.7469 17.0348 33 16.7974 33 16.5047V12.5356C33 12.2432 32.7472 12.006 32.4351 12.0054Z" fill="#B8B8B8"/>
</svg>
I tried adding class to the path and using that class to hover it. check snippet.
body {
font-family: sans-serif;
background: #d1d1d1;
}
.icon:hover {
fill: #000;
}
<div class="tours-full__content-sidebar-social">
<a href="#" class="tours-full__content-social-links">
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="icon" fill-rule="evenodd" clip-rule="evenodd" d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="white"/>
<path d="M32.4351 12.0054L28.8373 12C24.7953 12 22.1832 14.5115 22.1832 18.3986V21.3488H18.5657C18.2531 21.3488 18 21.5863 18 21.8793V26.1538C18 26.4467 18.2534 26.6839 18.5657 26.6839H22.1832V37.4698C22.1832 37.7628 22.4363 38 22.7489 38H27.4686C27.7812 38 28.0343 37.7625 28.0343 37.4698V26.6839H32.264C32.5766 26.6839 32.8297 26.4467 32.8297 26.1538L32.8314 21.8793C32.8314 21.7386 32.7717 21.6039 32.6658 21.5044C32.5598 21.4048 32.4155 21.3488 32.2654 21.3488H28.0343V18.8479C28.0343 17.6459 28.34 17.0357 30.0109 17.0357L32.4346 17.0348C32.7469 17.0348 33 16.7974 33 16.5047V12.5356C33 12.2432 32.7472 12.006 32.4351 12.0054Z" fill="#B8B8B8"/>
</svg>
</a>
<a href="#" class="tours-full__content-social-links">
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="icon" fill-rule="evenodd" clip-rule="evenodd" d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="white"/>
<path d="M40 17.6045C39.0331 18.0462 38.0029 18.3389 36.9287 18.4811C38.0337 17.794 38.8771 16.7143 39.2736 15.4129C38.2434 16.0526 37.1059 16.5045 35.8936 16.7566C34.9154 15.6718 33.5211 15 32.0001 15C29.0491 15 26.6734 17.4945 26.6734 20.5525C26.6734 20.9925 26.7091 21.4155 26.7969 21.8183C22.3655 21.5932 18.4444 19.3814 15.8103 16.012C15.3504 16.8429 15.0806 17.794 15.0806 18.8178C15.0806 20.7403 16.0312 22.4445 17.4483 23.4311C16.5919 23.4142 15.7517 23.1552 15.04 22.7474C15.04 22.7643 15.04 22.7863 15.04 22.8083C15.04 25.5058 16.8876 27.7465 19.3105 28.2626C18.8766 28.3862 18.4037 28.4454 17.913 28.4454C17.5718 28.4454 17.2273 28.4251 16.9039 28.3506C17.5945 30.5489 19.5542 32.1651 21.8845 32.2175C20.071 33.6949 17.7684 34.5851 15.2756 34.5851C14.8385 34.5851 14.4193 34.5648 14 34.5089C16.3611 36.0946 19.1594 37 22.177 37C31.9855 37 37.348 28.5385 37.348 21.204C37.348 20.9586 37.3399 20.7217 37.3285 20.4865C38.3864 19.7046 39.2752 18.7282 40 17.6045Z" fill="#B8B8B8"/>
</svg>
</a>
<a href="#" class="tours-full__content-social-links">
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="icon" fill-rule="evenodd" clip-rule="evenodd" d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="white"/>
<path d="M38.8621 33.6435C38.8306 33.5795 38.8013 33.5264 38.774 33.4838C38.3229 32.7171 37.4609 31.7759 36.1884 30.6601L36.1615 30.6346L36.1481 30.6221L36.1345 30.6092H36.1208C35.5433 30.0896 35.1776 29.7403 35.0245 29.5614C34.7442 29.2207 34.6815 28.8759 34.8346 28.5264C34.9428 28.2624 35.3492 27.7048 36.053 26.853C36.4231 26.4015 36.7163 26.0397 36.9328 25.7671C38.4942 23.808 39.1711 22.5561 38.9634 22.011L38.8828 21.8836C38.8286 21.8069 38.6887 21.7367 38.4634 21.6727C38.2375 21.6089 37.9488 21.5983 37.5967 21.6409L33.6981 21.6663C33.635 21.6452 33.5448 21.6471 33.4273 21.6727C33.31 21.6983 33.2513 21.7112 33.2513 21.7112L33.1834 21.7432L33.1295 21.7816C33.0844 21.807 33.0348 21.8517 32.9806 21.9156C32.9267 21.9793 32.8816 22.054 32.8455 22.1392C32.4211 23.1698 31.9385 24.128 31.3969 25.0137C31.063 25.5419 30.7563 25.9996 30.4762 26.3872C30.1965 26.7746 29.9619 27.06 29.7725 27.243C29.5828 27.4262 29.4117 27.5729 29.2579 27.6837C29.1045 27.7946 28.9873 27.8415 28.9062 27.8243C28.8249 27.8072 28.7483 27.7902 28.6758 27.7732C28.5495 27.6965 28.448 27.5922 28.3714 27.4602C28.2945 27.3282 28.2427 27.162 28.2156 26.9619C28.1887 26.7616 28.1728 26.5893 28.1682 26.4444C28.164 26.2998 28.1659 26.0951 28.1751 25.8311C28.1845 25.567 28.1887 25.3882 28.1887 25.2945C28.1887 24.9708 28.1954 24.6195 28.2088 24.2405C28.2225 23.8615 28.2335 23.5612 28.2428 23.3399C28.252 23.1185 28.2562 22.8842 28.2562 22.6372C28.2562 22.3902 28.2403 22.1965 28.2088 22.0559C28.1777 21.9154 28.13 21.7791 28.067 21.647C28.0037 21.515 27.9111 21.4129 27.7895 21.3404C27.6677 21.268 27.5163 21.2105 27.3361 21.1678C26.8577 21.0657 26.2486 21.0104 25.5084 21.0018C23.8299 20.9848 22.7513 21.0871 22.273 21.3086C22.0835 21.4021 21.912 21.53 21.7587 21.6917C21.5962 21.8791 21.5735 21.9814 21.6908 21.9983C22.2324 22.0748 22.6158 22.258 22.8414 22.5475L22.9227 22.701C22.986 22.8117 23.0492 23.0077 23.1124 23.2887C23.1755 23.5697 23.2162 23.8806 23.2341 24.2211C23.2792 24.843 23.2792 25.3753 23.2341 25.8181C23.1889 26.2611 23.1463 26.606 23.1055 26.853C23.0648 27.1 23.0039 27.3002 22.9227 27.4535C22.8414 27.6068 22.7873 27.7005 22.7602 27.7345C22.7331 27.7685 22.7106 27.7899 22.6926 27.7983C22.5753 27.8407 22.4533 27.8624 22.3271 27.8624C22.2006 27.8624 22.0473 27.8027 21.8668 27.6834C21.6864 27.5641 21.4992 27.4002 21.3051 27.1915C21.111 26.9827 20.8922 26.691 20.6484 26.3163C20.4049 25.9416 20.1521 25.4987 19.8904 24.9877L19.6739 24.6171C19.5385 24.3787 19.3536 24.0315 19.1189 23.5759C18.8841 23.1202 18.6766 22.6793 18.4962 22.2535C18.4241 22.0746 18.3157 21.9384 18.1714 21.8447L18.1036 21.8063C18.0586 21.7723 17.9863 21.7362 17.8871 21.6977C17.7877 21.6593 17.6841 21.6317 17.5757 21.6147L13.8665 21.6401C13.4875 21.6401 13.2303 21.7212 13.0949 21.883L13.0407 21.9596C13.0137 22.0022 13 22.0704 13 22.1641C13 22.2578 13.0271 22.3728 13.0813 22.509C13.6227 23.71 14.2116 24.8683 14.8478 25.9841C15.484 27.0998 16.0368 27.9986 16.506 28.6795C16.9753 29.361 17.4536 30.0042 17.9409 30.6087C18.4283 31.2135 18.7509 31.6011 18.9088 31.7713C19.0668 31.9419 19.1909 32.0694 19.2811 32.1546L19.6196 32.4612C19.8362 32.6656 20.1543 32.9105 20.5739 33.1957C20.9937 33.4812 21.4584 33.7622 21.9683 34.0392C22.4783 34.3158 23.0716 34.5415 23.7485 34.7161C24.4253 34.8908 25.0841 34.961 25.7249 34.9271H27.2817C27.5975 34.9014 27.8367 34.8077 27.9992 34.646L28.0531 34.5819C28.0893 34.5311 28.1232 34.4521 28.1545 34.3459C28.1862 34.2394 28.2019 34.1221 28.2019 33.9945C28.1927 33.6284 28.2222 33.2984 28.2897 33.0045C28.3572 32.7108 28.4341 32.4894 28.5201 32.3402C28.6061 32.1912 28.7031 32.0655 28.8111 31.9635C28.9193 31.8614 28.9964 31.7995 29.0416 31.7782C29.0865 31.7567 29.1224 31.7422 29.1495 31.7335C29.3661 31.6654 29.621 31.7313 29.9146 31.9317C30.2079 32.1318 30.4831 32.379 30.7404 32.6727C30.9977 32.9667 31.3067 33.2965 31.6676 33.6627C32.0288 34.029 32.3446 34.3013 32.6152 34.4804L32.8858 34.6337C33.0666 34.736 33.3012 34.8297 33.5901 34.9149C33.8784 35 34.131 35.0213 34.3479 34.9787L37.8133 34.9277C38.1561 34.9277 38.4228 34.8742 38.612 34.7679C38.8015 34.6614 38.9141 34.5441 38.9504 34.4166C38.9867 34.2888 38.9886 34.144 38.9573 33.982C38.9252 33.8204 38.8936 33.7074 38.8621 33.6435Z" fill="#B8B8B8"/>
</svg>
</a>
<a href="#" class="tours-full__content-social-links">
<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="icon" width="52" height="53" rx="26" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0986 30.6595L36.9794 25.7802C39.6735 23.0855 39.6735 18.7159 36.9794 16.0212C34.284 13.3263 29.9151 13.3263 27.2197 16.0212L23.5224 19.7183C24.9991 19.5019 26.5161 19.6493 27.9241 20.1976L29.6591 18.4606C31.0053 17.1154 33.1938 17.1154 34.5384 18.4606C35.8847 19.8058 35.8847 21.9944 34.5384 23.3406L29.6591 28.2197C28.3146 29.5642 26.1255 29.5661 24.7802 28.2197C24.3589 27.7984 24.0852 27.2913 23.9284 26.7556C23.904 26.7697 23.8794 26.7834 23.8547 26.7971C23.751 26.8546 23.6474 26.9122 23.5603 27L21.2925 29.2677C21.584 29.7594 21.916 30.2363 22.3404 30.6595C25.0347 33.3549 29.4048 33.3549 32.0986 30.6595ZM22.3404 35.5403L24.0767 33.8033C25.4835 34.3505 27.0009 34.4992 28.4784 34.2815L24.7801 37.9795C22.0853 40.6735 17.7159 40.6735 15.021 37.9795C12.3263 35.284 12.3263 30.9157 15.021 28.22L19.9001 23.3407C22.595 20.6459 26.9654 20.6459 29.659 23.3407C30.0836 23.7644 30.4173 24.2395 30.707 24.7332L28.4393 27C28.3539 27.0855 28.2537 27.1412 28.1521 27.1976C28.1254 27.2124 28.0987 27.2272 28.0722 27.2427C27.9139 26.7077 27.6399 26.2007 27.2196 25.7803C25.8744 24.4342 23.6867 24.4342 22.3404 25.7803L17.4605 30.6595C16.1152 32.0053 16.1152 34.1939 17.4605 35.5403C18.806 36.8848 20.9952 36.8848 22.3404 35.5403Z" fill="#B8B8B8"/>
</svg>
</a>
</div>
You can have the hover effect to last child instead of first
Updated link - codesandbox
.tours-full__content-social-links {
svg {
:hover {
&:last-child {
fill: #000000;
}
}
}
}
I'm aiming to create a responsive SVG logo.
I've had some success in this so far, in that I can hide certain paths using media queries.
http://codepen.io/anon/pen/ZQmOMj
HTML:
<div class="svg-container">
<svg class="svgBranding" viewBox="0 0 799 163">
<path d="M91.064 30.349c2.672-5.246 8.434-15.089 14.528-16.022l-11.737 19.771c28.456 7.49 33.945-33.818 33.945-33.818 -44.764-3.138-40.057 20.952-36.736 30.069" class="svgBranding__apple" />
<path d="M123.425 101.105c-1.407 31.157-28.132 55.311-59.945 54.477 4.329 1.187 8.854 1.934 13.535 2.145 33.167 1.5 61.234-23.516 62.697-55.878 1.459-32.356-24.24-59.798-57.403-61.298 -4.655-0.211-9.202 0.119-13.595 0.897 31.721 2.079 56.117 28.529 54.711 59.657" class="svgBranding__coburg"/>
<path d="M66.7 41.588l0.572-36.223 13.695 3.624 -2.391 33.114 -11.876-0.515Z" class="svgBranding__coburg"/>
<path d="M211.046 124.787c-4.778 5.127-11.191 7.814-18.999 7.814 -15.275 0-26.464-10.498-26.464-26.001 0-15.978 11.771-28.45 29.61-28.45 9.092 0 14.921 3.384 14.921 7.582 0 2.331-1.514 3.729-3.382 3.729 -3.498 0-4.195-1.511-5.362-4.427 -1.168-3.037-2.447-4.432-7.346-4.432 -10.025 0-16.786 9.091-16.786 24.947 0 15.037 6.646 23.082 18.303 23.082 5.013 0 9.324-1.977 13.756-6.175l1.749 2.331Z" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M226.904 105.433c0 15.738 5.944 24.597 16.204 24.597 10.842 0 16.786-8.512 16.786-25.06 0-15.854-6.413-24.484-16.673-24.484 -9.673 0-16.317 9.091-16.317 24.947M243.922 78.15c15.509 0 27.283 13.172 27.283 26.585 0 14.571-11.661 27.747-27.515 27.747 -15.86 0-28.094-11.079-28.094-27.165 0-15.74 12.819-27.167 28.326-27.167" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M303.96 129.217c11.546 0 17.608-8.274 17.608-24.362 0-14.812-6.531-22.857-16.441-22.857 -8.509 0-13.871 5.599-13.871 14.223l0 19.586c0 8.981 4.308 13.41 12.704 13.41M291.604 85.617c4.198-4.899 9.328-6.998 16.557-6.998 14.224 0 24.131 10.608 24.131 25.998 0 17.255-10.142 27.747-26.23 27.747 -6.763 0-11.778-2.218-17.371-6.992l-6.879 6.642 0-72.048c0-7.229-0.466-7.927-7.929-8.39l0-2.215c4.432-0.237 10.263-1.285 17.721-2.799l0 39.055Z" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M344.879 79.67c2.449 0 5.599-0.119 9.096-0.234l0 37.071c0 7.924 3.732 12.009 10.961 12.009 7.927 0 14.687-6.997 14.687-16.785l0-22.154 0-2.096c0-3.619-2.449-5.483-7.464-5.483l-0.929 0 0-2.562c3.613 0.115 6.879 0.234 9.676 0.234 2.452 0 5.483-0.119 8.98-0.234l0 38.588c0 6.292 1.164 8.509 6.992 8.509l1.398 0 0 2.446c-4.545 0-9.91 1.636-16.438 4.436l-1.865-11.775c-4.545 7.221-10.723 10.492-19 10.492 -13.413 0-17.258-6.413-17.258-18.187l0-24.368c0-1.169-0.116-1.864-0.116-2.096 0-3.619-2.449-5.483-7.345-5.483l-0.935 0 0-2.562c3.619 0.115 6.769 0.234 9.56 0.234" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M420.193 90.277c3.616-7.342 9.91-11.308 16.441-11.308 5.941 0 9.325 2.565 9.325 6.178 0 2.915-1.632 4.664-3.96 4.664 -5.255 0-2.571-6.76-9.099-6.76 -6.413 0-11.775 5.59-11.775 15.735l0 23.67c0 4.661 2.331 5.944 8.393 6.06l0 2.449c-5.246-0.35-9.791-0.582-13.523-0.582 -3.5 0-8.043 0.116-13.52 0.582l0-2.449c5.938-0.116 8.387-1.515 8.387-5.834l0-1.864 0-26.815c0-7.686-1.867-10.254-8.274-10.254l-1.28 0 0-2.334c5.359-0.698 11.074-2.093 17.02-3.963 1.283 3.5 1.746 7.817 1.865 12.825" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M457.34 97.041c0 10.26 4.54 16.088 11.65 16.088 7.229 0 11.78-5.715 11.78-16.907 0-9.905-5.014-15.735-12.131-15.735 -6.406 0-11.299 5.943-11.299 16.554M447.546 97.041c0-10.839 9.206-18.891 21.803-18.891 5.825 0 11.068 1.868 15.266 5.365 4.311-3.028 7.576-5.009 11.305-5.009 4.438 0 7.116 2.097 7.116 5.244 0 2.098-1.632 3.731-3.615 3.731 -3.382 0-4.311-4.316-7.812-4.316 -1.285 0-2.912 0.698-5.13 2.215 2.916 3.96 4.314 7.466 4.314 12.011 0 11.656-7.105 16.902-21.337 17.953 -8.393 0.579-14.339 0.932-14.339 5.362 0 3.726 5.017 3.726 15.158 3.847 17.953 0.235 26.702 4.896 26.702 18.187 0 12.247-9.794 20.168-26.583 20.168 -14.927 0-24.95-7.227-24.95-16.207 0-5.475 4.198-9.789 8.63-9.789 1.868 0 3.379 0.701 4.777 2.215 -3.734 0.932-5.83 4.076-5.83 8.859 0 7.229 6.997 12.006 17.72 12.006 12.125 0 18.538-5.005 18.538-13.523 0-9.678-7.229-11.187-20.052-11.308 -12.709-0.116-19.701-2.91-19.701-10.729 0-5.472 3.732-8.969 10.842-10.487 -8.161-2.909-12.822-9.209-12.822-16.904" class="svgBranding__coburg svgBranding__desktop"/>
<path d="M544.752 129.217c11.549 0 17.608-8.274 17.608-24.362 0-14.812-6.525-22.857-16.436-22.857 -8.508 0-13.879 5.599-13.879 14.223l0 19.586c0 8.981 4.32 13.41 12.707 13.41M532.393 85.617c4.206-4.899 9.336-6.998 16.557-6.998 14.221 0 24.136 10.608 24.136 25.998 0 17.255-10.15 27.747-26.232 27.747 -6.757 0-11.775-2.218-17.371-6.992l-6.876 6.642 0-72.048c0-7.229-0.469-7.927-7.927-8.39l0-2.215c4.427-0.237 10.258-1.285 17.713-2.799l0 39.055Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M590.917 119.307c0 5.481 2.918 8.625 8.167 8.625 4.432 0 13.176-3.845 13.176-11.19l0-15.269c-14.461 5.712-21.343 10.605-21.343 17.834M622.167 121.287c0 4.085 1.398 6.3 3.844 6.3 1.633 0 2.684-0.932 4.323-2.333l1.506 1.633c-2.444 3.844-5.71 5.596-10.261 5.596 -4.539 0-8.743-3.266-9.672-8.167 -5.6 5.251-12.941 8.048-19.235 8.048 -8.28 0-12.591-4.082-12.591-10.613 0-7.69 6.297-12.704 19.116-17.718l6.187-2.331c5.362-2.099 7.105-1.983 7.105-6.065l0-4.074c0-7.348-2.794-10.96-11.543-10.96 -5.596 0-9.317 2.098-9.907 5.598 -0.582 3.261-0.582 6.06-5.249 6.06 -2.218 0-3.845-1.87-3.845-4.311 0-5.014 6.757-9.684 20.173-9.684 13.63 0 20.049 4.317 20.049 13.413l0 29.608Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M652.829 89.227c4.658-7.461 10.836-10.839 19.232-10.839 10.958 0 17.252 5.245 17.252 15.268l0 28.801c0 4.661 2.337 5.943 8.393 6.059l0 2.45c-5.243-0.351-9.786-0.582-13.52-0.582 -3.489 0-8.049 0.115-13.523 0.582l0-2.45c5.949-0.116 8.396-1.514 8.396-5.833l0-1.865 0-26.458c0-8.28-3.611-12.362-10.961-12.362 -7.924 0-14.687 6.995-14.687 16.789l0 23.67c0 4.661 2.328 5.943 8.387 6.059l0 2.45c-5.243-0.351-9.786-0.582-13.523-0.582 -3.5 0-8.04 0.115-13.523 0.582l0-2.45c5.952-0.116 8.283-1.514 8.283-5.833 0-0.11 0.113-0.811 0.113-1.865l0-27.972c0-6.766-1.043-8.984-7.342-8.984l-1.054 0 0-2.328c4.551 0 9.916-1.629 16.444-4.429 1.042 3.613 1.517 7.689 1.633 12.122" class="svgBranding__apple svgBranding__desktop"/>
<path d="M720.557 104.854l7.464-7.814c6.184-6.534 9.556-10.492 9.556-12.709 0-1.862-1.63-2.212-5.709-2.916l0-2.093c5.13 0.229 8.625 0.466 10.727 0.466 2.79 0 5.48-0.237 8.393-0.466l0 2.093c-6.066 0.704-8.857 4.433-13.176 9.207l-8.734 9.797 22.26 22.153c3.266 3.26 5.602 5.593 9.091 5.944l0 2.449c-3.489-0.234-6.41-0.234-8.625-0.234 -0.695 0-2.918 0-6.644 0.234l-22.501-23.78 -2.102 1.861 0 13.41c0 4.661 2.336 5.944 8.399 6.06l0 2.449c-5.246-0.35-9.791-0.582-13.523-0.582 -3.5 0-8.043 0.116-13.526 0.582l0-2.449c5.949-0.116 8.393-1.514 8.393-5.834l0-1.864 0-61.322c0-4.889-1.746-6.059-7.464-6.059l-0.929 0 0-2.096c3.266-0.469 9.438-1.98 18.65-4.433l0 57.946Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M792.955 78.387l1.398 0c-0.113 3.61-0.234 6.992-0.234 10.139l0 3.5 -1.862 0c-1.164-6.757-6.531-11.309-12.009-11.309 -4.663 0-8.045 2.563-8.045 6.41 0 4.78 3.382 6.876 10.616 10.848 9.204 5.127 15.848 7.223 15.848 18.419 0 10.023-6.523 16.207-17.481 16.207 -4.779 0-9.565-1.755-13.062-4.786l-1.98 3.263 -1.051 0c0.116-4.308 0.116-6.876 0.116-7.808 0-1.867-0.116-4.543-0.116-8.165l1.633 0c1.629 9.21 7.573 14.696 14.573 14.696 5.71 0 10.142-3.848 10.142-8.746 0-5.831-4.432-8.28-11.893-12.125 -9.438-5.014-14.339-9.212-14.339-16.554 0-8.28 5.943-14.226 14.805-14.226 3.616 0 7.116 1.053 10.726 3.152l2.215-2.915Z" class="svgBranding__apple svgBranding__desktop"/>
<path d="M18.062 107.784c-9.62-27.107 6.436-57.291 35.908-67.957 -4.383 0.533-8.795 1.517-13.161 3.008 -30.947 10.585-47.934 41.985-37.948 70.14 9.993 28.149 43.176 42.393 74.118 31.809 4.346-1.483 8.4-3.388 12.158-5.629 -29.825 9.572-61.465-4.284-71.075-31.371" class="svgBranding__apple "/>
</svg>
</div>
SCSS:
/* colours */
$green: #a9b012;
$purple: #351456;
$white: #ffffff;
.svg-container {
flex: 1;
width: 300px;
height: 100px;
position: relative;
}
.svgBranding {
width: 100%;
height: auto;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
&__desktop {
display: none;
#media ( min-width: 768px ) { display: inline; }
}
&__apple { fill: $green; }
&__coburg {
fill: $purple;
.svgBranding--dark & { fill: $white; }
}
&__banks { fill: $green; }
}
However, I'm guessing due to the viewBox attribute on the SVG, the paths do not actual hide, which means the SVG doesn't adapt how I was hoping.
Does anyone know of a work around, or know of a solution that I could use?
I see in your pen that the name hides below 768px.
What do you mean with "the paths do not actual hide"?