How would I center these elements horizontally?
Fiddle: http://jsfiddle.net/qfbszLt1/
#icon-link-wrap {
float: left;
height: 30px;
margin-right: 15px;
width: 30px;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
Instead of using float: left use display: inline-block and apply text-align: center to the parent div (#icon-full-wrap).
#icon-link-wrap {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 15px;
width: 30px;
}
#icon-full-wrap {
text-align: center;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
I do it for myself
CSS
#icon-link-wrap {
height: 30px;
margin-right: 15px;
width: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
I hope that I helped you.
Related
I have a fixed footer on the following website;
https://sen-seis.com/dev/
I would like to be able to change the contents of the footer if the website is accessed from a mobile phone.
Is there a way to amend the footer.php file to only display certain parts of the footer if using the mobile. The code is;
<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
<table width="80%" border="0px" align="center">
<tr border="0px">
<td width="25%"><div class="site-info">
Copyright <?php echo date('Y'); ?> © Sen Seis. All rights reserved
</div><!-- .site-info -->
<!-- .site-info --> </td>
<td width="20%"> <div class="contact-email" ><span><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#069146" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </svg></i></span> <b> info#sen-seis.com</b> </div>
</td>
<td>
<a href="https://www.facebook.com/relaxmymuscles/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg> </a href>
<a href="https://www.instagram.com/senseis._/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg> </a href>
<a href="https://www.google.com/maps/place/Sen-Seis+Massage+Therapy/#51.5969996,-0.284717,15z/data=!4m5!3m4!1s0x0:0x62567b567dd73a63!8m2!3d51.5970056!4d-0.2847197">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="none" stroke="#069146" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>
</a>
<a href="https://wa.me/447368647489">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm.14 4.5a7.34 7.34 0 0 0-6.46 10.82l.15.26L4.5 19.5l4.08-1.3a7.38 7.38 0 0 0 10.92-6.4c0-4.03-3.3-7.3-7.36-7.3zm0 1.16c3.41 0 6.19 2.76 6.19 6.15a6.17 6.17 0 0 1-9.37 5.27l-.23-.15-2.38.76.77-2.28a6.08 6.08 0 0 1-1.17-3.6 6.17 6.17 0 0 1 6.19-6.15zM9.66 8.47a.67.67 0 0 0-.48.23l-.14.15c-.2.23-.5.65-.5 1.34 0 .72.43 1.41.64 1.71l.14.2a7.26 7.26 0 0 0 3.04 2.65l.4.14c1.44.54 1.47.33 1.77.3.33-.03 1.07-.43 1.22-.85.15-.42.15-.78.1-.85-.02-.05-.08-.08-.15-.12l-1.12-.54a5.15 5.15 0 0 0-.3-.13c-.17-.06-.3-.1-.41.09-.12.18-.47.58-.57.7-.1.1-.18.13-.32.08l-.4-.18a4.64 4.64 0 0 1-2.13-1.98c-.1-.18-.01-.28.08-.37l.27-.31c.1-.1.12-.18.18-.3a.3.3 0 0 0 .01-.26l-.1-.23-.48-1.15c-.15-.36-.3-.3-.4-.3l-.35-.02z"/></svg>
</a>
</td>
</tr>
</table>
</footer><!-- #colophon -->
Yo
Tty this
#media screen and (max-width:1200) {
.texttohide {
display : none;
}
}
<div>
<span class="textodisplayallthetime">BLABLABLA</span>
<span class="texttohide">this text will be hidden if the width of the device is under 1200 px, this should work for the majority of the cellphone</span>
</div>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 2 years ago.
I would like to center an element which depends on the viewport. I have a header with five elements inside :
One button on the left
One logo on the middle
Three buttons on the right
I want logo to be center depending of the viewport. I made a codepen :
https://codepen.io/pier6dev/pen/WNvjJGX
The logo is not centered even if i use a justify content center.
The logo should be there :
I'm not sure that i'm very clear, ask any questions if you have.
header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 1rem;
}
.btn {
padding: 1rem;
border-radius: 0.5rem;
color: white;
}
.btn.btn-home {
background: red;
}
svg {
width: 10rem;
height: auto;
}
.right {
display: flex;
}
.btn.btn-shop {
background: blue;
margin-right: 1rem;
}
.btn.btn-subscribe {
background: orange;
margin-right: 1rem;
}
.btn.btn-login {
background: grey;
}
<header>
<div class="left">
<div class="btn btn-home">Home</div>
</div>
<div class="center">
<div class="logo">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5573.1 1990.2" width="5573.1" height="1990.2">
<style>
.st0 {
fill: #ed1c40
}
</style>
<path class="st0"
d="M3283.8 1072.6c-7.7 11.6-12.6 19.5-17.9 27.2-49.8 71.4-105.8 136.6-182 181.7-102.2 60.4-213 85.3-328.4 60.3-59.2-12.9-114.4-46-170.2-72.5-12.9-6.1-19.9-6.2-31.3.5-47.9 28.2-94.4 59.9-145.1 81.8-89.9 38.9-184.6 60.8-282.5 34.9-61.4-16.2-114.4-50.8-162.4-92.4-34-29.5-36.2-29.5-70.7-1.1-62 51-133.6 83.9-208.5 111.1-92.9 33.7-188.8 54.4-286.8 64.1-119.6 11.8-230.5-8.5-311.4-106.8-64.9-78.8-82.2-170.2-42.5-265.1 43.5-104 93.7-205.2 140.9-307.7 24.6-53.4 49.4-106.7 73.3-160.4 4.4-9.9 6.1-21.4 6.6-32.3.9-20 5-41.9-18.1-54-23.6-12.3-51.5-10.1-68.9 11.9-21.7 27.4-41 57.5-57.1 88.6-53.6 102.8-105.4 206.6-157.7 310.1-39.2 77.6-77.7 155.6-117.2 233-37.5 73.4-107.9 101.4-184.3 72.8-25.7-9.7-41.8-28.6-46.2-57.5-6.1-40.9 7.3-77.6 21.8-114.2 31.7-80.2 63.8-160.2 95.5-240.4 17-43 34-86 49.9-129.4 11.2-30.3 14.5-62.5 1.5-92.3-10.1-23-29.9-39.6-57.7-37.1-30.4 2.7-54.3 18.6-65.8 46.8-40.3 99.5-79 199.7-118.6 299.5-47.4 119.4-94.1 239.2-143.5 357.8-18.3 43.8-45.9 83.8-92.3 102.5-23.5 9.5-50.1 15.4-75.4 15.8-79 1-147.1-25.3-193.7-92.4C0 1264.3-9 1205 8.9 1142.2c16.6-58.1 33.1-116.2 50.5-174 16.5-54.8 33.9-109.4 51-164 15.9-50.9 30.8-102.2 48.1-152.6 34-99.3 61.4-201.5 115.2-292.6 36.8-62.3 96.5-96 164.9-116.9 71.5-21.8 132.5 5.6 193.5 36 23.2 11.5 46 23.8 69.8 33.8 33.2 13.9 63.4 5.1 90.2-16.7 21.9-17.8 44-35.7 64.2-55.4 50.5-49.3 159.5-58.4 212.8-1.1 12.3 13.2 26.8 24.3 40.3 36.3 27.9 24.6 39.4 27.2 71.7 8.9 76.8-43.3 156.3-37.3 234.4-9.6 45.3 16.1 72.5 54.7 89.8 100.3 25.5 67.2 14.8 132-10.7 195.2-47 116.2-98.2 230.6-144 347.2-27.2 69.2-50.1 140.3-69.7 212-8 29.2-8 63.9-.6 93.2 11.2 44.4 51.9 59 93.1 64.2 62.7 7.9 124.2-3.7 184.2-20.3 51.3-14.1 101.8-31.6 151.9-49.7 24.2-8.7 46.7-22.1 69.8-33.9 19.7-10 21.3-24.6 10.9-43-21.2-37.5-43.6-74.5-62.3-113.3-39.6-82-72.1-166.6-63.4-260 7.6-81.8 37.1-152.9 112.6-195.9 111.4-63.5 201.9-46 283.8 48.9 70.8 82.1 94.2 180.9 63.8 286.8-17 59.2-41.4 116.4-64.6 173.7-6.4 15.9-2.7 26 7.3 35.3 46.9 43.8 100.4 77.9 159.8 102 22.4 9.1 46.1 15.9 69.8 20.7 51 10.2 98.4-1.9 140.9-30.8 20.2-13.7 20.7-26.5 6.6-45.7-97.8-133.4-136.5-281.9-107.1-445 11-61.1 39.3-118.8 104.8-136.4 40.5-10.9 86.3-10.4 128.5-5.1 68.5 8.7 130.5 36 172.6 95 50.5 70.8 63.4 148.2 41.6 232.8-15.6 60.8-47.5 112.4-82.6 162.6-13.9 19.9-14.4 38.2 4.5 51.6 29.2 20.5 58.8 43 91.8 54.9 71.6 25.8 146 23.5 218.1.3 79-25.4 134.5-77.8 166.1-155.5 37.8-93 38.3-190.3 36.3-288-1.5-76.3-4.2-152.7-6.5-229.1-.8-27.3-5.2-28.9-31.2-23.6-68.5 13.8-137.3 26.1-206.1 38.7-21.7 3.9-43.5 6.6-65.2 10.5-47.2 8.5-86.2-10.9-88.8-66.1-2.7-55.7-10.8-111.1-16.5-166.6-.3-3.1-.6-6.3-.8-9.4-3.2-65.4 12.6-100.9 91.1-98.1 81 3 162.1 5.6 243 9.9 39.8 2.1 53.8-8 56.4-47.5 2-30.7 2.9-61.4 4.8-92 2.9-46 13.4-56.9 60.1-55.1 27.9 1.1 56 6 83.3 12.1 38.5 8.6 58.6 35.7 61.3 74 2.2 31.3 1.3 62.9.8 94.4-.4 22.3 6.5 34.2 31.4 36.7 72 7.3 143.7 17.3 215.6 25.9 33.9 4 53 17.8 57.6 43 8 43.8-1.5 73.8-34.6 85.8-46.3 16.7-94.1 29.5-141.9 41.3-33.5 8.3-68.1 11.8-102.1 18.1-22.8 4.2-35.2 16.2-35 41.8.9 126.8-2 253.7 1.7 380.4 1.9 66.5 11.9 133 40.2 195.1 22.9 50.3 61.9 70.1 116.3 61 79.7-13.4 152.8-41.4 216.4-91.8 35.3-28 58.6-62.2 60.3-109.5 3.2-86.6 7.5-173.1 12.5-259.5 1.5-24.9 4.3-50.8 12.6-74 4.6-12.9 21.6-30 33.4-30.3 65.1-2 130.7-2.6 195.5 3 40.8 3.5 68.8 41.7 66.6 84.8-2.9 60.4-10.7 120.6-16.5 180.9-7.1 74.4-13.7 148.9-21.6 223.2-8 75.2 52.1 112.5 111.7 113.2 49.9.6 79.4-18 100.6-70.9 22-54.7 35-114 44.5-172.5 13.4-83 19.7-167.2 29.6-250.8 4-34.1 25.3-60.4 51.8-66.1 30.6-6.6 70.9 5.9 80.9 33.9 8.4 23.4 6.5 52 3.6 77.7-10.8 95.2-26.4 190-35.4 285.4-5.5 58.6 27.4 100.3 84.3 117.6 28.4 8.6 57.8 15.4 87.2 18.8 51.6 5.9 88.1-31.8 98.9-90.4 9.1-49.3 10.3-100.1 14.8-150.3 5.2-59.6 5.9-119.9 16.1-178.6 15-86.9 71.1-165.7 175.1-191 62.4-15.2 125.4-17 187.7-9.8 95 10.9 194.5 75.5 224.9 184.7 23.1 83 13.9 163.2-13.2 243-31.5 92.5-88.9 164.6-169.2 219.5-7.4 5.1-11.7 14.7-17.4 22.2 10.1 4.5 20.3 12.9 30.3 12.7 96-1.5 186.4-23.4 269.3-73.7 18.7-11.3 39.1-19.9 58.8-29.3 18.1-8.6 28.8 1.6 23.8 17.2-8.4 26.2-18.5 53.9-35.3 75.1-71 89.8-167.9 132.8-279.9 140.3-47.5 3.2-95.7-3.2-143.6-5.8-36.1-2-72.2-5.2-108.3-7.6-18.3-1.2-28.9 6.5-33.5 25.5-28.8 118.7-44 239.5-58.9 360.5-9.4 76.2-23.6 152.2-41.9 226.8-9.9 40.5-41.5 68.4-85.2 75.4-26.1 4.2-45.5-7.1-54.3-31.5-7.4-20.6-14.3-42.1-16.1-63.7-8.6-106.3-5.1-212.3 9-318.1 7.2-53.8 11.9-107.9 18.1-161.9 4.3-37.5 10-74.9 13.5-112.5 2.8-30.4-4.1-37.5-33.2-43.3-60.1-12-120.3-23.8-180.2-37-40.7-9-72.4 5.4-99.9 33.4-36.6 37.3-77.1 69.6-125.1 90.6-58 25.3-119.5 20-179.1 10.5-86.1-13.7-154.8-59-203.7-131.6-15.2-22.5-26.2-47.9-38.1-72.5-6.7-13.8-12.6-19.1-28.8-10.9-57.2 29.1-114.2 59-173.2 84-65.8 27.8-135.6 37.6-205.5 18.1-68.1-19-120.4-62.9-163.8-117.7-11.7-14.5-23.1-29.3-41.1-52.4zm1962.4-272.7c-.8-9.4-.8-18.9-2.3-28.2-8.7-53.7-62.6-77.7-106.1-45.4-19.6 14.6-37.5 33.9-50.9 54.4-44.8 68.6-65 147.2-85.2 225.4-5.1 19.6-8.6 40.4-8.2 60.5.8 37.5 22.8 48.6 54.3 28.3 65.3-42.1 113.6-100.5 154.4-165.4 24.8-39.3 45.1-80.9 44-129.6zm-2560.8 37.9c.6-37.3-8.1-71.8-35.6-98.7-15.2-14.9-34.3-21.3-56.1-14.5-26.5 8.2-40.8 27.9-42.8 60.5-3.9 63.2 23.3 117.5 51.2 171 14.4 27.5 28.1 26.7 46.6 1.2 26-35.6 36.1-76 36.7-119.5zm-644.3-12.1c-6.9-22.9-11.5-46.8-21.3-68.3-12.6-27.4-45.1-39.7-73.8-32.2-30.4 8-42.4 22.5-39.3 59.9 2.8 32.6 10.3 65.1 18.9 96.7 6.4 23.3 16.2 46.1 27.7 67.3 15.6 28.5 31.9 28.8 47.2 1.2 21.2-38.1 37.6-78 40.6-124.6z" />
</svg>
</div>
</div>
<div class="right">
<div class="btn btn-shop">Shop</div>
<div class="btn btn-subscribe">Subscribe</div>
<div class="btn btn-login">Login</div>
</div>
</header>
I have fixed it by converting the .center into an absolute element. You can specify a fixed width to the logo.
.center {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 160px;
}
Link to the codepen
The problem you will face is that your button elements on the right will take up too much space. So when scaling down to smaller screens the <div class="right"> group need space to show on the screen.
One solution, which I don't overly recommend as you'll have overflow issues is below:
.left, .right {
width: 20%; // or 25% (means they will take 50% of the width combined)
}
.center {
width: 50%; // take up remaining 50%
display: flex;
align-items: center;
justify-content: center;
// flex will now position .logo container center
}
Another approach which for me is something I would do is to determine which elements/buttons are needed in smaller screens and think of using a Sidedrawer/Pullout menu. A link to W3Schools is below to help with that.
https://www.w3schools.com/howto/howto_js_sidenav.asp
Also then you can use Media queries to set when a 'Full' Header menu is to be available for suitable screen widths.
Two common media queries are:
// Tablet Media Query for screens at a minimum width of 768px
#media screen and (min-width: 768px) {}
// Desktop Media Query for screens at a minimum width of 1024px
#media screen and (min-width: 1024px) {}
Your logo does not depend on the viewport, it depends on the flexbox it's inside of. There is no way to make it ignore its parent container and center to the viewport.
Instead you can make the .right and .left classes (the ones wrapping your home and other buttons) the same width. This will make sure that the space left in the middle is perfectly centered. In this example I've added display: flex and justify-items: start to .left as well to prevent the home button from stretching and set the width to the width of the larger div shown in the inspector. With this solution you'll have to break to a different layout pretty early on with a media query since the logo starts touching the buttons on the right around 768px viewport width which looks odd.
header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 1rem;
}
.btn {
padding: 1rem;
border-radius: 0.5rem;
color: white;
}
.btn.btn-home {
background: red;
}
svg {
width: 10rem;
height: auto;
}
.left, .right {
width: 272px;
display: flex;
}
.left {
justify-items: start
}
.btn.btn-shop {
background: blue;
margin-right: 1rem;
}
.btn.btn-subscribe {
background: orange;
margin-right: 1rem;
}
.btn.btn-login {
background: grey;
}
<header>
<div class="left">
<div class="btn btn-home">Home</div>
</div>
<div class="center">
<div class="logo">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5573.1 1990.2" width="5573.1" height="1990.2">
<style>
.st0 {
fill: #ed1c40
}
</style>
<path class="st0"
d="M3283.8 1072.6c-7.7 11.6-12.6 19.5-17.9 27.2-49.8 71.4-105.8 136.6-182 181.7-102.2 60.4-213 85.3-328.4 60.3-59.2-12.9-114.4-46-170.2-72.5-12.9-6.1-19.9-6.2-31.3.5-47.9 28.2-94.4 59.9-145.1 81.8-89.9 38.9-184.6 60.8-282.5 34.9-61.4-16.2-114.4-50.8-162.4-92.4-34-29.5-36.2-29.5-70.7-1.1-62 51-133.6 83.9-208.5 111.1-92.9 33.7-188.8 54.4-286.8 64.1-119.6 11.8-230.5-8.5-311.4-106.8-64.9-78.8-82.2-170.2-42.5-265.1 43.5-104 93.7-205.2 140.9-307.7 24.6-53.4 49.4-106.7 73.3-160.4 4.4-9.9 6.1-21.4 6.6-32.3.9-20 5-41.9-18.1-54-23.6-12.3-51.5-10.1-68.9 11.9-21.7 27.4-41 57.5-57.1 88.6-53.6 102.8-105.4 206.6-157.7 310.1-39.2 77.6-77.7 155.6-117.2 233-37.5 73.4-107.9 101.4-184.3 72.8-25.7-9.7-41.8-28.6-46.2-57.5-6.1-40.9 7.3-77.6 21.8-114.2 31.7-80.2 63.8-160.2 95.5-240.4 17-43 34-86 49.9-129.4 11.2-30.3 14.5-62.5 1.5-92.3-10.1-23-29.9-39.6-57.7-37.1-30.4 2.7-54.3 18.6-65.8 46.8-40.3 99.5-79 199.7-118.6 299.5-47.4 119.4-94.1 239.2-143.5 357.8-18.3 43.8-45.9 83.8-92.3 102.5-23.5 9.5-50.1 15.4-75.4 15.8-79 1-147.1-25.3-193.7-92.4C0 1264.3-9 1205 8.9 1142.2c16.6-58.1 33.1-116.2 50.5-174 16.5-54.8 33.9-109.4 51-164 15.9-50.9 30.8-102.2 48.1-152.6 34-99.3 61.4-201.5 115.2-292.6 36.8-62.3 96.5-96 164.9-116.9 71.5-21.8 132.5 5.6 193.5 36 23.2 11.5 46 23.8 69.8 33.8 33.2 13.9 63.4 5.1 90.2-16.7 21.9-17.8 44-35.7 64.2-55.4 50.5-49.3 159.5-58.4 212.8-1.1 12.3 13.2 26.8 24.3 40.3 36.3 27.9 24.6 39.4 27.2 71.7 8.9 76.8-43.3 156.3-37.3 234.4-9.6 45.3 16.1 72.5 54.7 89.8 100.3 25.5 67.2 14.8 132-10.7 195.2-47 116.2-98.2 230.6-144 347.2-27.2 69.2-50.1 140.3-69.7 212-8 29.2-8 63.9-.6 93.2 11.2 44.4 51.9 59 93.1 64.2 62.7 7.9 124.2-3.7 184.2-20.3 51.3-14.1 101.8-31.6 151.9-49.7 24.2-8.7 46.7-22.1 69.8-33.9 19.7-10 21.3-24.6 10.9-43-21.2-37.5-43.6-74.5-62.3-113.3-39.6-82-72.1-166.6-63.4-260 7.6-81.8 37.1-152.9 112.6-195.9 111.4-63.5 201.9-46 283.8 48.9 70.8 82.1 94.2 180.9 63.8 286.8-17 59.2-41.4 116.4-64.6 173.7-6.4 15.9-2.7 26 7.3 35.3 46.9 43.8 100.4 77.9 159.8 102 22.4 9.1 46.1 15.9 69.8 20.7 51 10.2 98.4-1.9 140.9-30.8 20.2-13.7 20.7-26.5 6.6-45.7-97.8-133.4-136.5-281.9-107.1-445 11-61.1 39.3-118.8 104.8-136.4 40.5-10.9 86.3-10.4 128.5-5.1 68.5 8.7 130.5 36 172.6 95 50.5 70.8 63.4 148.2 41.6 232.8-15.6 60.8-47.5 112.4-82.6 162.6-13.9 19.9-14.4 38.2 4.5 51.6 29.2 20.5 58.8 43 91.8 54.9 71.6 25.8 146 23.5 218.1.3 79-25.4 134.5-77.8 166.1-155.5 37.8-93 38.3-190.3 36.3-288-1.5-76.3-4.2-152.7-6.5-229.1-.8-27.3-5.2-28.9-31.2-23.6-68.5 13.8-137.3 26.1-206.1 38.7-21.7 3.9-43.5 6.6-65.2 10.5-47.2 8.5-86.2-10.9-88.8-66.1-2.7-55.7-10.8-111.1-16.5-166.6-.3-3.1-.6-6.3-.8-9.4-3.2-65.4 12.6-100.9 91.1-98.1 81 3 162.1 5.6 243 9.9 39.8 2.1 53.8-8 56.4-47.5 2-30.7 2.9-61.4 4.8-92 2.9-46 13.4-56.9 60.1-55.1 27.9 1.1 56 6 83.3 12.1 38.5 8.6 58.6 35.7 61.3 74 2.2 31.3 1.3 62.9.8 94.4-.4 22.3 6.5 34.2 31.4 36.7 72 7.3 143.7 17.3 215.6 25.9 33.9 4 53 17.8 57.6 43 8 43.8-1.5 73.8-34.6 85.8-46.3 16.7-94.1 29.5-141.9 41.3-33.5 8.3-68.1 11.8-102.1 18.1-22.8 4.2-35.2 16.2-35 41.8.9 126.8-2 253.7 1.7 380.4 1.9 66.5 11.9 133 40.2 195.1 22.9 50.3 61.9 70.1 116.3 61 79.7-13.4 152.8-41.4 216.4-91.8 35.3-28 58.6-62.2 60.3-109.5 3.2-86.6 7.5-173.1 12.5-259.5 1.5-24.9 4.3-50.8 12.6-74 4.6-12.9 21.6-30 33.4-30.3 65.1-2 130.7-2.6 195.5 3 40.8 3.5 68.8 41.7 66.6 84.8-2.9 60.4-10.7 120.6-16.5 180.9-7.1 74.4-13.7 148.9-21.6 223.2-8 75.2 52.1 112.5 111.7 113.2 49.9.6 79.4-18 100.6-70.9 22-54.7 35-114 44.5-172.5 13.4-83 19.7-167.2 29.6-250.8 4-34.1 25.3-60.4 51.8-66.1 30.6-6.6 70.9 5.9 80.9 33.9 8.4 23.4 6.5 52 3.6 77.7-10.8 95.2-26.4 190-35.4 285.4-5.5 58.6 27.4 100.3 84.3 117.6 28.4 8.6 57.8 15.4 87.2 18.8 51.6 5.9 88.1-31.8 98.9-90.4 9.1-49.3 10.3-100.1 14.8-150.3 5.2-59.6 5.9-119.9 16.1-178.6 15-86.9 71.1-165.7 175.1-191 62.4-15.2 125.4-17 187.7-9.8 95 10.9 194.5 75.5 224.9 184.7 23.1 83 13.9 163.2-13.2 243-31.5 92.5-88.9 164.6-169.2 219.5-7.4 5.1-11.7 14.7-17.4 22.2 10.1 4.5 20.3 12.9 30.3 12.7 96-1.5 186.4-23.4 269.3-73.7 18.7-11.3 39.1-19.9 58.8-29.3 18.1-8.6 28.8 1.6 23.8 17.2-8.4 26.2-18.5 53.9-35.3 75.1-71 89.8-167.9 132.8-279.9 140.3-47.5 3.2-95.7-3.2-143.6-5.8-36.1-2-72.2-5.2-108.3-7.6-18.3-1.2-28.9 6.5-33.5 25.5-28.8 118.7-44 239.5-58.9 360.5-9.4 76.2-23.6 152.2-41.9 226.8-9.9 40.5-41.5 68.4-85.2 75.4-26.1 4.2-45.5-7.1-54.3-31.5-7.4-20.6-14.3-42.1-16.1-63.7-8.6-106.3-5.1-212.3 9-318.1 7.2-53.8 11.9-107.9 18.1-161.9 4.3-37.5 10-74.9 13.5-112.5 2.8-30.4-4.1-37.5-33.2-43.3-60.1-12-120.3-23.8-180.2-37-40.7-9-72.4 5.4-99.9 33.4-36.6 37.3-77.1 69.6-125.1 90.6-58 25.3-119.5 20-179.1 10.5-86.1-13.7-154.8-59-203.7-131.6-15.2-22.5-26.2-47.9-38.1-72.5-6.7-13.8-12.6-19.1-28.8-10.9-57.2 29.1-114.2 59-173.2 84-65.8 27.8-135.6 37.6-205.5 18.1-68.1-19-120.4-62.9-163.8-117.7-11.7-14.5-23.1-29.3-41.1-52.4zm1962.4-272.7c-.8-9.4-.8-18.9-2.3-28.2-8.7-53.7-62.6-77.7-106.1-45.4-19.6 14.6-37.5 33.9-50.9 54.4-44.8 68.6-65 147.2-85.2 225.4-5.1 19.6-8.6 40.4-8.2 60.5.8 37.5 22.8 48.6 54.3 28.3 65.3-42.1 113.6-100.5 154.4-165.4 24.8-39.3 45.1-80.9 44-129.6zm-2560.8 37.9c.6-37.3-8.1-71.8-35.6-98.7-15.2-14.9-34.3-21.3-56.1-14.5-26.5 8.2-40.8 27.9-42.8 60.5-3.9 63.2 23.3 117.5 51.2 171 14.4 27.5 28.1 26.7 46.6 1.2 26-35.6 36.1-76 36.7-119.5zm-644.3-12.1c-6.9-22.9-11.5-46.8-21.3-68.3-12.6-27.4-45.1-39.7-73.8-32.2-30.4 8-42.4 22.5-39.3 59.9 2.8 32.6 10.3 65.1 18.9 96.7 6.4 23.3 16.2 46.1 27.7 67.3 15.6 28.5 31.9 28.8 47.2 1.2 21.2-38.1 37.6-78 40.6-124.6z" />
</svg>
</div>
</div>
<div class="right">
<div class="btn btn-shop">Shop</div>
<div class="btn btn-subscribe">Subscribe</div>
<div class="btn btn-login">Login</div>
</div>
</header>
I created a SVG animation that works perfectly in Chrome but on Firefox and Safari, the scale animation goes all over the place. I've tweaked to where it'll work in Chrome and Firefox, but not Safari. It seems like it has something to do with transform-origin not working for all browsers even though I am using coordinates pixel values. I've tried transform-box:fill-box which is what seems to help in Firefox but not in Safari.
I also tried adding translate to the keyframes to the same coordinates used in transform-origin. That tends to work in Firefox but not in the other browsers
Is there a solution here that would work for all three browsers?
body {
background-color: #3D085F;
}
#Icon_Dot {
animation-name: iconDot;
animation-duration: .25s;
animation-delay: 2.1s;
opacity: 0;
animation-fill-mode: forwards;
transform-origin: 542.45px 110.3px;
}
#Circle_2, #Circke_3, #Circle_1 {
transform-origin: 930px 379px;
opacity: 0;
}
#Circke_3 {
animation-name:rings;
animation-duration: .8s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#Circle_2 {
animation-name:rings;
animation-duration: 1s;
animation-delay: .6s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#Circle_1 {
animation-name: rings;
animation-duration: 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
transform-origin: 520px 89px;
}
#keyframes iconDot {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity:1;
}
to {
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity:1;
}
}
#keyframes rings {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity: 1;
}
to {
transform:scale(1 1);
-ms-transform: scale(1 1);
-webkit-transform: scale(1 1);
opacity:1;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125.53 553.74">
<defs>
<style>
.cls-1,.cls-16,.cls-7{fill:none}.cls-3{fill:#fff}.cls-16,.cls-7{stroke:#fff;stroke-miterlimit:10}.cls-7{stroke-width:31px}.cls-16{stroke-width:21px}
</style>
<clipPath id="clip-path" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M420.39 706.42a6.49 6.49 0 0 1-6.49-6.49V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49v142.82a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M593.49 706.42a9.6 9.6 0 0 1-7.12-3.15L485.59 592.42a6.49 6.49 0 0 0-11.29 4.36v103.15a6.5 6.5 0 0 1-6.5 6.49 6.5 6.5 0 0 1-6.49-6.49V550.62a9.13 9.13 0 0 1 6.77 3l101.14 110.66a6.49 6.49 0 0 0 11.28-4.38V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M774 657.54V700a6.47 6.47 0 0 1-6.47 6.46A6.46 6.46 0 0 1 761 700V557.09a6.47 6.47 0 0 1 6.46-6.47h61.64c29 0 49.38 20.86 49.38 50.45 0 22.94-11.64 40.74-33.44 47.5a6.48 6.48 0 0 0-3.44 10l27.15 37.63a6.47 6.47 0 0 1-5.24 10.25 6.46 6.46 0 0 1-5.27-2.72l-35.51-49.9a6.44 6.44 0 0 0-5.26-2.72h-37a6.46 6.46 0 0 0-6.47 6.43zm0-24.84a6.46 6.46 0 0 0 6.46 6.46h46.74c18.1 0 38.32-11.07 38.32-38.09 0-13.63-7-39-38.32-39h-46.74a6.46 6.46 0 0 0-6.46 6.46z"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M918.84 706.42a6.5 6.5 0 0 1-6.49-6.49V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49v142.82a6.5 6.5 0 0 1-6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1098 706.42h-1.39a6.48 6.48 0 0 1-4.8-2.13L990.06 592.42a6.49 6.49 0 0 0-11.3 4.36v103.15a6.49 6.49 0 0 1-6.49 6.49 6.49 6.49 0 0 1-6.49-6.49V550.62H967a6.51 6.51 0 0 1 4.79 2.11l101.93 111.55a6.5 6.5 0 0 0 11.28-4.38V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1137.22 686.32a6.05 6.05 0 0 1 8.3-1.93 90.28 90.28 0 0 0 47.58 13.94c27.89 0 43.21-12.77 43.21-32.35 0-22.56-22.78-27.67-47.46-32.56-17.46-3.41-56.83-7.67-56.83-41.08s30.65-44.48 54.91-44.48a87.49 87.49 0 0 1 44.39 11.62 6.08 6.08 0 0 1 2.13 8.52 6.06 6.06 0 0 1-8 2.11c-13.2-7.22-25.57-10.76-40-10.76-15.11 0-40.65 9.36-40.65 32.35 0 24 34.48 27.24 55.76 31.29 18.09 3.4 48.53 10.43 48.53 43.2 0 29.16-22.56 43.63-55.34 43.63-23.87 0-40.83-6.07-54.77-14.91a6.09 6.09 0 0 1-1.87-8.4z"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1286.23 706.42a6.5 6.5 0 0 1-6.5-6.49V557.12a6.5 6.5 0 0 1 6.5-6.5 6.5 6.5 0 0 1 6.49 6.5v142.81a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1458.3 582.46a6.39 6.39 0 0 1-7.79-1.53 64.67 64.67 0 0 0-47.75-21.8c-36.18 0-65.77 32.14-65.77 69.6s29.59 69.17 65.77 69.17c21.94 0 36.31-7.57 47.91-21.06a6.37 6.37 0 0 1 7.42-1.63h.11a6.43 6.43 0 0 1 2.27 10c-12.39 14.8-30 24.54-57.71 24.54-43.63 0-78.75-36.39-78.75-81.09s35.12-81.09 78.75-81.09c25.56 0 44.15 9.46 57.38 24.86a6.44 6.44 0 0 1-1.84 10z"/>
</clipPath>
<clipPath id="clip-path-9" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M727.37 562.12h-37.88a5.74 5.74 0 0 0-5.75 5.74v132.81a5.74 5.74 0 0 1-5.75 5.75h-1.48a5.74 5.74 0 0 1-5.75-5.75V567.86a5.74 5.74 0 0 0-5.75-5.74h-37.24a5.75 5.75 0 0 1-5.75-5.75 5.74 5.74 0 0 1 5.75-5.75h99.6a5.74 5.74 0 0 1 5.75 5.75 5.75 5.75 0 0 1-5.75 5.75z"/>
</clipPath>
<clipPath id="clip-path-10" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1482.62 549.92h-6.23v18.37h-2.61v-18.37h-6.27v-2.2h15.11z"/>
</clipPath>
<clipPath id="clip-path-11" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1485.24 568.29v-20.57h.45l9.72 12 9.74-12h.45v20.57h-2.6v-13.82l-7.61 9.52-7.56-9.52v13.82z"/>
</clipPath>
<clipPath id="clip-path-12" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M794.26 752.84c0-2.1 1.69-3.62 4.13-3.62h1.34c2.94 0 3.7 1.35 5 4.29L819 785.22l14.38-31.71c1.27-2.94 2-4.29 5-4.29h1.17c2.44 0 4.12 1.52 4.12 3.62v48.87c0 1.76-.75 2.6-2.43 2.6h-.68c-1.6 0-2.35-.84-2.35-2.6v-45.93l-14.3 31c-1 2.27-2.19 3.61-5 3.61s-4-1.34-5-3.61l-14.22-31v45.93c0 1.76-.67 2.6-2.35 2.6h-.84c-1.6 0-2.28-.84-2.28-2.6z"/>
</clipPath>
<clipPath id="clip-path-13" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M881.83 752.76a3.19 3.19 0 0 1 3.19-3.2h32.55c1.68 0 2.61.84 2.61 2.35v.51c0 1.6-.93 2.36-2.61 2.36h-30v18.75h24.03c1.68 0 2.61.84 2.61 2.36v.33c0 1.6-.93 2.36-2.61 2.36h-24.06v20.18h30.54c1.68 0 2.6.76 2.6 2.27v.51c0 1.6-.92 2.44-2.6 2.44H885a3.19 3.19 0 0 1-3.19-3.2z"/>
</clipPath>
<clipPath id="clip-path-14" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M955.51 752.76a3.19 3.19 0 0 1 3.19-3.2h12.87c18.76 0 29.77 10 29.77 27.08S990.08 804 971.15 804H958.7a3.19 3.19 0 0 1-3.19-3.2zm16 46.17c15.31 0 24-8.07 24-22.12 0-13.88-8.92-22.21-23.89-22.21h-10.39v44.33z"/>
</clipPath>
<clipPath id="clip-path-15" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1038.11 751.83c0-1.68.84-2.61 2.43-2.61h.76a2.29 2.29 0 0 1 2.52 2.61v49.88c0 1.76-.84 2.6-2.52 2.6h-.76c-1.59 0-2.43-.84-2.43-2.6z"/>
</clipPath>
<clipPath id="clip-path-16" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1097.65 751.16c.59-1.43 1.6-2.11 4.29-2.11s3.7.68 4.29 2.11l19.94 51.47c.16.42-1.52 1.68-3.28 1.68a3.49 3.49 0 0 1-3.45-2.6l-6-15.48h-23.39l-5.88 15.48c-.76 2-2 2.6-3.28 2.6-1.69 0-3.37-1.26-3.2-1.68zm14 30l-9.85-25.57-9.83 25.57z"/>
</clipPath> </defs>
<g id="Icon">
<path id="Circke_3" data-name="Circke 3" class="cls-3" d="M958.7 333.84c32.57 1.46 56.66 32.38 44.85 64.42-12.24 33.23-53.33 40.51-78.75 17.41-4-3.68-10.08 2.32-6 6 29.51 26.82 78.07 19 92.72-20.06 14.06-37.49-14.41-74.58-52.81-76.3-5.48-.25-5.47 8.27 0 8.51z" transform="translate(-387.89 -257.76)"/>
<path id="Circle_2" data-name="Circle 2" d="M1024.26 441l-3.79-3.42a88.31 88.31 0 0 0 6.2-7.69l4.19 2.92a91.24 91.24 0 0 1-6.6 8.19zm15.38-24.89l-4.78-1.8c-.62 1.51-1.15 3.06-1.85 4.54l-2.24 4.38 4.47 2.46 2.41-4.69c.75-1.6 1.35-3.27 1.99-4.9zm4-18.44l-5.1-.29-.11 2.41-.39 2.4a43.22 43.22 0 0 1-.89 4.78l5 1.19a50.84 50.84 0 0 0 1-5.21l.42-2.63zm-58.18 67.27l-1.18-5c-1.56.45-3.19.57-4.78.87l-2.39.39-2.42.09.27 5.1 2.66-.11 2.62-.41c1.76-.31 3.53-.46 5.23-.94zm17.59-6.93l-2.48-4.47-4.36 2.26c-1.49.69-3 1.23-4.54 1.86l1.8 4.78c1.63-.67 3.3-1.27 4.89-2zm15.22-11l-3.43-3.78a84.68 84.68 0 0 1-7.67 6.22l2.93 4.18a88.13 88.13 0 0 0 8.18-6.63zM959 461.36c-68.6-1.91-106.38-85.72-56.26-135.84s133.93-12.33 135.85 56.26c.15 5.46 8.66 5.48 8.51 0-2.12-75.94-94.9-117.76-150.38-62.28S883 467.76 959 469.88c5.48.15 5.47-8.36 0-8.52z" transform="translate(-387.89 -257.76)" fill-rule="evenodd" fill="#fff"/>
<path id="Circle_1" data-name="Circle 1" class="cls-3" d="M959 266.27c-5.48-.1-5.48-8.61 0-8.51 83.78 1.62 145.63 85 116.88 165.54-30.18 84.56-137.77 107.61-202.78 47.92-4-3.71 2-9.72 6-6 61.64 56.6 164.26 32.7 190-48.41 23.61-74.45-33.47-149-110.1-150.52zM837.29 406l10.1-1.55a146.73 146.73 0 0 1-1.45-15.61l-10.2.4a157.69 157.69 0 0 0 1.55 16.76zm8.71 29.11l9.23-4.38a83.2 83.2 0 0 1-5.3-14.31l-9.85 2.72a94.6 94.6 0 0 0 5.92 15.97zm17.15 25.05l7.48-7a97.85 97.85 0 0 1-9.52-12l-8.51 5.65a107.08 107.08 0 0 0 10.58 13.35zm-10.27-142l8.84 5.13c2.42-4.61 5.62-8.71 8.58-13l-8.09-6.24c-3.21 4.65-6.65 9.13-9.3 14.12zM840.8 345.9l9.79 2.91c.75-2.48 1.71-4.9 2.55-7.35l1.3-3.67 1.64-3.52-9.32-4.18-1.76 3.85-1.42 4c-.9 2.64-1.94 5.27-2.75 7.97zm-5 29.75l10.2.5a71.57 71.57 0 0 1 .57-7.75l1.15-7.68-10-1.86-1.26 8.36a81.78 81.78 0 0 0-.58 8.44zm86.51-113.2l2.68 9.85a48.82 48.82 0 0 1 7.43-1.64l3.74-.68c1.24-.22 2.51-.19 3.77-.29l-.81-10.18c-1.42.12-2.86.1-4.27.34l-4.21.75a57.31 57.31 0 0 0-8.25 1.86zm-27.84 12.23l5.4 8.67c2.14-1.44 4.49-2.49 6.72-3.77 1.14-.59 2.24-1.27 3.41-1.8l3.54-1.47-4-9.4-3.93 1.64c-1.29.58-2.5 1.32-3.76 2-2.36 1.38-4.95 2.57-7.3 4.14zm-23.4 19.09l7.38 7.07 5.54-5.45c1.89-1.77 4-3.3 5.95-5l-6.34-8c-2.16 1.82-4.44 3.5-6.49 5.44z" transform="translate(-387.89 -257.76)"/>
</g>
<circle cx="542.45" cy="110.3" r="19.07" fill="#daa900" id="Icon_Dot" data-name="Icon Dot"/>
</svg>
Your problem is that the elements you are transforming, have a transform on them already. The animated scale() you are applying is overwriting the translate() that is already on them.
The fact that the browsers are handling this combination of transform change and transform-origin differently is a bug, and also a red herring.
What I have done below is move the existing transform to the parent group, and removed the transform-origin properties from the child elements.
<g id="Icon" transform="translate(-387.89 -257.76)">
<path id="Circke_3" />
<path id="Circle_2" />
<path id="Circle_1" />
</g>
The below example, now works correctly on both Chrome and Firefox. Unfortunately, I don't have access to a Mac right now, so I can't test Safari. But I hope that fixing the underlying problem will make this work there also.
body {
background-color: #3D085F;
}
#Icon_Dot {
animation-name: iconDot;
animation-duration: .25s;
animation-delay: 2.1s;
opacity: 0;
animation-fill-mode: forwards;
transform-origin: 542.45px 110.3px;
}
#Circle_2, #Circke_3, #Circle_1 {
transform-origin: 930px 379px;
opacity: 0;
}
#Circke_3 {
animation-name:rings;
animation-duration: .8s;
animation-fill-mode: forwards;
}
#Circle_2 {
animation-name:rings;
animation-duration: 1s;
animation-delay: .6s;
animation-fill-mode: forwards;
}
#Circle_1 {
animation-name: rings;
animation-duration: 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
}
#keyframes iconDot {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity:1;
}
to {
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity:1;
}
}
#keyframes rings {
from {
transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transform: scale(0.1);
opacity: 1;
}
to {
transform:scale(1 1);
-ms-transform: scale(1 1);
-webkit-transform: scale(1 1);
opacity:1;
}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125.53 553.74">
<defs>
<style>
.cls-1,.cls-16,.cls-7{fill:none}.cls-3{fill:#fff}.cls-16,.cls-7{stroke:#fff;stroke-miterlimit:10}.cls-7{stroke-width:31px}.cls-16{stroke-width:21px}
</style>
<clipPath id="clip-path" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M420.39 706.42a6.49 6.49 0 0 1-6.49-6.49V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49v142.82a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M593.49 706.42a9.6 9.6 0 0 1-7.12-3.15L485.59 592.42a6.49 6.49 0 0 0-11.29 4.36v103.15a6.5 6.5 0 0 1-6.5 6.49 6.5 6.5 0 0 1-6.49-6.49V550.62a9.13 9.13 0 0 1 6.77 3l101.14 110.66a6.49 6.49 0 0 0 11.28-4.38V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M774 657.54V700a6.47 6.47 0 0 1-6.47 6.46A6.46 6.46 0 0 1 761 700V557.09a6.47 6.47 0 0 1 6.46-6.47h61.64c29 0 49.38 20.86 49.38 50.45 0 22.94-11.64 40.74-33.44 47.5a6.48 6.48 0 0 0-3.44 10l27.15 37.63a6.47 6.47 0 0 1-5.24 10.25 6.46 6.46 0 0 1-5.27-2.72l-35.51-49.9a6.44 6.44 0 0 0-5.26-2.72h-37a6.46 6.46 0 0 0-6.47 6.43zm0-24.84a6.46 6.46 0 0 0 6.46 6.46h46.74c18.1 0 38.32-11.07 38.32-38.09 0-13.63-7-39-38.32-39h-46.74a6.46 6.46 0 0 0-6.46 6.46z"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M918.84 706.42a6.5 6.5 0 0 1-6.49-6.49V557.11a6.5 6.5 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.5 6.49v142.82a6.5 6.5 0 0 1-6.5 6.49z"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1098 706.42h-1.39a6.48 6.48 0 0 1-4.8-2.13L990.06 592.42a6.49 6.49 0 0 0-11.3 4.36v103.15a6.49 6.49 0 0 1-6.49 6.49 6.49 6.49 0 0 1-6.49-6.49V550.62H967a6.51 6.51 0 0 1 4.79 2.11l101.93 111.55a6.5 6.5 0 0 0 11.28-4.38V557.11a6.49 6.49 0 0 1 6.49-6.49 6.5 6.5 0 0 1 6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1137.22 686.32a6.05 6.05 0 0 1 8.3-1.93 90.28 90.28 0 0 0 47.58 13.94c27.89 0 43.21-12.77 43.21-32.35 0-22.56-22.78-27.67-47.46-32.56-17.46-3.41-56.83-7.67-56.83-41.08s30.65-44.48 54.91-44.48a87.49 87.49 0 0 1 44.39 11.62 6.08 6.08 0 0 1 2.13 8.52 6.06 6.06 0 0 1-8 2.11c-13.2-7.22-25.57-10.76-40-10.76-15.11 0-40.65 9.36-40.65 32.35 0 24 34.48 27.24 55.76 31.29 18.09 3.4 48.53 10.43 48.53 43.2 0 29.16-22.56 43.63-55.34 43.63-23.87 0-40.83-6.07-54.77-14.91a6.09 6.09 0 0 1-1.87-8.4z"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1286.23 706.42a6.5 6.5 0 0 1-6.5-6.49V557.12a6.5 6.5 0 0 1 6.5-6.5 6.5 6.5 0 0 1 6.49 6.5v142.81a6.5 6.5 0 0 1-6.49 6.49z"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1458.3 582.46a6.39 6.39 0 0 1-7.79-1.53 64.67 64.67 0 0 0-47.75-21.8c-36.18 0-65.77 32.14-65.77 69.6s29.59 69.17 65.77 69.17c21.94 0 36.31-7.57 47.91-21.06a6.37 6.37 0 0 1 7.42-1.63h.11a6.43 6.43 0 0 1 2.27 10c-12.39 14.8-30 24.54-57.71 24.54-43.63 0-78.75-36.39-78.75-81.09s35.12-81.09 78.75-81.09c25.56 0 44.15 9.46 57.38 24.86a6.44 6.44 0 0 1-1.84 10z"/>
</clipPath>
<clipPath id="clip-path-9" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M727.37 562.12h-37.88a5.74 5.74 0 0 0-5.75 5.74v132.81a5.74 5.74 0 0 1-5.75 5.75h-1.48a5.74 5.74 0 0 1-5.75-5.75V567.86a5.74 5.74 0 0 0-5.75-5.74h-37.24a5.75 5.75 0 0 1-5.75-5.75 5.74 5.74 0 0 1 5.75-5.75h99.6a5.74 5.74 0 0 1 5.75 5.75 5.75 5.75 0 0 1-5.75 5.75z"/>
</clipPath>
<clipPath id="clip-path-10" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1482.62 549.92h-6.23v18.37h-2.61v-18.37h-6.27v-2.2h15.11z"/>
</clipPath>
<clipPath id="clip-path-11" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1485.24 568.29v-20.57h.45l9.72 12 9.74-12h.45v20.57h-2.6v-13.82l-7.61 9.52-7.56-9.52v13.82z"/>
</clipPath>
<clipPath id="clip-path-12" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M794.26 752.84c0-2.1 1.69-3.62 4.13-3.62h1.34c2.94 0 3.7 1.35 5 4.29L819 785.22l14.38-31.71c1.27-2.94 2-4.29 5-4.29h1.17c2.44 0 4.12 1.52 4.12 3.62v48.87c0 1.76-.75 2.6-2.43 2.6h-.68c-1.6 0-2.35-.84-2.35-2.6v-45.93l-14.3 31c-1 2.27-2.19 3.61-5 3.61s-4-1.34-5-3.61l-14.22-31v45.93c0 1.76-.67 2.6-2.35 2.6h-.84c-1.6 0-2.28-.84-2.28-2.6z"/>
</clipPath>
<clipPath id="clip-path-13" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M881.83 752.76a3.19 3.19 0 0 1 3.19-3.2h32.55c1.68 0 2.61.84 2.61 2.35v.51c0 1.6-.93 2.36-2.61 2.36h-30v18.75h24.03c1.68 0 2.61.84 2.61 2.36v.33c0 1.6-.93 2.36-2.61 2.36h-24.06v20.18h30.54c1.68 0 2.6.76 2.6 2.27v.51c0 1.6-.92 2.44-2.6 2.44H885a3.19 3.19 0 0 1-3.19-3.2z"/>
</clipPath>
<clipPath id="clip-path-14" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M955.51 752.76a3.19 3.19 0 0 1 3.19-3.2h12.87c18.76 0 29.77 10 29.77 27.08S990.08 804 971.15 804H958.7a3.19 3.19 0 0 1-3.19-3.2zm16 46.17c15.31 0 24-8.07 24-22.12 0-13.88-8.92-22.21-23.89-22.21h-10.39v44.33z"/>
</clipPath>
<clipPath id="clip-path-15" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1038.11 751.83c0-1.68.84-2.61 2.43-2.61h.76a2.29 2.29 0 0 1 2.52 2.61v49.88c0 1.76-.84 2.6-2.52 2.6h-.76c-1.59 0-2.43-.84-2.43-2.6z"/>
</clipPath>
<clipPath id="clip-path-16" transform="translate(-387.89 -257.76)">
<path class="cls-1" d="M1097.65 751.16c.59-1.43 1.6-2.11 4.29-2.11s3.7.68 4.29 2.11l19.94 51.47c.16.42-1.52 1.68-3.28 1.68a3.49 3.49 0 0 1-3.45-2.6l-6-15.48h-23.39l-5.88 15.48c-.76 2-2 2.6-3.28 2.6-1.69 0-3.37-1.26-3.2-1.68zm14 30l-9.85-25.57-9.83 25.57z"/>
</clipPath> </defs>
<g id="Icon" transform="translate(-387.89 -257.76)">
<path id="Circke_3" data-name="Circke 3" class="cls-3" d="M958.7 333.84c32.57 1.46 56.66 32.38 44.85 64.42-12.24 33.23-53.33 40.51-78.75 17.41-4-3.68-10.08 2.32-6 6 29.51 26.82 78.07 19 92.72-20.06 14.06-37.49-14.41-74.58-52.81-76.3-5.48-.25-5.47 8.27 0 8.51z"/>
<path id="Circle_2" data-name="Circle 2" d="M1024.26 441l-3.79-3.42a88.31 88.31 0 0 0 6.2-7.69l4.19 2.92a91.24 91.24 0 0 1-6.6 8.19zm15.38-24.89l-4.78-1.8c-.62 1.51-1.15 3.06-1.85 4.54l-2.24 4.38 4.47 2.46 2.41-4.69c.75-1.6 1.35-3.27 1.99-4.9zm4-18.44l-5.1-.29-.11 2.41-.39 2.4a43.22 43.22 0 0 1-.89 4.78l5 1.19a50.84 50.84 0 0 0 1-5.21l.42-2.63zm-58.18 67.27l-1.18-5c-1.56.45-3.19.57-4.78.87l-2.39.39-2.42.09.27 5.1 2.66-.11 2.62-.41c1.76-.31 3.53-.46 5.23-.94zm17.59-6.93l-2.48-4.47-4.36 2.26c-1.49.69-3 1.23-4.54 1.86l1.8 4.78c1.63-.67 3.3-1.27 4.89-2zm15.22-11l-3.43-3.78a84.68 84.68 0 0 1-7.67 6.22l2.93 4.18a88.13 88.13 0 0 0 8.18-6.63zM959 461.36c-68.6-1.91-106.38-85.72-56.26-135.84s133.93-12.33 135.85 56.26c.15 5.46 8.66 5.48 8.51 0-2.12-75.94-94.9-117.76-150.38-62.28S883 467.76 959 469.88c5.48.15 5.47-8.36 0-8.52z" fill-rule="evenodd" fill="#fff"/>
<path id="Circle_1" data-name="Circle 1" class="cls-3" d="M959 266.27c-5.48-.1-5.48-8.61 0-8.51 83.78 1.62 145.63 85 116.88 165.54-30.18 84.56-137.77 107.61-202.78 47.92-4-3.71 2-9.72 6-6 61.64 56.6 164.26 32.7 190-48.41 23.61-74.45-33.47-149-110.1-150.52zM837.29 406l10.1-1.55a146.73 146.73 0 0 1-1.45-15.61l-10.2.4a157.69 157.69 0 0 0 1.55 16.76zm8.71 29.11l9.23-4.38a83.2 83.2 0 0 1-5.3-14.31l-9.85 2.72a94.6 94.6 0 0 0 5.92 15.97zm17.15 25.05l7.48-7a97.85 97.85 0 0 1-9.52-12l-8.51 5.65a107.08 107.08 0 0 0 10.58 13.35zm-10.27-142l8.84 5.13c2.42-4.61 5.62-8.71 8.58-13l-8.09-6.24c-3.21 4.65-6.65 9.13-9.3 14.12zM840.8 345.9l9.79 2.91c.75-2.48 1.71-4.9 2.55-7.35l1.3-3.67 1.64-3.52-9.32-4.18-1.76 3.85-1.42 4c-.9 2.64-1.94 5.27-2.75 7.97zm-5 29.75l10.2.5a71.57 71.57 0 0 1 .57-7.75l1.15-7.68-10-1.86-1.26 8.36a81.78 81.78 0 0 0-.58 8.44zm86.51-113.2l2.68 9.85a48.82 48.82 0 0 1 7.43-1.64l3.74-.68c1.24-.22 2.51-.19 3.77-.29l-.81-10.18c-1.42.12-2.86.1-4.27.34l-4.21.75a57.31 57.31 0 0 0-8.25 1.86zm-27.84 12.23l5.4 8.67c2.14-1.44 4.49-2.49 6.72-3.77 1.14-.59 2.24-1.27 3.41-1.8l3.54-1.47-4-9.4-3.93 1.64c-1.29.58-2.5 1.32-3.76 2-2.36 1.38-4.95 2.57-7.3 4.14zm-23.4 19.09l7.38 7.07 5.54-5.45c1.89-1.77 4-3.3 5.95-5l-6.34-8c-2.16 1.82-4.44 3.5-6.49 5.44z"/>
</g>
<circle cx="542.45" cy="110.3" r="19.07" fill="#daa900" id="Icon_Dot" data-name="Icon Dot"/>
</svg>
I'm using CSS keyframes and SVG to animate my company logo, which should be a fairly straight forward process but I must have missed something because as you can see in the JS Fiddle below it has a thin inside fill within the white line. I want the characters to be a single white line only.
I've set the fill to none and the font which the logo is based is outlined into one single path, so not sure what can be causing this?
https://jsfiddle.net/nzz970aL/1/
Markup
<div class="placeholder">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="35.6 317.2 863.3 110.8" enable-background="new 35.6 317.2 863.3 110.8" xml:space="preserve">
<path class="logo" fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="4" d="M86.8 349.2c0-12.2-9.7-21.9-21.9-21.9s-22.3 9.9-22.3 21.9c0 12.2 10.7 18.8 22.1 22.1 15.1 4.3 27.5 12.2 27.5 27.5 0 15.1-12.2 27.7-27.5 27.7s-27.5-12.6-27.5-27.7c0.2-1.6 1.2-2.5 2.9-2.5 1.4 0 2.7 0.8 2.7 2.3 -0.2 12.2 9.7 22.3 21.9 22.3s21.9-10.1 21.9-22.1c0-12.2-10.5-19.2-21.9-21.9 -14.5-3.7-27.5-12.2-27.5-27.7 0-14.9 12.4-27.5 27.7-27.5s27.3 12.4 27.3 27.5c-0.2 1.9-1.4 2.7-2.7 2.7C87.7 351.9 86.8 350.9 86.8 349.2L86.8 349.2zM227.3 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.5-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L227.3 422.3zM281.7 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1s-2.7-1-2.7-2.7v-95H281.7zM361 325.2c0-1.7 1-2.7 2.7-2.7s2.7 1 2.7 2.7v57.2c0 20.7 17.4 38.2 38.2 38.2 21.1 0 38.2-17.2 38.2-38.2v-56.8c0-1.7 1-2.9 2.7-2.9 1.7 0 2.7 1 2.7 2.7v57.2c0 24-19.6 43.6-43.6 43.6S361 406.6 361 382.5L361 325.2 361 325.2zM490.3 322.7h35.5c19.8 0 35.3 15.7 35.3 35.3 0 17.6-12.6 32.2-29.3 34.9l27.9 28.1h-0.2c0.8 0.6 1.2 1.6 1.2 2.1 0 1.7-1 2.7-2.7 2.7 -1.2 0-1.6-0.2-2.1-1L524 393.2h-28.3v29.7c0 2.1-1 3.3-2.7 3.3s-2.7-1-2.7-2.7L490.3 322.7 490.3 322.7zM495.7 387.8h30c16.3 0 29.7-13.6 29.7-29.8s-13.4-29.8-29.7-29.8h-30L495.7 387.8 495.7 387.8zM701.7 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.3-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L701.7 422.3zM756.2 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1 -1.7 0-2.7-1-2.7-2.7v-95H756.2zM840.9 376.1v44.2h53.7c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-59.5V322.7h59.1c1.9 0 3.1 1 3.1 2.7s-1 2.7-2.7 2.7h-53.9c0 7.4-0.2 14.1-0.2 21.3v21.1h8.7c2.1 0 3.1 1 3.1 2.7s-0.8 2.7-2.7 2.7h-8.9V376.1z"/>
</svg>
</div>
CSS
* {
margin: 0;
border: 0;
}
body {
background: #000;
}
.placeholder {
position: absolute;
top: 50%;
text-align: center;
z-index: 99;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
svg {
max-width: 480px;
}
.logo {
stroke-dasharray:1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
I was experimenting with Svg graphics and I came across this challenge. Haven't been able to
figure out the reason why this image crops and does not scale.
The svg code is
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path class="st0" d="M143.5 69c-2.6-1-5.5 0.2-6.5 2.7 -2.2 5.4-1.7 10.4-1 13.4l-42.4 51.1 -53.2-15.8c-1-0.5-6.2-3.6-6.2-11.6 0-2.5 0.4-5.8 2.3-7.3 2.2-1.7 6-0.9 6-0.9 0.2 0.1 0.5 0.1 0.7 0.1l47.3 13.5c0.4 0.1 0.9 0.2 1.3 0.2 1.5 0 2.9-0.7 3.8-1.8l50.1-57.7c1.1-1.3 1.4-3.1 0.8-4.8 -0.6-1.6-1.9-2.8-3.6-3.2L84.2 33.8c-1.8-0.4-3.6 0.2-4.8 1.6L30.5 89.8c-0.9 1.1-3.3 4.8-4.6 9.8 -1.1 2.6-1.7 5.7-1.7 9.3 0 15.3 12 20.6 12.5 20.8 0.2 0.1 0.4 0.1 0.5 0.2L94 146.8c0.5 0.1 0.9 0.2 1.4 0.2 1.5 0 2.9-0.6 3.8-1.8l46.3-55.7c1.2-1.5 1.5-3.5 0.7-5.3 0 0-1.7-4.2 0.1-8.7C147.3 72.9 146.1 70 143.5 69zM73.8 58.4l3.8-4.5c1-1.2 3.5-1.8 5.4-1.4l35.1 8.5c1.9 0.5 2.7 1.9 1.6 3.1l-3.8 4.5c-1 1.2-3.5 1.9-5.4 1.4l-35.1-8.6C73.5 61 72.8 59.7 73.8 58.4z"/></svg>
The file construction is
<div id="bigBook" >
</div>
<div id="bigBook" class="smallBook">
</div>
CSS is
.st0{fill: #333333;}
.smallBook{ transform: scale(0);}
#bigBook{
height: 175px; width: 175px;
background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQzLjUgNjljLTIuNi0xLTUuNSAwLjItNi41IDIuNyAtMi4yIDUuNC0xLjcgMTAuNC0xIDEzLjRsLTQyLjQgNTEuMSAtNTMuMi0xNS44Yy0xLTAuNS02LjItMy42LTYuMi0xMS42IDAtMi41IDAuNC01LjggMi4zLTcuMyAyLjItMS43IDYtMC45IDYtMC45IDAuMiAwLjEgMC41IDAuMSAwLjcgMC4xbDQ3LjMgMTMuNWMwLjQgMC4xIDAuOSAwLjIgMS4zIDAuMiAxLjUgMCAyLjktMC43IDMuOC0xLjhsNTAuMS01Ny43YzEuMS0xLjMgMS40LTMuMSAwLjgtNC44IC0wLjYtMS42LTEuOS0yLjgtMy42LTMuMkw4NC4yIDMzLjhjLTEuOC0wLjQtMy42IDAuMi00LjggMS42TDMwLjUgODkuOGMtMC45IDEuMS0zLjMgNC44LTQuNiA5LjggLTEuMSAyLjYtMS43IDUuNy0xLjcgOS4zIDAgMTUuMyAxMiAyMC42IDEyLjUgMjAuOCAwLjIgMC4xIDAuNCAwLjEgMC41IDAuMkw5NCAxNDYuOGMwLjUgMC4xIDAuOSAwLjIgMS40IDAuMiAxLjUgMCAyLjktMC42IDMuOC0xLjhsNDYuMy01NS43YzEuMi0xLjUgMS41LTMuNSAwLjctNS4zIDAgMC0xLjctNC4yIDAuMS04LjdDMTQ3LjMgNzIuOSAxNDYuMSA3MCAxNDMuNSA2OXpNNzMuOCA1OC40bDMuOC00LjVjMS0xLjIgMy41LTEuOCA1LjQtMS40bDM1LjEgOC41YzEuOSAwLjUgMi43IDEuOSAxLjYgMy4xbC0zLjggNC41Yy0xIDEuMi0zLjUgMS45LTUuNCAxLjRsLTM1LjEtOC42QzczLjUgNjEgNzIuOCA1OS43IDczLjggNTguNHoiLz48L2c+Cjwvc3ZnPg==) no-repeat center center;
}