Problème with media queries that does not activate - css
I train my CSS by making models of site or others already created. Currently, I am training with media queries and I have a problem is that it does not apply.
Before posting this message I created a simple page with a div containing two to see how the breakpoints worked and I got there but on this page I can't.
Could you tell me why nothing is happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0 auto;
background: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
}
p {
width: 350px;
color: hsl(237, 12%, 33%);
font-size: 12px;
margin-bottom: 15px;
padding-top: -7px;
}
h1 {
font-weight: 700;
color: hsl(238, 29%, 16%);
margin-bottom: 15px;
font-size: 31px;
letter-spacing: 2px;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
background-color: white;
border-radius: 23px;
display: flex;
justify-content: space-around;
align-items: center;
width: 920px;
height: 510px;
overflow: hidden;
margin-right: 191px;
}
.leftSide {
width: 100%;
display: flex;
}
.svgCube {
position: relative;
left: 60px;
top: 45px;
z-index: 800;
}
.svgWoman {
display: block;
position: relative;
right: 85px;
}
.rightSide {
display: flex;
flex-direction: column;
width: 100%;
background-color: transparent;
margin-top: -20px;
margin-left: 3px;
}
.hiddenElement {
display: none;
}
.divider {
width: 335px;
border-bottom: 1px solid hsl(240, 5%, 91%);
}
.btnFaq {
width: 335px;
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
background-color: white;
border: none;
color: hsl(237, 12%, 33%);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 22px;
padding-bottom: 15px;
}
.btnFaq:hover {
color: hsl(14, 88%, 65%);
}
#media only screen and (min-with: 300px) and (max-with: 850px) {
.container {
flex-direction: column;
}
.box {
flex-direction: column;
flex-wrap: wrap;
width: 80vw;
height: 60vh;
}
}
</style>
<title>Frontend Mentor | FAQ Accordion Card</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<script src="main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<svg class="svgCube" width="191" height="184" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-97.9%" y="-76.3%" width="295.8%" height="313.7%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="25" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0.209139076 0 0 0 0 0.0691446444 0 0 0 0 0.478091033 0 0 0 0.497159091 0" in="shadowBlurOuter1" />
</filter>
<path id="b" d="M0 27.756v53.87l41.968 24.035 47.387-28.025v-53.87" />
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(50.93 2.125)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<use fill="#FF9271" xlink:href="#b" />
</g>
<path fill="#DF5C34" fill-rule="nonzero" d="M92.899 53.917v53.87l47.387-28.026v-53.87z" />
<path fill="#F47B56" fill-rule="nonzero" d="M50.93 29.88L99.624 2.126l40.662 23.767-47.387 28.025z" />
<path d="M94.013 14.49a25.942 25.942 0 0114.207 3.129c2.486 1.462 3.844 2.988 4.036 4.579.192 1.59-.628 2.975-2.562 4.143a9.115 9.115 0 01-2.985 1.18c-.869.205-1.76.295-2.652.269l-.974-.077c.091.217.151.446.18.68a3.132 3.132 0 01-.513 1.552 5.704 5.704 0 01-2.1 2.065 12.633 12.633 0 01-6.7 1.77 13.247 13.247 0 01-6.957-1.757c-1.999-1.18-3.023-2.566-3.1-4.156a4.49 4.49 0 012.562-4.015 8.488 8.488 0 012.357-1.013 9.175 9.175 0 012.037-.346h.705l-1.282-.77 3.6-2.244 8.34 4.912a4.377 4.377 0 004.15 0c1.769-1.103 1.137-2.552-1.895-4.348a19.261 19.261 0 00-10.556-2.347 21.67 21.67 0 00-11.018 3.168c-3.023 1.89-4.522 4.143-4.496 6.76 0 2.564 1.601 4.848 4.714 6.682a21.015 21.015 0 0011.146 2.655 20.926 20.926 0 0011.017-2.925 12.353 12.353 0 003.062-2.565 5.683 5.683 0 001.28-2.18l.18-.808 4.753.269c.008.145.008.29 0 .436a8.216 8.216 0 01-.346 1.154 8.303 8.303 0 01-.82 1.72 11.912 11.912 0 01-1.69 2 15.952 15.952 0 01-2.755 2.13 25.602 25.602 0 01-9.326 3.36 35.176 35.176 0 01-10.877.192 24.896 24.896 0 01-9.339-3.053 12.127 12.127 0 01-5.304-5.566 8.192 8.192 0 010-6.593 12.692 12.692 0 015.266-5.759 28.966 28.966 0 0114.655-4.284zm4.663 13.262c-.17-.891-.77-1.64-1.601-2.001a6.579 6.579 0 00-3.33-.911 5.619 5.619 0 00-3.101.795 2.283 2.283 0 00-1.281 2.001c.117.89.69 1.654 1.512 2.014a6.54 6.54 0 003.394.86 6.092 6.092 0 003.254-.847 2.065 2.065 0 001.205-1.911" fill="#3E2928" fill-rule="nonzero" />
</g>
</svg>
<div class="box">
<div class="leftSide">
<svg class="svgWoman" width="472" height="359" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="61.181%" y1="36.82%" x2="40.788%" y2="55.54%" id="a">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="82.186%" y1="28.519%" x2="29.852%" y2="62.464%" id="b">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="80.66%" y1="21.864%" x2="21.557%" y2="66.62%" id="c">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="81.016%" y1="60.589%" x2="67.462%" y2="55.277%" id="d">
<stop stop-color="#FFF" stop-opacity="0" offset="0%" />
<stop stop-color="#DC841E" offset="99%" />
</linearGradient>
<linearGradient x1="82.183%" y1="27.537%" x2="29.857%" y2="62.324%" id="e">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
</defs>
<g fill-rule="nonzero" fill="none">
<path d="M229.018 355.203L9.313 225.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 83.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 354.998a29.178 29.178 0 01-28.953.205z" fill="#5B36A0" />
<path d="M229.018 349.203L9.313 219.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 77.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 348.998a29.178 29.178 0 01-28.953.205z" fill="#6862E6" />
<path d="M247.133 177.693L203.78 202.46s66.783 40.8 80.439 46.546l24.968-35.913" fill="url(#a)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M232.157 296.513l-43.365-24.715-43.364 24.767s22.585 13.8 44.171 26.473c13.708-9.71 27.428-19.521 42.558-26.525z" fill="url(#b)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M138.728 143.883l-27.505 15.712s2.331 14.404 15.988 20.15l36.01-23.087" fill="url(#c)" opacity=".46" style="mix-blend-mode: multiply" />
<ellipse fill="#68E1FD" cx="152.192" cy="147.898" rx="16.59" ry="11.697" />
<ellipse fill="#974C26" cx="152.179" cy="140.997" rx="12.426" ry="5.092" />
<path d="M151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012zM151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012z" fill="#999A1C" />
<path d="M264.35 168.022l-23.994 11.543a5.53 5.53 0 00-.384 9.76l56.867 33.22a5.518 5.518 0 007.43-1.782l13.823-21.523" fill="#A1482D" />
<path d="M394.854 112.344L203.524 1.962a8.626 8.626 0 00-8.626.01 8.644 8.644 0 00-4.312 7.48v114.833a7.184 7.184 0 003.587 6.22L398.146 248.39a4.62 4.62 0 004.632.003 4.631 4.631 0 002.312-4.018V130.018a20.398 20.398 0 00-10.236-17.674z" fill="#F47B56" />
<path d="M203.537 10.646l185.552 106.88a13.034 13.034 0 016.52 11.286v86.076a4.708 4.708 0 01-2.344 4.065 4.697 4.697 0 01-4.688.014L199.348 110.304a4.643 4.643 0 01-2.331-4.027V14.429c0-1.555.827-2.992 2.171-3.772a4.351 4.351 0 014.35-.011z" fill="#FFF" />
<ellipse fill="#AB643C" transform="rotate(-10.9 280.738 168.465)" cx="280.738" cy="168.465" rx="4.036" ry="4.617" />
<path fill="url(#d)" opacity=".32" d="M253.41 127.427l86.23 51.869 42.595-24.793-76.109-44.353" />
<path d="M359.97 117.102l-93.224-56.91a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884V95.53a3.4 3.4 0 001.627 2.924l93.212 55.704c.997.567 2.22.56 3.21-.02a3.22 3.22 0 001.594-2.79l.487-30.23a4.542 4.542 0 00-2.063-4.015z" fill="#E2AC00" />
<path d="M337.667 133.789c3.343 4.681 9.223 5.99 13.118 2.937 3.894-3.053 4.343-9.324 1-13.993-3.345-4.669-9.225-5.99-13.12-2.937-3.894 3.052-4.342 9.311-.998 13.993z" fill="#FFF" />
<path d="M328.52 111.318l-38.023-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91zM326.957 120.63l-52.41-31.591a1.45 1.45 0 00-1.396 2.488l52.345 31.603a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91v-.013z" fill="#F2F2F2" />
<path d="M341.369 123.387L248.196 66.49a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884v32.411a3.4 3.4 0 001.615 2.938l93.211 55.703c1.008.58 2.25.57 3.248-.025a3.22 3.22 0 001.569-2.848l.487-30.23a4.542 4.542 0 00-2.114-3.964z" fill="#F47B56" />
<path d="M319.065 140.074c3.344 4.681 9.224 5.99 13.119 2.937 3.894-3.053 4.342-9.325.999-13.993-3.344-4.67-9.224-5.99-13.118-2.938-3.895 3.053-4.343 9.312-1 13.994z" fill="#FFF" />
<path d="M309.918 117.602l-38.048-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91h.025zM308.343 126.978l-52.397-31.642a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91l-.012.051z" fill="#F2F2F2" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M295.673 143.896c3.343 4.681 9.224 5.99 13.118 2.937 3.895-3.053 4.343-9.325 1-13.993-3.344-4.669-9.225-5.99-13.119-2.937-3.894 3.052-4.304 9.311-1 13.993z" fill="#FFF" />
<path d="M286.526 121.425l-38.035-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.401 1.91l38.023 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91h.013zM284.95 130.75l-52.409-31.592a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91z" fill="#F2F2F2" />
<path d="M195.672 124.028a45.406 45.406 0 00-13.208 19.38c-4.638 12.827 6.956 33.784 6.956 33.784l18.038-14.3" fill="#FF8F6F" />
<path d="M193.724 293.602l-4.893-2.706 1.28-7.003s7.29.692 7.93 3.283" fill="#003B94" />
<path d="M195.518 293.5c1.102-.68 2.255-1.283 3.395-1.886 2.83-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.044-1.436-.563-.68-.832-11.467-.832-11.467l-10.915 2.95s-1.845 21.676-1.64 23.01c.205 1.334 3.959 2.566 3.959 2.566a9.666 9.666 0 003.151-1.283c1.14-.834.102-11.005 1.563-9.581 1.46 1.424 2.1 6.99 2.1 6.99.607.092 1.222.11 1.833.051z" fill="#F47B56" />
<path d="M214.568 304.08l-4.894-2.667 1.28-7.003s7.29.693 7.93 3.283" fill="#003B94" />
<path d="M216.412 303.978c1.102-.68 2.255-1.282 3.395-1.885 2.831-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.043-1.436-.564-.68-.833-11.467-.833-11.467l-10.915 2.95s-1.857 21.753-1.652 23.036c.205 1.282 3.958 2.565 3.958 2.565a9.666 9.666 0 003.152-1.283c1.14-.833.102-11.004 1.563-9.58 1.46 1.423 2.1 6.99 2.1 6.99a7.498 7.498 0 001.845.025z" fill="#F47B56" />
<path d="M179.005 233.614l-3.216 43.058s5.125 7.08 22.304 3.142l.166-29.026M198.849 242.144c-.372 3.706 0 44.596 0 44.596s4.752 8.901 25.442 0l-.295-34.746" fill="#3E2928" />
<path d="M177.403 247.838c1.41.975 1.896-4.04 3.37-3.18a83.77 83.77 0 0016.961 7.49h.128a1.165 1.165 0 011.576.577 89.585 89.585 0 0011.133 2.565c4.83.77 8.826-2.808 13.784-3.052 0-19.008.09-73.109-7.994-84.652l-23.918-8.055c-.115 1.975-11.606 15.314-11.325 31.578.32 18.328-2.062 35.618-2.472 41.351-.064.975-1.191 14.34-1.243 15.378z" fill="#3E2928" />
<path d="M218.564 145.73l-2.203 21.804s-17.845.719-25.532-4.591v-18.496" fill="#FF8F6F" />
<path d="M241.252 131.378l-1.819 2.488c.97-2.024 1.826-4.1 2.562-6.22.513-1.45-1.806-2.027-2.318-.578l-.27.744c.223-.77.432-1.543.628-2.322a1.195 1.195 0 10-2.319-.577 62.236 62.236 0 01-1.806 5.952 42.54 42.54 0 00.846-5.26c.154-1.525-2.242-1.461-2.383 0a37.916 37.916 0 01-1.076 5.965c0-.684-.064-1.368-.192-2.052a1.206 1.206 0 00-.5-.86 9.29 9.29 0 00-.23-.795 1.204 1.204 0 00-2.345.36l-.154 8.978c-.433.93-.999 1.795-1.678 2.565a41.64 41.64 0 013.331 2.565 34.337 34.337 0 012.716 2.565 65.716 65.716 0 002.216-2.924c.088-.075.166-.161.23-.257a255.44 255.44 0 016.611-9.337c.948-1.052-1.14-2.219-2.05-1z" fill="#FFB5A9" />
<path d="M207.24 125.85s8.43 2.27 11.85 7.695a96.553 96.553 0 015.65 11.66l6.225-9.685s7.559 2.322 10.556 6.042c0 0-8.967 19.623-16.782 21.304-7.814 1.68-16.116-11.518-16.116-11.518s-1.716 5.515-1.383-.372" fill="#FF8F6F" />
<path d="M212.595 146.82a17.097 17.097 0 01-5.342-7.618c-1.013-3.45.256-6.478 1.434-9.684a31.237 31.237 0 002.204-9.966c.102-3.36-.282-6.72-.513-10.069a.976.976 0 010-.436c-1.127-3.783-3.433-6.99-7.98-7.375-11.774-1-12.44 12.057-12.35 17.367.09 5.31.653 8.901-3.254 11.12-3.908 2.219-6.726 8.042-2.998 12.75 3.728 4.706.384 2.988-2.101 7.169-2.485 4.181-1.845 9.402 3.254 11.287 5.099 1.885 28.799-1.655 30.976-3.848a4.531 4.531 0 001.115-3.206 12.444 12.444 0 00-4.445-7.49z" fill="#007F68" />
<path d="M224.176 39.132a18.805 18.805 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.624 2.624 0 01-3.178.552 4.906 4.906 0 01-1.716-1.154 5.989 5.989 0 01-1.102-1.398l-.307-.603a2.13 2.13 0 01-.308.436 2.24 2.24 0 01-1.05.449 3.186 3.186 0 01-1.896-.231 7.113 7.113 0 01-3.357-3.014 9.692 9.692 0 01-1.486-4.861 4.775 4.775 0 011.192-3.848 2.739 2.739 0 013.113-.488c.513.205.986.5 1.396.873.35.297.659.637.922 1.013l.23.41v-1.141l2.563 1 .256 7.209c.018.516.178 1.017.462 1.449.24.417.609.745 1.05.936 1.238.488 1.81-.581 1.717-3.206a13.889 13.889 0 00-2.473-7.247 12.136 12.136 0 00-5.675-4.848 4.774 4.774 0 00-5.33.68 7.252 7.252 0 00-2.062 5.925 15.3 15.3 0 002.562 7.696 11.817 11.817 0 005.47 5.13c.812.34 1.684.51 2.563.5a3.417 3.417 0 001.665-.307l.513-.283 1.55 2.886-.257.18a6.133 6.133 0 01-.755.359c-.41.177-.84.298-1.282.36a6.398 6.398 0 01-1.703 0 8.575 8.575 0 01-2.165-.552 14.093 14.093 0 01-5.125-3.771 22.36 22.36 0 01-3.971-6.208 19.027 19.027 0 01-1.64-6.888c-.138-2 .27-3.999 1.179-5.784a6.51 6.51 0 013.638-3.207 7 7 0 015.047.257 16.288 16.288 0 017.508 6.438zm-5.65 9.12c.42-.538.61-1.221.525-1.899a4.904 4.904 0 00-.679-2.372 3.255 3.255 0 00-1.55-1.411 1.395 1.395 0 00-1.576.205 2.35 2.35 0 00-.563 1.86c.029.846.28 1.669.73 2.385.37.652.94 1.165 1.627 1.463a1.28 1.28 0 001.486-.231M375.433 178.013a18.74 18.74 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.637 2.637 0 01-3.177.552 5.047 5.047 0 01-1.717-1.154 6.207 6.207 0 01-1.102-1.399l-.307-.602c-.087.156-.19.302-.308.436-.304.24-.666.395-1.05.449a3.071 3.071 0 01-1.883-.218 7.113 7.113 0 01-3.357-3.027 9.653 9.653 0 01-1.499-4.874 4.724 4.724 0 011.192-3.848 2.726 2.726 0 013.1-.487c.514.204.987.499 1.396.872.35.302.66.647.923 1.026l.243.41v-1.141l2.562.987.257 7.209c.022.515.181 1.015.46 1.449.242.417.61.745 1.051.936 1.281.488 1.807-.577 1.73-3.206a13.953 13.953 0 00-2.473-7.26 12.161 12.161 0 00-5.662-4.835 4.787 4.787 0 00-5.33.667 7.252 7.252 0 00-2.01 5.964 15.25 15.25 0 002.561 7.695 11.868 11.868 0 005.535 4.964 6.668 6.668 0 002.562.513 3.545 3.545 0 001.665-.308l.513-.282 1.55 2.886-.256.18a6.133 6.133 0 01-.756.359c-.412.17-.842.29-1.281.359a6.526 6.526 0 01-1.717 0 8.55 8.55 0 01-2.152-.564 14.093 14.093 0 01-5.125-3.759 22.41 22.41 0 01-3.97-6.22 18.988 18.988 0 01-1.64-6.888 11.003 11.003 0 011.178-5.772 6.562 6.562 0 013.638-3.219 7.09 7.09 0 015.06.257 16.315 16.315 0 017.354 6.592zm-5.65 9.12a2.567 2.567 0 00.538-1.899 4.865 4.865 0 00-.691-2.372 3.204 3.204 0 00-1.538-1.411 1.395 1.395 0 00-1.575.192 2.323 2.323 0 00-.577 1.86c.03.842.281 1.66.73 2.373.369.655.94 1.172 1.627 1.475a1.28 1.28 0 001.486-.218" fill="#F47B56" />
<path d="M120.139 232.704L76.774 208l-43.351 24.754s24.122 15.083 45.709 27.756c13.707-9.697 25.89-20.791 41.007-27.807z" fill="url(#e)" opacity=".25" style="mix-blend-mode: multiply" />
</g>
</svg>
</div>
<div class="rightSide">
<h1>FAQ</h1>
<button onclick="toggleElement('btnFaq1')" class="btnFaq" id="btnFaq1">
How many team members can I invite?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide1" class="hiddenElement">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq2')" id="btnFaq2" class="btnFaq">
What is the maximum file upload size?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide2" class="hiddenElement">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq3')" id="btnFaq3" class="btnFaq">
How do I reset my password?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide3" class="hiddenElement">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq4')" id="btnFaq4" class="btnFaq">
Can I cancel my subscription?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide4" class="hiddenElement">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq5')" id="btnFaq5" class="btnFaq">
Do you provide additional support?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide5" class="hiddenElement">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
<div class="divider"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Refer the jsFiddle: https://jsfiddle.net/zqh3ra0u/2/
Read your code more attentively before asking, you wrote with instead of width in the #media rule.
Related
Adding animation on my svg, it changes its position
I'm trying to add animation on some groups inside my svg, but after i add the animation my svg changes position. When i try to change it with position absolute tho it doesnt change.
In this code, I add the aimation to the group with the light class. I removed the rest of the code of the svg file so its more simple to show here.
My code:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
padding-top: 40px;
}
.light {
-webkit-animation: action 1s infinite;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient
id="a"
x1=".771"
y1=".879"
x2=".349"
y2=".103"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient
id="b"
x1=".73"
y1=".875"
x2="-.036"
y2="-.615"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1=".496"
y1="-1.57"
x2=".509"
y2="4.41"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path
data-name="Rectangle 3243"
fill="none"
opacity=".25"
d="M0 0h767.74v782.925H0z"
/>
<rect
data-name="Rectangle 3237"
width="383.786"
height="416.279"
rx="26"
transform="translate(214.352 98.244)"
fill="url(#a)"
/>
<g
class="light"
data-name="Group 1182"
transform="rotate(36 263.423 810.556)"
>
<path
data-name="Path 6006"
d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z"
fill="#afb9c5"
/>
<path
data-name="Path 6007"
d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z"
fill="#e4e8ec"
/>
<circle
data-name="Ellipse 627"
cx="2.861"
cy="2.861"
transform="rotate(-30 137.783 -57.321)"
fill="#afb9c5"
r="2.861"
/>
<path
data-name="Rectangle 2622"
fill="#afb9c5"
d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z"
/>
<path
data-name="Path 6029"
d="m31.023 33.105 4.85-2.8-5.21-3.245Z"
fill="#afb9c5"
/>
<path
data-name="Path 6030"
d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z"
fill="#afb9c5"
/>
<path
data-name="Rectangle 2623"
fill="#afb9c5"
d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z"
/>
<path
data-name="Path 6031"
d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2624"
width="4.305"
height="4.305"
rx="2.152"
transform="rotate(150 11.67 25.183)"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2625"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2626"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2627"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2628"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2629"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2630"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
</g>
</svg>
</div>
</div>
Problem in you case is that the g.light element already has a transform property: transform="rotate(36 263.423 810.556)". So the action animation is overwriting the default one that place the bulb icon in the top left.
My recommendation would be to separate the square and bulb in 2 different svg
and align them together by using absolute positioning:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
position: relative;
padding-top: 40px;
}
.light {
position: absolute;
top: 7%;
right: 30%;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
#keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient id="a" x1=".771" y1=".879" x2=".349" y2=".103" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient id="b" x1=".73" y1=".875" x2="-.036" y2="-.615" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1=".496" y1="-1.57" x2=".509" y2="4.41" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path data-name="Rectangle 3243" fill="none" opacity=".25" d="M0 0h767.74v782.925H0z" />
<rect data-name="Rectangle 3237" width="383.786" height="416.279" rx="26" transform="translate(214.352 98.244)" fill="url(#a)" />
</svg>
<svg class="light" width="70" heigth="73">
<g data-name="Group 1182">
<path data-name="Path 6006" d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z" fill="#afb9c5" />
<path data-name="Path 6007" d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z" fill="#e4e8ec" />
<circle data-name="Ellipse 627" cx="2.861" cy="2.861" transform="rotate(-30 137.783 -57.321)" fill="#afb9c5" r="2.861" />
<path data-name="Rectangle 2622" fill="#afb9c5" d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z" />
<path data-name="Path 6029" d="m31.023 33.105 4.85-2.8-5.21-3.245Z" fill="#afb9c5" />
<path data-name="Path 6030" d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z" fill="#afb9c5" />
<path data-name="Rectangle 2623" fill="#afb9c5" d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z" />
<path data-name="Path 6031" d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z" fill="#afb9c5" />
<rect data-name="Rectangle 2624" width="4.305" height="4.305" rx="2.152" transform="rotate(150 11.67 25.183)" fill="#afb9c5" />
<rect data-name="Rectangle 2625" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2626" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2627" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
<rect data-name="Rectangle 2628" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2629" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2630" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
</g>
</svg>
</div>
</div>
SVG fill-rule being ignored
Let's say I have this SVG:
.star g path {
fill-rule: evenodd;
fill: red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094zM12 6.258l1.575 3.193.061.106a1 1 0 00.691.44l3.524.515-2.549 2.484-.082.09a1 1 0 00-.206.795l.601 3.506-3.15-1.656-.111-.05a1 1 0 00-.82.05l-3.15 1.656.602-3.506.013-.122a1 1 0 00-.301-.763l-2.55-2.484 3.525-.515a1 1 0 00.752-.546L12 6.258z" />
</g>
</svg>
How do I go about filling the inside of the shape (without changing the svg source)? I've tried this without success:
Your star has two outer and inner contours.
Therefore, only the space between the contours will be filled with color.
To avoid this you need as #enxaneta commented:
remove everithing from the secomd M command: use just the first part
of the d attribute d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44
1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z
<style>
.star g path {
fill:red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="red" d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
As a bonus Examples of animation of filling a star
feFlood flood-color="red" - Implements fill with color
The feOffset filter animates the color filling process by changing the dx dy attributes
#1. Vertical fill animation
.star g path {
fill:white;
stroke:red;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="red" />
<feOffset dy="-24">
<animate
id="anim"
attributeName="dy"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
#2.Color fill horizontal animation
.star g path {
fill:white;
stroke:gold;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
<feFlood flood-color="gold" />
<feOffset dx="-24">
<animate
id="anim"
attributeName="dx"
values="-24;0"
dur="5s"
begin="0s"
repeatCount="indefinite"
restart="whenNotActive"
fill="freeze"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
<g>
<path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
</g>
</svg>
SVG how to make container bigger than svg
Have this problem
The blue circle (#Mark) should have black round border. For some reason it is not. Although if it is not a svg sprite but two separate svg elements everything is ok.
SVG:
<?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">
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="0 0 5 5">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>
CSS code
&__bell-icon {
fill: #e0e0e0;
height: 19px;
width: 17px;
}
&__circle-icon {
position: absolute;
visibility: visible;
height: 5px;
width: 5px;
stroke:$icon-stroke-light;
}
HTML code:
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="../../../images/BellWithMark.svg#Bell"></svg>
<svg class="notifications__circle-icon"><use href="../../../images/BellWithMark.svg#Mark"></svg>
</span>
Your #Mark symbol is too small. You need to add some space for the stroke. Use <symbol id="Mark" viewBox="-1 -1 7 7"> instead of <symbol id="Mark" viewBox="0 0 5 5">. If needed change CSS accordingly.
I needed to see what happens so I've changed the size of your icons.
.notifications__bell-icon {
fill: #e0e0e0;
height: 190px;
width: 170px;
position: absolute;
}
.notifications__circle-icon {
position: absolute;
visibility: visible;
height: 50px;
width: 50px;
stroke:black;
}
<span class="notifications__icons">
<svg class="notifications__bell-icon"><use href="#Bell"></svg>
<svg class="notifications__circle-icon"><use href="#Mark"></svg>
</span>
<svg>
<defs>
<path id="r8qna" d="M1351 35.438c0 .983-.815 1.562-1.821 1.562h-4.857c0 .984-.816 1.781-1.822 1.781-1.006 0-1.821-.797-1.821-1.781h-4.857c-1.007 0-1.822-.579-1.822-1.562 0-.846.376-1.649 1.03-2.202 1.17-.99 2.006-3.618 2.006-6.705 0-2.337 1.536-4.318 3.673-5.044A1.806 1.806 0 0 1 1342.5 20c.903 0 1.647.644 1.791 1.487 2.137.726 3.673 2.707 3.673 5.044 0 3.088.837 5.716 2.007 6.705a2.882 2.882 0 0 1 1.03 2.202zm-1.568-.103c0-.34-.15-.663-.414-.886-1.688-1.428-2.737-4.296-2.737-8.024 0-2.039-1.696-3.697-3.78-3.697-2.086 0-3.782 1.658-3.782 3.697 0 3.728-1.049 6.596-2.737 8.023a1.162 1.162 0 0 0-.414.887z"/>
<path id="rfoga" d="M1074.5 101a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/>
</defs>
<symbol id="Bell" viewBox="0 0 17 19">
<g>
<g transform="translate(-1334 -20)">
<use fill="#a56ea3" xlink:href="#r8qna"/>
<use fill="#e0e0e0" xlink:href="#r8qna"/>
</g>
</g>
</symbol>
<symbol id="Mark" viewBox="-1 -1 7 7">
<g>
<g transform="translate(-1072 -101)">
<use fill="#30a1d6" xlink:href="#rfoga"/>
</g>
</g>
</symbol>
</svg>
style specific path of SVG all browsers
IS it possible to style a specific path of an SVG in all browsers? I have tried this:
HTML
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-facebook" viewBox="0 0 1024 1024">
<title>facebook</title>
<path class="path1" d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512c281.6 0 512 230.4 512 512s-230.4 512-512 512zM512 66.56c-245.76 0-445.44 199.68-445.44 445.44s199.68 445.44 445.44 445.44 445.44-199.68 445.44-445.44-199.68-445.44-445.44-445.44z"></path>
<path class="path2" d="M391.68 770.56c0 2.56 5.12 5.12 7.68 2.56s43.52-51.2 56.32-99.84c2.56-12.8 23.040-81.92 23.040-81.92 10.24 20.48 43.52 38.4 76.8 38.4 99.84 0 166.4-89.6 166.4-207.36 0-89.6-76.8-174.080-197.12-174.080-148.48 0-222.72 102.4-222.72 189.44 0 51.2 20.48 97.28 64 115.2 7.68 2.56 12.8 0 15.36-7.68 2.56-5.12 5.12-17.92 5.12-23.040 2.56-7.68 2.56-10.24-5.12-17.92-12.8-15.36-20.48-33.28-20.48-58.88 0-76.8 58.88-145.92 153.6-145.92 84.48 0 128 48.64 128 115.2 0 87.040-38.4 161.28-97.28 161.28-33.28 0-56.32-25.6-48.64-58.88 10.24-38.4 28.16-79.36 28.16-107.52 0-25.6-12.8-46.080-40.96-46.080-33.28 0-58.88 33.28-58.88 79.36 0 28.16 10.24 48.64 10.24 48.64s-33.28 140.8-40.96 163.84c-12.8 51.2-2.56 110.080-2.56 115.2z"></path>
<path class="path3" d="M990.72 512c0 264.39-214.33 478.72-478.72 478.72s-478.72-214.33-478.72-478.72c0-264.39 214.33-478.72 478.72-478.72s478.72 214.33 478.72 478.72z"></path>
<path class="path4" d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512zM512 66.56c-245.76 0-445.44 199.68-445.44 445.44s199.68 445.44 445.44 445.44 445.44-199.68 445.44-445.44c0-245.76-199.68-445.44-445.44-445.44z"></path>
<path class="path5" d="M442.88 770.56h102.4c0 0 0-143.36 0-258.56h76.8l10.24-102.4h-81.92v-40.96c0-20.48 12.8-25.6 23.040-25.6s58.88 0 58.88 0v-87.040h-79.36c-87.040 0-107.52 66.56-107.52 107.52v46.080h-51.2v102.4h51.2c-2.56 117.76-2.56 258.56-2.56 258.56z"></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
CSS
#icon-facebook .path1, #icon-facebook .path2, #icon-facebook .path3, #icon-facebook .path4 {
fill: rgb(255, 255, 255);
}
#icon-facebook .path5, #icon-facebook .path1, #icon-facebook .path4 {
fill: rgb(109, 103, 101);
}
IT works in Firefox but not in safari, chrome internet explorer, is it not possible?
Adding bevel and emboss to an SVG element?
So I was wondering if it was possible to add bevel and emboss to an SVG element?
My CSS for my rectangle element is like this:
rect {
fill: #e8e9eb;
stroke: black;
stroke-width: 1px;
width: 70;
height: 30;
}
and I was trying to add this CSS to it taken from here:
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
I believe the reason it isn't working is because it uses fill as opposed to a background but I'm not sure. Is there a way to do this while using the fill CSS style? If not, what would be the best way?
You want to use SVG Filter effects to bevel arbitrary SVG Content. Here's an example with two versions of a bevel: http://jsfiddle.net/rcd5L/ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100"> <filter id="Bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/> <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" /> </filter> <filter id="Bevel2" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%"> <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white"> <fePointLight x="-5000" y="-10000" z="0000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/> <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" /> </filter> <rect width="100" height="40" filter="url(#Bevel)" /> <rect y="50" width="100" height="40" filter="url(#Bevel2)" /> </svg>
Also try using this if you want this kind of beveling <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100"> <filter id="filter1" > <feFlood flood-color="black" result="COLOR-red" /> <feMorphology operator="dilate" radius="0" in="SourceAlpha" result="STROKE_10" /> <feConvolveMatrix order="8,8" divisor="1" kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="STROKE_10" result="BEVEL_20" /> <feOffset dx="1" dy="1" in="BEVEL_0" result="BEVEL_25"/> <feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30"/> <feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" /> <feMerge result="BEVEL_50"> <feMergeNode in="BEVEL_40" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <rect width="100" height="40" filter="url(#filter1)" /> <path x="50" y="50" fill="#3182bd" d="M9.184850993605149e-15,-150A150,150 0 0,1 140.95389311788625,-51.30302149885031L0,0Z" filter="url(#filter1)"></path> </svg>