I have a problem with my SVG image. I would like to create an animation. When I use stroke-dasharray in CSS my image doesn't change. Here is my code. I would like to get some help.
<svg
id="logo"
width="39" height="43" viewBox="0 0 39 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M26.8047 26.0938H12.5078L9.29688 35H4.65625L17.6875 0.875H21.625L34.6797 35H30.0625L26.8047 26.0938ZM13.8672 22.3906H25.4688L19.6562 6.42969L13.8672 22.3906Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="0.65625" y="0.875" width="38.0234" height="42.125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Here is my CSS code:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
height: 100vh;
}
#logo{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#logo path:nth-child(1){
stroke-dasharray: 200px;
stroke-dasharray: 50px;
}
I'n not very sure if this is what you are asking. This is what I was commenting:
Outside the filtered group I'm adding a use element: <use xlink:href="#a" id="theUse" />
. In the css I'm using the styles you are giving to the #logo path:nth-child(1)
body { font-family: 'Nunito', sans-serif; width: 100%; height: 100vh; } #logo{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); } #theUse{ stroke:silver; /*stroke-dasharray: 200px;*/ stroke-dasharray: 50px; }
<svg id="logo" width="200" viewBox="0 0 39 43" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d)"> <path id="a" d="M26.8047 26.0938H12.5078L9.29688 35H4.65625L17.6875 0.875H21.625L34.6797 35H30.0625L26.8047 26.0938ZM13.8672 22.3906H25.4688L19.6562 6.42969L13.8672 22.3906Z" fill="white" /> </g> <use xlink:href="#a" id="theUse" /> <defs> <filter id="filter0_d" x="0.65625" y="0.875" width="38.0234" height="42.125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix" /> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" /> <feOffset dy="4" /> <feGaussianBlur stdDeviation="2" /> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" /> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" /> </filter> </defs> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.