Related
I'm getting few warnings in my react project and I really don't know what can cause it.
Warnings in console looks like this
I'm creating a Weather App and I'm using multiple SVG images as an icons for weather, but only these 3 are throwing me warnings.
Here are all JSX files which I'm importing like this :
import Cloud from '../TodayForecast/Icons/Cloud';
import Rain from '../TodayForecast/Icons/Rain';
import Fog from '../TodayForecast/Icons/Fog';
import Snow from '../TodayForecast/Icons/Snow';
import Thunderstorm from '../TodayForecast/Icons/Thunderstorm';
import Clear from '../TodayForecast/Icons/Clear';
import Moon from '../TodayForecast/Icons/Moon';
And then using to display correct icon depending on current weather like this:
Function
function switchIcons(){
if(props.description === 'Thunderstorm'){
return <Thunderstorm />
}
if(props.description === 'Drizzle'){
return <Rain />
}
//and so on...
}
In render
{switchIcons()}
Here are all 3 files which are throwing warnings.. I'm not passing any prop to them as you can see. I've tried to google it but I can't find anything useful.
Rain.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Rain() {
return (
<div>
<svg version="1.1" id="rain" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" className="icon">
<g>
<g>
<path d="M433.886,118.357c0.87-5.385,1.314-10.726,1.314-15.957C435.2,45.935,389.265,0,332.8,0
c-44.134,0-82.372,22.349-98.347,56.508C221.542,51.2,209.656,51.2,196.267,51.2c-53.7,0-97.877,41.549-102.076,94.191
C41.557,149.589,0,193.766,0,247.467c0,56.465,45.935,102.4,102.4,102.4h290.133C458.411,349.867,512,296.277,512,230.4
C512,180.506,480.247,135.509,433.886,118.357z"/>
</g>
</g>
<g>
<g>
<path d="M123.281,359.288c-4.207-2.091-9.344-0.41-11.452,3.814L98.475,389.82c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C129.203,366.524,127.497,361.395,123.281,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M96.077,413.713c-4.216-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C101.999,420.949,100.292,415.821,96.077,413.713z"/>
</g>
</g>
<g>
</g>
<g>
<g>
<path d="M174.481,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C180.403,366.524,178.697,361.395,174.481,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M147.277,413.713c-4.215-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C153.199,420.949,151.492,415.821,147.277,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M225.681,359.288c-4.215-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C231.603,366.524,229.897,361.395,225.681,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M198.477,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C204.399,420.949,202.692,415.821,198.477,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M276.881,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C282.803,366.524,281.097,361.395,276.881,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M249.677,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C255.599,420.949,253.892,415.821,249.677,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M328.081,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C334.003,366.524,332.297,361.395,328.081,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M300.877,413.713c-4.215-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C306.799,420.949,305.092,415.821,300.877,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M379.281,359.288c-4.215-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C385.203,366.524,383.497,361.395,379.281,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M352.077,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C357.999,420.949,356.292,415.821,352.077,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M430.481,359.296c-4.216-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C436.403,366.532,434.697,361.412,430.481,359.296z"/>
</g>
</g>
<g>
<g>
<path d="M403.277,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C409.199,420.949,407.492,415.821,403.277,413.713z"/>
</g>
</g>
</svg>
</div >
)
}
export default Rain;
Fog.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Fog(){
return(
<div>
<svg id="Layer_1" className="icon" viewBox="0 0 512.009 512.009" id="mist" xmlns="http://www.w3.org/2000/svg"><path d="m.755 309.061c-2.997-10.631 3.192-21.679 13.823-24.676 55.854-15.747 104.199-21.154 152.146-17.017 11.004.949 19.155 10.64 18.206 21.645s-10.623 19.159-21.646 18.207c-43.573-3.759-86.091 1.072-137.854 15.664-1.814.512-3.641.755-5.438.755-8.728.001-16.75-5.761-19.237-14.578zm313.276 110.941c10 0 18.641-7.489 19.838-17.665 1.29-10.97-6.556-20.91-17.526-22.2-25.948-3.053-49.175-7.971-71.637-12.727-33.166-7.022-64.492-13.655-102.303-14.407-38.536-.763-80.357 5.365-127.824 18.747-10.631 2.997-16.82 14.045-13.823 24.676 2.998 10.632 14.047 16.821 24.677 13.823 44.227-12.468 81.14-17.945 116.176-17.253 34.024.677 63.552 6.928 94.813 13.547 23.341 4.942 63.583 13.459 77.609 13.459zm-288.599-275.862c97.391-27.456 150.799-16.599 212.642-4.027 22.856 4.646 64.932 12.779 75.957 12.779 10 0 18.641-7.489 19.838-17.665 1.29-10.97-6.556-20.91-17.526-22.2-25.445-2.994-48.248-7.63-70.3-12.113-64.153-13.042-124.748-25.36-231.464 4.726-10.631 2.997-16.82 14.045-13.823 24.676 2.997 10.633 14.046 16.825 24.676 13.824zm-5.437-86.501c1.797 0 3.623-.244 5.438-.755 51.763-14.592 94.28-19.423 137.854-15.664 11.022.958 20.696-7.202 21.646-18.207s-7.202-20.696-18.206-21.645c-47.947-4.139-96.292 1.27-152.146 17.017-10.633 2.997-16.823 14.045-13.826 24.676 2.487 8.817 10.509 14.579 19.24 14.578zm233.046-.89c34.515 6.979 71.693 13.266 118.685 13.266 34.938 0 75.308-3.478 124.013-12.732 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.977-23.382-15.915-107.098 20.349-171.015 10.939-227.303-.443-10.819-2.193-21.378 4.813-23.567 15.639-2.19 10.826 4.812 21.378 15.639 23.567zm235.231 135.603c-46.365 8.81-86.002 12.95-121.097 12.649-48.4-.411-85.546-8.274-121.47-15.878-19.884-4.208-38.664-8.184-59.015-10.941-10.947-1.483-21.021 6.188-22.505 17.133-1.482 10.946 6.188 21.021 17.134 22.504 18.885 2.559 36.963 6.385 56.103 10.437 37.855 8.013 79.168 16.299 131.583 16.744 36.771 0 79.438-4.365 126.733-13.352 10.852-2.062 17.977-12.53 15.915-23.382-2.062-10.851-12.535-17.979-23.381-15.914zm0 91.634c-107.098 20.35-171.015 10.938-227.303-.443-10.819-2.19-21.378 4.813-23.567 15.639s4.813 21.378 15.64 23.567c34.515 6.979 71.693 13.266 118.685 13.266 34.938 0 75.308-3.478 124.013-12.732 10.852-2.062 17.977-12.53 15.915-23.382-2.064-10.852-12.537-17.981-23.383-15.915zm0 176c-117.687 22.362-181.486 9.105-243.187-3.714-19.679-4.089-38.267-7.951-58.395-10.678-10.947-1.481-21.021 6.188-22.505 17.133-1.482 10.946 6.188 21.021 17.134 22.504 18.736 2.539 36.656 6.262 55.629 10.204 38.251 7.947 79.619 16.543 134.757 16.543 34.921 0 75.369-3.449 124.033-12.696 10.852-2.062 17.977-12.53 15.915-23.382-2.062-10.851-12.535-17.978-23.381-15.914zm0-89c-35.998 6.84-65.849 10.778-91.258 12.039-11.032.547-19.531 9.935-18.984 20.967.531 10.695 9.368 19.009 19.959 19.009.334 0 .671-.008 1.008-.025 27.27-1.354 58.914-5.505 96.742-12.693 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.978-23.382-15.915zm-90.267-213.986c25.238-1.252 55.162-5.372 97.733-13.461 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.978-23.382-15.915-40.665 7.727-67.957 11.517-91.258 12.673-11.032.547-19.531 9.935-18.984 20.967.532 10.695 9.386 19.118 19.976 19.118zm-315.789 288.825c-21.501 3.027-43.625 7.79-67.638 14.56-10.631 2.997-16.82 14.045-13.823 24.676 2.486 8.817 10.509 14.578 19.239 14.578 1.797 0 3.623-.244 5.438-.755 22.263-6.276 42.661-10.675 62.362-13.449 10.938-1.54 18.556-11.655 17.016-22.593-1.54-10.939-11.667-18.554-22.594-17.017zm0-266.63c-20.292 2.857-42.531 6.477-67.638 13.555-10.631 2.997-16.82 14.045-13.823 24.676 2.486 8.817 10.509 14.579 19.239 14.579 1.797 0 3.623-.244 5.438-.756 22.82-6.433 43.459-9.783 62.362-12.445 10.938-1.54 18.556-11.655 17.016-22.593-1.54-10.939-11.667-18.557-22.594-17.016z"/></svg>
</div>
)
}
export default Fog;
Snow.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Snow(){
return(
<div>
<svg version="1.1" id="snow" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.661 52.661" className="icon">
<g>
<path d="M41.527,29.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
l-2.83-1.634c-0.478-0.276-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634l-2.83,1.634
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C41.639,30.905,41.803,30.293,41.527,29.815z"/>
<path d="M20.527,29.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
l-2.83-1.634c-0.478-0.276-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634l-2.83,1.634
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C20.639,30.905,20.803,30.293,20.527,29.815z"/>
<path d="M41.527,3.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634V1.815c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L32.5,3.449
c-0.478-0.277-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L31.5,8.449c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1V8.547
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C41.639,4.905,41.803,4.293,41.527,3.815z"/>
<path d="M20.527,3.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634V1.815c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L11.5,3.449
c-0.478-0.277-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L10.5,8.449c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1V8.547
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C20.639,4.905,20.803,4.293,20.527,3.815z"/>
<path d="M31.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
L22.5,42.48c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L21.5,47.48
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C31.639,43.936,31.803,43.325,31.527,42.846z"/>
<path d="M10.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L1.5,42.48
c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L0.5,47.48c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C10.639,43.936,10.803,43.325,10.527,42.846z"/>
<path d="M52.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
L43.5,42.48c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L42.5,47.48
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C52.639,43.936,52.803,43.325,52.527,42.846z"/>
<path d="M21.134,22.846c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1
s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366
c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L22.5,16.48
c-0.478-0.277-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L21.5,21.48
C21.022,21.756,20.858,22.368,21.134,22.846z"/>
<path d="M0.134,22.846c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1
s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366
c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L1.5,16.48
c-0.478-0.277-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L0.5,21.48
C0.022,21.756-0.142,22.368,0.134,22.846z"/>
<path d="M52.161,21.48l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366c-0.277-0.479-0.89-0.643-1.366-0.366
l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L43.5,16.48c-0.478-0.277-1.09-0.113-1.366,0.366
c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L42.5,21.48c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5C52.803,22.368,52.639,21.756,52.161,21.48z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
)
}
export default Snow;
Your svg tags have duplicate props.
In Rain it's xlmns
In Fog it's id
In Snow it's xlmns
If you remove the duplicate props from them, it will stop showing the warnings
This question and this question are similar, but the answers do not yield a clean, consistent method for finding the top most SVG element among different HTML strings.
The goal is to extract the top-most SVG element from a HTML string.
$(htmlString).find("svg") does not work.
$($.parseHTML(htmlString)) only generates an array of jQuery objects, but the goal is to turn the htmlString into one jQuery object where you can execute find and retrieve the top-most SVG element.
Example HTML string:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424" style="enable-background:new 0 0 424 424;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
<path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
<path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Result of $($.parseHTML(htmlString)), where htmlString is the string above:
$($.parseHTML(htmlString))
w.fn.init(6) [comment, text, comment, text, svg#Capa_1, text]
0: comment
1: text
2: comment
3: text
4: svg#Capa_1
5: text
length: 6
You cannot use find on the result because the markup you give to jQuery doesn't represent a tree: Doctype and comments nodes are siblings of your <svg>.
Thus, you need filter the jQuery entries in order to keep only the svg node:
const $svg = $(`<?xml version="1.0" encoding="utf-8"?>
<!-- comment1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424">
<g>
<g>
<path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
<path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
<path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
</g>
</g>
</svg>`)
.filter((i, el) => $(el).is('svg'));
console.log($svg.attr('id'));
$svg.find('path').attr('fill', 'red');
$('body').append($svg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Now, you may also want to use a native DOMParser, which might be better at handling namespaces than jQuery. From there, you will have an XMLDocument, whose documentElement will be your <svg> node.
You will then be able to work on it from jQuery:
const str = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 424 424">
<g>
<g>
<path d="M35,89C15,89,0,74,0,54s15-36,35-36h353c20,0,36,16,36,36s-16,35-36,35H35z" fill="#7c7a7d"/>
<path d="M388,176c20,0,36,16,36,36s-16,35-36,35H35c-20,0-35-15-35-35s15-36,35-36H388z" fill="#7c7a7d"/>
<path d="M388,335c20,0,36,15,36,35s-16,36-36,36H35c-20,0-35-16-35-36s15-35,35-35H388z" fill="#7c7a7d"/>
</g>
</g>
</svg>`;
const doc = (new DOMParser).parseFromString(str, 'image/svg+xml');
// use the second argument (context) of jQuery()
const $svg = $('svg', doc);
console.log($svg.attr('id'));
$svg.find('path').attr('fill', 'red');
$('body').append($svg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a question regarding SVG Glow effect. I would like to set glow to group "suteki_201_" similar to the RED effect in this link: https://codepen.io/FelixRilling/pen/qzfoc (I would like his eyes to neon glow - blink animation in different color) i tried using different styles but no success... could you please help?
My code for SVG image is:
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_">
<g id="suteki_276_" class="dane8">
<path id="suteki_65_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
Thank you for your time!!!
Here is my solution, Its not perfect, but you can play with the colors,opacity and timings.
To get the blur efects, I added Gaussian blur to svg
More info on Gauusian Blur effect here here
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
Then, to apply the blur to any path / g add filter="url(#f1)".
Notice the id: ( f1 )
I had to apply the filter to suteki_65_ to make the outer circle glow and also had to duplicate the circle in order to retain the shape of the eye, as the filter effect blurs the shape.
And finally I applied CSS animation, to suteki_65_ in order to make it blink
by changing the opacity.
#keyframes blink {
0% {
opacity: 1;
fill:red;
}
25% {
opacity: 0.5;
fill:pink;
}
50% {
opacity: 1;
fill:orange;
}
75% {
opacity: 0.5;
fill:blue;
}
100% {
opacity:1;
fill:yellow;
}
}
#suteki_65_ {
animation: blink 1500ms infinite;
}
#suteki_65a_ {
opacity: 0.3;
}
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_" >
<g id="suteki_276_" class="dane8">
<path id="suteki_65a_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
<path id="suteki_65_" filter="url(#f1)" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
I need to animate the logo like so:
Here is its SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<g id="cap_arch_connector_vert">
<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
</g>
<g id="cap_bottom_arch">
<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
</g>
<g id="arched_line_right">
<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
C669.7,583.3,654.5,578.4,641.9,570z"/>
</g>
<g id="right_leg_line_1">
<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
</g>
<g id="arch_under_circle">
<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
C120,589.1,158.7,615.3,203.3,615.3z"/>
</g>
<g id="circle">
<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
</g>
<g id="line_to_circle">
<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
</g>
<g id="leg_connector">
<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
/>
</g>
<g id="arch_connector">
<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
l22.4-22.9L277.8,600.3z"/>
</g>
<g id="cap_mid-bottom_parallel_line">
<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 "/>
</g>
<g id="arch_connector_very_right">
<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
</g>
<g id="arch_connector_right">
<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
L674.7,582.5z"/>
</g>
<g id="right_leg_connector">
<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
"/>
</g>
<g id="cap_arch_connector_hor">
<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
/>
</g>
<g id="cap_top_arch">
<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
h16v-25.2v-6.8H333.7z"/>
</g>
<g id="left_leg_line_1">
<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
C300.1,561,305.7,550.3,309.6,538.8z"/>
</g>
<g id="left_leg_line_2">
<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
</g>
<g id="right_leg_line_2">
<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
"/>
</g>
<g id="cap_top_parallel_line">
<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 "/>
</g>
<g id="cap_bottom_parallel_line">
<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 "/>
</g>
<g id="right_cap_corner">
<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7
715.9,263 "/>
</g>
</svg>
I spend a lot of time looking for a solution but mostly I stumbled upon stroke SVG animations. Vivus.js looked like a good solution but it doesn't animate filled path, it works only with stroke. So does pretty much all examples I have found, like DrawSVG etc.
I broke down my SVG into simple elements so it would be easier to animate them. I suppose I have to use some SVG masks as I can't change the existing shape of the logo by applying stroke etc. The only animation that looks similar to mine is on Codepen. SVG code is pretty complicated there and I'm not sure whether the way it was animated there will solve my problem.
How can I animate the logo?
As the comments have suggested it would be advisable to convert the graphic from shapes to to strokes and then use an animation library such as Anime JS or Greensock to perform the animation.
Conversion to strokes
For the conversion to strokes I used Illustrator, and then exported to SVG before optimizing the graphic with Jake Archibald's SVGOMG.
Animation example
I chose the Anime JS library for the animation - see the snippet below.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: [0.550, 0.055, 0.100, 1.000],
duration: 1500,
delay: 1200,
direction:'forwards'
});
svg {
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>
Any further questions related to the graphic itself would be better on graphic design StackExchange.
I have an "roulette roll" svg file, but it does nothing. If I tried it on localhost everything was working perfectly! On hosting, it's just like "picture" doing nothing. Question is, how could I fix it?
.svg file code: http://pastebin.com/dsyD3vft
Container:
<div class="wheel_container col s6" style="padding: none;">
<object type="image/svg+xml" data="wheel.svg" class="wheel" id="wheel">Your browser does not support SVG</object>
</div>
CSS:
.wheel {
width:100%;
z-index: 0;
display:block;
}
Javascript:
$("object").load(function() {
wheelSVG = $("object").contents().find("svg");
spinner = spinner.add(wheelSVG.find("#spin"));
center = wheelSVG.find("#ui ellipse");
centerText = wheelSVG.find("#number");
clearInterval(beforeLoginSpinInterval);
if(!loggedinn) {
beforeLoginSpinInterval = setInterval(function() {
currentRotation += 0.25;
spinner.css("transform", 'rotate('+currentRotation+'deg)');
}, 20);
}
});
Spin
<g xmlns="http://www.w3.org/2000/svg" id="spin">
<g>
<g>
<path class="st1" d="M432.3,38.5c-34.2,7.3-68.1,18.3-101.3,33.1s-64,32.7-92.3,53.1l72.2,99.4l-0.4,0.3 c21.6-15.7,45.1-29.3,70.5-40.6c25.3-11.3,51.2-19.6,77.3-25.2l-0.5,0.1L432.3,38.5z"/>
</g>
<text transform="matrix(0.9136 -0.4067 0.4067 0.9135 322.6442 175.6196)" class="st0 st2 st3">14</text>
</g>
<g>
<g>
<path class="st4" d="M237.9,125.3c-28.2,20.6-54.8,44.4-79.1,71.4s-45.2,55.9-62.7,86.1l106.4,61.4l-0.2,0.4 c13.4-23.1,29.3-45.1,47.9-65.8s38.8-38.8,60.4-54.5l-0.4,0.3L237.9,125.3z"/>
</g>
<text transform="matrix(0.6691 -0.7431 0.7431 0.6691 210.1937 276.5912)" class="st0 st2 st5">7</text>
</g>
<g>
<g>
<path class="st1" d="M95.6,283.6c-17.4,30.3-32,62.8-43.2,97.4s-18.6,69.4-22.3,104.2l122.2,12.8l-0.1,0.5 c2.8-26.5,8.4-53.2,17-79.5c8.6-26.4,19.7-51.2,33-74.3l-0.2,0.4L95.6,283.6z"/>
</g>
<text transform="matrix(0.309 -0.951 0.9511 0.309 124.1028 456.9215)" class="st0 st2 st6">13</text>
</g>
<g>
<g>
<path class="st4" d="M30,486.2c-3.6,34.8-3.6,70.4,0.2,106.5s11.3,71,22,104.2L169,659l0.2,0.5c-8.2-25.4-13.9-52-16.8-79.6 s-2.8-54.8-0.1-81.3l-0.1,0.5L30,486.2z"/>
</g>
<text transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 123.8907 608.0349)" class="st0 st2 st7">6</text>
</g>
<g>
<g>
<path class="st1" d="M52.4,697.9c10.9,33.2,25.3,65.8,43.5,97.3c18.2,31.5,39.2,60.3,62.5,86.3l91.3-82.2l0.3,0.4 c-17.8-19.8-33.9-41.8-47.7-65.9s-24.9-48.9-33.2-74.3l0.2,0.5L52.4,697.9z"/>
</g>
<text transform="matrix(-0.5 -0.866 0.866 -0.5 200.3061 792.6865)" class="st0 st2 st8">12</text>
</g>
<g>
<g>
<path class="st4" d="M159.1,882.2c23.4,25.9,49.9,49.8,79.3,71.2c29.4,21.4,60.3,39.1,92.2,53.4l50-112.3l0.4,0.2 c-24.4-10.9-48-24.4-70.4-40.7c-22.4-16.3-42.6-34.6-60.5-54.4l0.3,0.4L159.1,882.2z"/>
</g>
<text transform="matrix(-0.809 -0.5878 0.5878 -0.809 312.469 893.9415)" class="st0 st2 st9">5</text>
</g>
<g>
<g>
<path class="st1" d="M331.5,1007.2c31.9,14.1,65.8,25.2,101.4,32.8s71,11.2,105.9,11.3V928.4h0.5c-26.7,0-53.8-2.8-80.9-8.6 c-27.1-5.8-53-14.2-77.4-25.1l0.4,0.2L331.5,1007.2z"/>
</g>
<text transform="matrix(-0.9782 -0.2079 0.2079 -0.9781 500.8162 960.7355)" class="st0 st2 st10">11</text>
</g>
<g>
<g>
<path class="st4" d="M539.8,1051.3c34.9-0.1,70.4-3.7,105.9-11.3s69.4-18.6,101.4-32.8l-50-112.3l0.4-0.2 c-24.4,10.8-50.3,19.3-77.4,25.1c-27.1,5.8-54.2,8.6-80.9,8.6h0.5V1051.3z"/>
</g>
<text transform="matrix(-0.9782 0.2079 -0.2079 -0.9781 651.1284 945.1309)" class="st0 st2 st10">4</text>
</g>
<g>
<g>
<path class="st1" d="M748,1006.8c31.9-14.3,62.8-32,92.2-53.4c29.4-21.4,55.8-45.3,79.3-71.2L828.2,800l0.3-0.4 c-17.9,19.8-38.1,38.1-60.5,54.4c-22.4,16.3-46,29.9-70.4,40.7l0.4-0.2L748,1006.8z"/>
</g>
<text transform="matrix(-0.809 0.5878 -0.5878 -0.809 826.7827 849.8548)" class="st0 st2 st9">10</text>
</g>
<g>
<g>
<path class="st4" d="M920.2,881.5c23.3-26,44.3-54.8,62.5-86.3c18.2-31.5,32.6-64.1,43.5-97.3l-116.9-38l0.2-0.5 c-8.3,25.4-19.3,50.3-33.2,74.3s-29.9,46-47.7,65.9l0.3-0.4L920.2,881.5z"/>
</g>
<text transform="matrix(-0.5 0.866 -0.866 -0.5 915.7706 727.7227)" class="st0 st2 st8">3</text>
</g>
<g>
<g>
<path class="st1" d="M1026.4,697c10.7-33.3,18.2-68.1,22-104.2c3.8-36.1,3.7-71.8,0.2-106.5L926.4,499l-0.1-0.5 c2.8,26.5,2.8,53.8-0.1,81.3s-8.6,54.2-16.8,79.6l0.2-0.5L1026.4,697z"/>
</g>
<text transform="matrix(-0.1045 0.9945 -0.9945 -0.1045 959.8926 558.2834)" class="st0 st2 st7">9</text>
</g>
<g>
<g>
<path class="st4" d="M1048.5,485.2c-3.7-34.7-11.1-69.6-22.3-104.2c-11.2-34.6-25.8-67.1-43.2-97.4l-106.4,61.4l-0.2-0.4 c13.3,23.1,24.4,48,33,74.3c8.6,26.4,14.2,53,17,79.5l-0.1-0.5L1048.5,485.2z"/>
</g>
<text transform="matrix(0.309 0.951 -0.9511 0.309 931.2808 385.5747)" class="st0 st2 st6">2</text>
</g>
<g>
<path class="st1" d="M982.5,282.8c-17.5-30.2-38.4-59.1-62.7-86.1s-50.8-50.8-79.1-71.4l-72.2,99.4l-0.4-0.3 c21.6,15.7,41.8,33.9,60.4,54.5s34.5,42.7,47.9,65.8l-0.2-0.4L982.5,282.8z"/>
<text transform="matrix(0.6691 0.7431 -0.7431 0.6691 834.8956 239.4054)" class="st0 st2 st5">8</text>
</g>
<g>
<g>
<path class="st4" d="M839.9,124.7c-28.3-20.5-59.2-38.4-92.3-53.1s-67.1-25.7-101.3-33.1l-25.5,120.2l-0.5-0.1 c26.1,5.6,52,13.9,77.3,25.2s48.9,24.9,70.5,40.6l-0.4-0.3L839.9,124.7z"/>
</g>
<text transform="matrix(0.9136 0.4067 -0.4067 0.9135 687.3855 145.1121)" class="st0 st2 st3">1</text>
</g>
<g>
<path class="st11" d="M645.3,38.3c-34.2-7.2-69.6-11-106-11c-36.3,0-71.8,3.8-106,11l25.5,120.2l-0.5,0.1 c26.1-5.5,53.2-8.4,80.9-8.4c27.7,0,54.8,2.9,80.9,8.4l-0.5-0.1L645.3,38.3z"/>
<text transform="matrix(1 0 0 1 514.27 118.9369)" class="st0 st2 st12">0</text>
</g>
If your code was working correctly on localhost and now it does not work on server, I would recommend you checking with your web host if they support SVG files and that the mime type is added.
additionally you could embed the entire svg code in your html thereby saving another call to your server and eliminating the doubt whether webserver supports svg or not.
Also you should save the file as compressed SVG instead of standard illustrator svg