I have a kind of like Frankenstein svg with a scar on his face. What I would like to have is that his scar renders delayed. Kind of like drawing animations.
For the sake of completeness, it looks like:
The path of the scar in his face is:
<path id="scar" d="..."/>
As you can see I gave the path an id. In my CSS class I tried to assign the animation to the id:
#scar {
animation-name: draw;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
But that did not work out...Someone any ideas?
Edit
full svg:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path style="fill:#E6E6E6;" d="M303.852,190.448c6.972,0,12.645-5.672,12.645-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C291.21,184.776,296.882,190.448,303.852,190.448z"/>
<path style="fill:#81AF31;" d="M138.086,170.102c-1.694,0.196-2.784,0.609-3.24,1.228c-2.083,2.834,2.176,25.193,2.176,25.193
c4.459,23.446,11.74,34.058,15.485,34.105c5.253,0.063,7.752-0.294,9.335-1.004c-5.151-15.979-8.764-33.807-10.78-53.428
C148.651,172.703,143.261,169.499,138.086,170.102z"/>
<path style="fill:#333333;" d="M157.9,147.714c2.222-3.334,4.743-7.113,4.743-9.26V43.563c0-3.238,2.624-5.863,5.863-5.863H343.49
c3.239,0,5.863,2.625,5.863,5.863v94.891c0,2.148,2.52,5.926,4.743,9.26c2.709,4.06,5.662,8.504,6.969,13.459
c1.834-0.922,3.77-1.629,5.747-2.117V34.668c0-11.647-9.476-21.122-21.123-21.122H166.305c-11.647,0-21.122,9.476-21.122,21.122
v124.386c1.978,0.487,3.915,1.193,5.748,2.114C152.24,156.214,155.194,151.772,157.9,147.714z"/>
<g>
<path style="fill:#81AF31;" d="M255.999,225.206c3.826,0,6.939-3.114,6.939-6.942v-42.218h-13.881v42.218
C249.057,222.091,252.171,225.206,255.999,225.206z"/>
<path style="fill:#81AF31;" d="M360.935,176.195c-2.017,19.622-5.628,37.451-10.78,53.43c1.582,0.711,4.081,1.068,9.333,1.003
c3.748-0.047,11.028-10.659,15.486-34.105c0,0,4.26-22.359,2.177-25.193c-0.456-0.619-1.545-1.033-3.241-1.228
C368.741,169.502,363.349,172.702,360.935,176.195z"/>
<path style="fill:#81AF31;" d="M298.518,256.794l-4.072,49.296c6.228-6.313,10.445-14.199,14.77-22.28
c2.907-5.436,5.915-11.056,9.545-16.162c9.219-12.964,16.482-28.583,21.787-46.663
C323.995,242.358,305.862,253.062,298.518,256.794z"/>
</g>
<path style="fill:#808080;" d="M321.407,308.647h21.395c1.826,0,2.751-1.536,2.751-4.564c0-3.029-0.925-4.564-2.751-4.564h-21.395
V308.647z"/>
<path style="fill:#E6E6E6;" d="M208.143,190.448c6.972,0,12.644-5.672,12.644-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C195.5,184.776,201.172,190.448,208.143,190.448z"/>
<g>
<path style="fill:#81AF31;" d="M202.315,306.081v25.404c0.072,0.749,0.308,3.203,0.715,7.031
c4.108,19.926,26.153,35.31,52.967,36.028c26.787-0.716,48.813-16.068,52.954-35.962c0.414-3.854,0.655-6.327,0.728-7.092v-25.408
c-9.731,13.82-24.207,25.365-53.68,25.367h-0.001h-0.001h-0.001c0,0,0,0-0.001,0C226.523,331.448,212.047,319.903,202.315,306.081z
"/>
<path style="fill:#81AF31;" d="M281.955,314.86l2.903-35.145h-57.722l2.901,35.144c6.667,3.057,15.036,4.865,25.961,4.865
C266.92,319.723,275.289,317.916,281.955,314.86z"/>
</g>
<g>
<path style="fill:#333333;" d="M348.926,426.596c-0.827-1.343-1.078-2.962-0.697-4.492s1.363-2.841,2.723-3.64l35.987-21.1
c-20.172-18.65-51.77-43.244-66.646-54.629c-2.971,26.921-12.152,100.466-28.929,155.716h47.091l29.045-41.689L348.926,426.596z"/>
<path style="fill:#333333;" d="M125.056,397.365l35.987,21.1c1.36,0.797,2.342,2.109,2.723,3.64c0.381,1.53,0.13,3.15-0.697,4.492
l-18.575,30.167l29.045,41.689h47.064c-16.775-54.741-25.946-128.682-28.91-155.711
C176.815,354.128,145.225,378.718,125.056,397.365z"/>
</g>
<path style="fill:#808080;" d="M259.344,386.123c-0.449,0.11-6.243,0.11-6.691,0c-18.519-1.174-34.954-8.436-46.249-19.307
c4.611,35.257,13.223,89.888,26.485,131.636h46.206c13.239-42.128,21.846-96.495,26.465-131.605
C294.265,377.701,277.844,384.952,259.344,386.123z"/>
<path style="fill:#333333;" d="M338.196,341.72c18.52,14.397,46.087,36.457,62.535,52.573c1.304,1.278,1.938,3.092,1.717,4.904
c-0.223,1.813-1.278,3.418-2.854,4.342l-37.542,22.011l17.448,28.338c1.223,1.988,1.151,4.511-0.182,6.426l-26.571,38.138h71.719
v-41.491c0-3.237,2.624-5.863,5.863-5.863s5.863,2.625,5.863,5.863v41.491h61.725c0,0-31.312-91.272-31.438-91.438
C466.035,406.427,453.946,364.643,338.196,341.72z"/>
<path style="fill:#808080;" d="M190.589,299.519h-21.393c-1.827,0-2.752,1.535-2.752,4.564c0,3.028,0.925,4.564,2.752,4.564h21.393
V299.519z"/>
<g>
<path style="fill:#81AF31;" d="M202.782,283.809c4.323,8.08,8.541,15.964,14.766,22.277l-4.07-49.293
c-7.342-3.731-25.467-14.412-42.016-35.77c5.304,18.064,12.562,33.669,21.774,46.623
C196.866,272.752,199.873,278.373,202.782,283.809z"/>
<path style="fill:#81AF31;" d="M221.311,247.539c2.011,0.849,3.396,2.749,3.575,4.924l1.282,15.527h59.659l1.283-15.527
c0.181-2.183,1.564-4.085,3.587-4.928c0.36-0.151,37.185-16.15,57.28-61.928c0.84-6.081,1.533-12.337,2.036-18.815
c0.284-3.641-2.744-8.18-5.671-12.569c-3.301-4.949-6.714-10.068-6.714-15.767V49.426h-14.572v13.41
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.873v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863v-13.41h-18.872
v13.41c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-14.571v89.028c0,5.699-3.412,10.816-6.714,15.765c-2.927,4.389-5.953,8.928-5.669,12.57
c0.504,6.48,1.197,12.738,2.037,18.819C184.119,231.383,220.941,247.382,221.311,247.539z M198.847,106.109
c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435V74.716c0-3.238,2.624-5.863,5.863-5.863
c3.239,0,5.863,2.625,5.863,5.863v19.668h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v17.998
h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v12.698c0,3.238-2.624,5.863-5.863,5.863
c-3.239,0-5.863-2.625-5.863-5.863v-12.698h-3.435c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435v-17.998
H198.847z M177.051,176.046c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h157.895c3.239,0,5.863,2.625,5.863,5.863
s-2.624,5.863-5.863,5.863h-6.794c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.933,24.369-24.371,24.369
c-13.437,0-24.368-10.932-24.368-24.369c0-0.59,0.028-1.174,0.072-1.758h-4.891v32.096c9.068,2.563,15.744,10.878,15.744,20.757
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863c0-3.34-1.672-6.287-4.215-8.076
c-1.254,9.083-9.047,16.107-18.468,16.107c-9.425,0-17.221-7.027-18.472-16.114c-2.545,1.789-4.214,4.742-4.214,8.083
c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863c0-9.88,6.673-18.214,15.744-20.777v-32.076h-4.89
c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.932,24.369-24.37,24.369c-13.437,0-24.369-10.932-24.369-24.369
c0-0.59,0.028-1.174,0.072-1.758H177.051z"/>
</g>
<path style="fill:#333333;" d="M132.496,453.888l17.448-28.338l-37.543-22.011c-1.576-0.924-2.63-2.529-2.854-4.342
c-0.222-1.813,0.413-3.626,1.717-4.904c16.444-16.111,44.004-38.165,62.524-52.562c-58.347,11.568-89.687,28.218-106.499,40.205
c-16.79,11.97-21.748,24.973-21.771,25.079c-0.047,0.203-31.437,91.438-31.437,91.438h61.725v-41.491
c0-3.237,2.624-5.863,5.863-5.863c3.239,0,5.863,2.625,5.863,5.863v41.491h71.719l-26.572-38.138
C131.344,458.398,131.273,455.875,132.496,453.888z"/>
<path id="scar" style="fill:#333333;" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
<path d="M208.143,202.174c13.438,0,24.37-10.932,24.37-24.369c0-0.59-0.028-1.174-0.072-1.758h4.89v32.076
c-9.07,2.564-15.744,10.897-15.744,20.777c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-3.34,1.67-6.293,4.214-8.083
c1.251,9.086,9.047,16.114,18.472,16.114c9.422,0,17.215-7.024,18.468-16.107c2.543,1.788,4.215,4.736,4.215,8.076
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-9.878-6.676-18.194-15.744-20.757v-32.096h4.891
c-0.042,0.583-0.072,1.168-0.072,1.758c0,13.438,10.931,24.369,24.368,24.369c13.438,0,24.371-10.932,24.371-24.369
c0-0.59-0.028-1.174-0.072-1.758h6.794c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863H177.051
c-3.239,0-5.863,2.625-5.863,5.863s2.624,5.863,5.863,5.863h6.794c-0.042,0.583-0.072,1.168-0.072,1.758
C183.774,191.242,194.706,202.174,208.143,202.174z M291.333,176.046h25.039c0.082,0.58,0.123,1.167,0.123,1.758
c0,6.971-5.673,12.643-12.645,12.643c-6.97,0-12.642-5.672-12.642-12.643C291.21,177.213,291.251,176.626,291.333,176.046z
M249.057,176.046h13.881v42.218c0,3.827-3.113,6.942-6.939,6.942c-3.828,0-6.942-3.114-6.942-6.942V176.046z M195.623,176.046
h25.039c0.082,0.58,0.123,1.167,0.123,1.758c0,6.971-5.672,12.643-12.644,12.643c-6.971,0-12.643-5.672-12.643-12.643
C195.5,177.213,195.541,176.626,195.623,176.046z"/>
<path d="M477.808,403.997c-1.481-5.345-18.783-54.621-156.401-77.228v-6.396h21.395c8.522,0,14.477-6.698,14.477-16.29
c0-9.592-5.953-16.29-14.477-16.29h-21.395V285.9c2.209-4.074,4.409-7.938,6.911-11.457c7.047-9.91,13.03-21.192,17.941-33.786
c3.325,1.314,12.893,1.704,13.377,1.697c16.189-0.202,23.775-27.428,26.858-43.639c0,0,5.216-27.376,0.107-34.327
c-1.898-2.582-4.607-4.35-8.062-5.298V34.668c0-18.112-14.735-32.848-32.849-32.848H166.305c-18.112,0-32.848,14.736-32.848,32.848
v124.42c-3.453,0.949-6.163,2.716-8.06,5.298c-5.11,6.952,0.106,34.328,0.106,34.328c3.084,16.211,10.673,43.437,26.857,43.639
c0.485,0.006,10.055-0.381,13.38-1.694c4.91,12.592,10.892,23.874,17.938,33.783c2.502,3.519,4.703,7.383,6.911,11.456v1.895
h-21.393c-8.525,0-14.478,6.698-14.478,16.29c0,9.592,5.953,16.29,14.478,16.29h21.393v6.396
c-137.624,22.609-154.921,71.89-156.401,77.229L0.319,502.408c-0.617,1.792-0.329,3.771,0.77,5.313s2.878,2.458,4.772,2.458h500.274
c1.895,0,3.673-0.916,4.772-2.458c1.1-1.542,1.388-3.521,0.77-5.313L477.808,403.997z M342.802,299.519
c1.826,0,2.751,1.535,2.751,4.564c0,3.028-0.925,4.564-2.751,4.564h-21.395v-9.127H342.802z M318.76,267.646
c-3.63,5.105-6.637,10.726-9.545,16.162c-4.324,8.081-8.542,15.967-14.77,22.28l4.072-49.296
c7.344-3.732,25.476-14.436,42.029-35.811C335.241,239.064,327.979,254.682,318.76,267.646z M255.995,331.449
c0.001,0,0.001,0,0.001,0h0.001h0.001H256c29.473-0.001,43.949-11.546,53.68-25.367v25.408c-0.074,0.765-0.315,3.238-0.728,7.092
c-4.142,19.893-26.167,35.246-52.954,35.962c-26.814-0.716-48.859-16.102-52.967-36.028c-0.408-3.827-0.645-6.282-0.715-7.031
v-25.404C212.047,319.903,226.523,331.448,255.995,331.449z M227.137,279.714h57.722l-2.903,35.145
c-6.667,3.056-15.035,4.863-25.958,4.863c-10.924,0-19.293-1.808-25.961-4.865L227.137,279.714z M373.911,170.102
c1.694,0.196,2.785,0.609,3.241,1.228c2.081,2.834-2.177,25.193-2.177,25.193c-4.458,23.446-11.739,34.058-15.486,34.105
c-5.252,0.066-7.751-0.292-9.333-1.003c5.152-15.979,8.764-33.809,10.78-53.43C363.349,172.702,368.741,169.502,373.911,170.102z
M145.183,34.668c0-11.647,9.475-21.122,21.122-21.122H345.69c11.647,0,21.123,9.476,21.123,21.122v124.389
c-1.978,0.487-3.914,1.194-5.747,2.117c-1.306-4.955-4.261-9.398-6.969-13.459c-2.222-3.334-4.743-7.113-4.743-9.26V43.563
c0-3.238-2.624-5.863-5.863-5.863H168.506c-3.239,0-5.863,2.625-5.863,5.863v94.891c0,2.147-2.52,5.926-4.743,9.26
c-2.708,4.058-5.66,8.5-6.968,13.453c-1.834-0.922-3.771-1.628-5.748-2.114V34.668H145.183z M152.508,230.629
c-3.745-0.047-11.026-10.659-15.485-34.105c0,0-4.26-22.359-2.176-25.193c0.456-0.619,1.544-1.033,3.24-1.228
c5.176-0.604,10.565,2.601,12.977,6.094c2.017,19.621,5.63,37.449,10.78,53.428C160.26,230.334,157.76,230.692,152.508,230.629z
M164.023,185.608c-0.841-6.081-1.534-12.339-2.037-18.819c-0.284-3.641,2.743-8.181,5.669-12.57
c3.301-4.949,6.714-10.067,6.714-15.765V49.426h14.571v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41
h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-13.41h18.872v13.41
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863
s5.863-2.625,5.863-5.863v-13.41h18.873v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h14.572v89.028
c0,5.699,3.413,10.817,6.714,15.767c2.927,4.389,5.954,8.927,5.671,12.569c-0.504,6.479-1.196,12.735-2.036,18.815
c-20.095,45.778-56.92,61.777-57.28,61.928c-2.023,0.843-3.405,2.745-3.587,4.928l-1.283,15.527h-59.661l-1.282-15.527
c-0.179-2.175-1.564-4.076-3.575-4.924C220.941,247.382,184.119,231.383,164.023,185.608z M171.462,221.023
c16.549,21.358,34.675,32.039,42.016,35.77l4.07,49.293c-6.225-6.313-10.443-14.197-14.766-22.277
c-2.908-5.436-5.916-11.058-9.546-16.163C184.024,254.691,176.766,239.088,171.462,221.023z M169.197,308.647
c-1.827,0-2.752-1.536-2.752-4.564c0-3.029,0.925-4.564,2.752-4.564h21.393v9.127H169.197z M87.531,498.453v-41.491
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v41.491H14.08c0,0,31.39-91.236,31.437-91.438
c0.025-0.107,4.981-13.11,21.771-25.079c16.813-11.986,48.152-28.637,106.499-40.204c-18.52,14.397-46.079,36.451-62.524,52.562
c-1.304,1.278-1.938,3.091-1.717,4.904c0.223,1.813,1.278,3.418,2.854,4.342l37.543,22.011l-17.448,28.338
c-1.223,1.988-1.151,4.511,0.182,6.426l26.572,38.138H87.531V498.453z M173.541,498.453l-29.045-41.689l18.575-30.167
c0.827-1.343,1.078-2.962,0.697-4.492c-0.381-1.53-1.363-2.842-2.723-3.64l-35.987-21.1c20.169-18.647,51.759-43.236,66.638-54.623
c2.964,27.029,12.136,100.969,28.91,155.711h-47.065V498.453z M232.888,498.453c-13.261-41.748-21.875-96.377-26.485-131.636
c11.297,10.871,27.731,18.133,46.249,19.307c0.448,0.11,6.242,0.11,6.691,0c18.5-1.173,34.921-8.423,46.216-19.277
c-4.619,35.112-13.227,89.479-26.465,131.605h-46.206V498.453z M291.366,498.453c16.777-55.25,25.958-128.796,28.929-155.716
c14.875,11.385,46.474,35.979,66.646,54.629l-35.987,21.1c-1.36,0.799-2.342,2.109-2.723,3.64c-0.381,1.53-0.13,3.15,0.697,4.492
l18.575,30.167l-29.045,41.689H291.366z M436.193,498.453v-41.491c0-3.238-2.624-5.863-5.863-5.863s-5.863,2.625-5.863,5.863v41.491
h-71.719l26.571-38.138c1.334-1.915,1.405-4.438,0.182-6.426l-17.448-28.338l37.542-22.011c1.576-0.924,2.63-2.529,2.854-4.342
c0.222-1.812-0.413-3.626-1.717-4.904c-16.448-16.115-44.015-38.176-62.535-52.573c115.75,22.922,127.839,64.707,128.283,65.294
c0.125,0.167,31.438,91.438,31.438,91.438h-61.725V498.453z"/>
<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>
components hml:
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<h1 class="text-focus-in">Welcome, to shock-me.de</h1>
</div>
<div class="mt-6 row">
<div class="col-md-6">
<img class="slide-in-fwd-center" src="./../../../assets/ghost.svg" alt="ghost" width="150px" height="auto">
</div>
<div class="col-md-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
... <== the paths included above
</svg>
</div>
</div>
</div>
</div>
do you need this ?
remember that you need to have an stroke on path to animate it.
svg { width: 200px; }
#scar {
stroke: #000;
stroke-width: 4px;
fill: none;
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: draw 2s linear 1 forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
fill: #000;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path id="scar" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
</svg>
Related
how can i add the image overlay in the black background in the svg (lines must overlay)? in the example you can see that iam almost done
Correct svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="6 8 101 98">
<g id="Grafisch-element---zwart---smart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M61.5,104 C86.6289561,104 107,83.6851049 107,58.6254118 C107,33.5657187 78.0465356,8 52.9175795,8 C27.7886234,8 16,33.5657187 16,58.6254118 C16,83.6851049 36.3710439,104 61.5,104 Z" id="Oval-Copy-10" fill="#000000"/>
<path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke-width="1.80000007"/>
</g>
</svg>
My code:
.svg {
position: absolute;
width: 0;
height: 0;
}
.clipped {
width: 100%;
height: 350px;
background: turquoise url(https://source.unsplash.com/600x600?summer);
background-size: cover;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}
<svg class="svg">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.676,1 C0.952,1,1,0.872,1,0.611 C1,0.35,0.858,0.083,0.582,0.083 C0.305,0.083,0.176,0.35,0.176,0.611 C0.176,0.872,0.4,1,0.676,1"></path></clipPath>
<path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke-width="1.80000007"/>
</svg>
<div class="clipped"></div>
https://jsfiddle.net/yfLbka6x/
Try like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="6 8 101 98">
<defs>
<path d="M61.5,104 C86.6289561,104 107,83.6851049 107,58.6254118 C107,33.5657187 78.0465356,8 52.9175795,8 C27.7886234,8 16,33.5657187 16,58.6254118 C16,83.6851049 36.3710439,104 61.5,104 Z" id="Oval-Copy-10" fill="#000000" />
</defs>
<clipPath id="my-clip-path">
<use href="#Oval-Copy-10" />
</clipPath>
<g id="Grafisch-element---zwart---smart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<image width="108" height="108" href="https://source.unsplash.com/600x600?summer" clip-path="url(#my-clip-path)" />
<path d="M51.5,15.9 C39.1834288,15.9 28.0326258,20.8619717 19.9611234,28.8851355 C11.8915835,36.9063486 6.90000004,47.9874214 6.90000004,60.2275098 C6.90000004,73.9162468 7.92111543,86.3511139 13.1337943,94.6817587 C17.2084084,101.193605 23.8906017,105.1 34.6409154,105.1 C47.971902,105.1 64.7440729,99.1623584 77.4205397,89.8576443 C88.2218731,81.9293058 96.1,71.540767 96.1,60.2275098 C96.1,47.9874214 91.1084165,36.9063486 83.0388766,28.8851355 C74.9673742,20.8619717 63.8165712,15.9 51.5,15.9 Z" id="Oval-Copy-11" stroke="#E1E1E1" stroke-width="1.80000007" />
</g>
</svg>
i'm trying to move svg circle using css animation on the whole dotted line cirlce, but the problem is when i use this code it start to move but not on all dotted circle line , any help?
#c1{
animation: moving 1s infinite linear;
/* motion-rotation: reverse; */
}
#-webkit-keyframes moving{
50% {transform: rotate(0.5deg)}
100% {transform: rotate(0.5deg)}
}
<svg id="eedf7e36-f7ba-41f3-811a-5462d78ed19b" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 910.88794 653.61419">
<rect y="646.47623" width="431.1819" height="1.87469" fill="#3f3d56"/>
<polygon points="109.607 639.942 121.866 639.942 127.699 592.654 109.605 592.654 109.607 639.942" fill="#ffb8b8"/>
<path d="M251.53582,759.63143h38.53073a0,0,0,0,1,0,0V774.5183a0,0,0,0,1,0,0H266.42267a14.88685,14.88685,0,0,1-14.88685-14.88685v0A0,0,0,0,1,251.53582,759.63143Z" transform="translate(397.08134 1410.94447) rotate(179.99738)" fill="#2f2e41"/><polygon points="44.379 637.585 56.532 639.205 68.564 593.103 50.629 590.712 44.379 637.585" fill="#ffb8b8"/><path d="M185.6415,759.43939h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H200.52836a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(162.1087 1430.92651) rotate(-172.40554)" fill="#2f2e41"/><polygon points="61.796 444.64 130.796 447.64 127.796 622.64 109.796 620.64 95.796 501.64 62.796 628.64 44.796 625.64 61.796 444.64" fill="#2f2e41"/><path d="M252.35236,463.83242l-24-4.90286-15,109.90286s44,29,58-1Z" transform="translate(-144.55603 -123.1929)" fill="#11067d"/><circle cx="97.32782" cy="303.17101" r="24.56103" fill="#ffb8b8"/><path d="M228.35236,457.83242l-35,11s17,85-11,129c0,0,35,37,50-46C232.35236,551.83242,244.35236,484.83242,228.35236,457.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M252.35236,463.83242l26,16s14,117,0,128S252.35236,463.83242,252.35236,463.83242Z" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/><path d="M289.1621,624.79959a10.0558,10.0558,0,0,1,.96818-15.3889l-10.57065-34.13562,17.83265,5.17981,7.30413,31.62164a10.11027,10.11027,0,0,1-15.53431,12.72307Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><path d="M199.338,614.92719a10.05577,10.05577,0,0,1-1.00976-15.38624l-14.85349-32.50158,18.349,2.85437,11.292,30.42646a10.11027,10.11027,0,0,1-13.77778,14.607Z" transform="translate(-144.55603 -123.1929)" fill="#ffb8b8"/><polygon points="57.796 346.64 48.796 345.64 25.796 420.64 48.796 472.64 66.796 461.64 46.796 418.64 62.796 372.64 57.796 346.64" fill="#2f2e41"/>
<polygon points="128.796 355.64 133.796 356.64 157.796 473.64 141.796 478.64 122.796 409.64 128.796 355.64" fill="#2f2e41"/><path d="M225.00655,436.44921a14.06316,14.06316,0,0,1,8.44415-11.03667c4.7277-1.93846,10.06074-1.11966,15.15695-.7489s10.76991.04877,14.44758-3.49856c3.3597-3.24064,4.11524-8.61848,2.49281-12.99537s-5.29609-7.775-9.46944-9.866a40.79142,40.79142,0,0,0-13.47062-3.56c-6.811-.82288-13.80511-.92776-20.44341.80412s-4.9267,5.44408-8.81681,11.095-5.05548,13.34984-2.08959,19.53611c1.98454,4.13936,5.54088,7.27259,9.004,10.28584" transform="translate(-144.55603 -123.1929)" fill="#2f2e41"/>
<path d="M774.394,707.49843l-.00049-1.87469c3.72742-.00092,7.51117-.07782,11.24732-.227l.07507,1.87286C781.95514,707.42061,778.14618,707.49752,774.394,707.49843Zm-11.31872-.21692c-3.74756-.14648-7.55005-.37072-11.30134-.66638l.1474-1.8692c3.727.29474,7.50434.51721,11.22718.66272Zm33.942-.6911-.14923-1.8692c3.72009-.29748,7.48511-.67553,11.18964-1.12317l.22522,1.86188c-3.72968.45032-7.51984.8302-11.26563,1.13043Zm-56.51025-1.093c-3.738-.44764-7.51026-.97583-11.213-1.56989l.29749-1.85089c3.67755.59039,7.42511,1.11493,11.13794,1.5589Zm78.98608-1.62024-.29932-1.85089c3.67664-.59412,7.399-1.27424,11.06379-2.01935l.37347,1.83624c-3.689.75153-7.43652,1.43536-11.13788,2.034Zm-101.33929-1.97083c-3.68946-.74695-7.4068-1.579-11.05005-2.47064l.4458-1.82159c3.619.887,7.31164,1.7127,10.97589,2.45416Zm123.525-2.54657-.44855-1.81976c3.63-.89343,7.2851-1.87195,10.8642-2.90906l.52179,1.80145C849.01239,697.47591,845.33258,698.46084,841.67883,699.35976Zm-145.51611-2.84045c-3.61487-1.04352-7.253-2.1731-10.81342-3.35761l.59223-1.77948c3.53656,1.17719,7.15051,2.29944,10.74109,3.33564ZM863.42511,693.061l-.59406-1.77771c3.53888-1.18267,7.10248-2.45416,10.59284-3.78051l.66638,1.752C870.57605,690.59035,866.98779,691.871,863.42511,693.061Zm-188.77344-3.70458c-3.51691-1.33283-7.05945-2.75715-10.52966-4.23548l.73462-1.72461c3.4469,1.46826,6.96606,2.88349,10.45965,4.20618Zm209.91052-4.32331-.736-1.72461c3.42718-1.46368,6.8681-3.01526,10.22668-4.61261l.80555,1.69348C891.477,681.99679,888.01227,683.55929,884.56219,685.0331ZM653.775,680.46352c-3.40521-1.61658-6.81915-3.32281-10.14654-5.07214l.87237-1.65869c3.305,1.73645,6.69556,3.43176,10.07788,5.03735Zm251.18836-5.13165-.8733-1.65869c3.30182-1.73743,6.60907-3.5636,9.82941-5.42639l.93921,1.62207c-3.24231,1.87561-6.57153,3.71368-9.89526,5.463Zm-271.265-5.41724c-3.267-1.88843-6.52991-3.86383-9.69849-5.87127l1.00324-1.58362c3.14709,1.99371,6.38849,3.9563,9.63348,5.83282Zm290.8313-5.90423-1.00323-1.58362c3.14251-1.991,6.29418-4.07709,9.36712-6.20172l1.06549,1.5415c-3.093,2.13928-6.26581,4.24-9.42932,6.24384ZM614.548,657.78853c-3.09991-2.142-6.19214-4.37188-9.19092-6.62829l1.12684-1.49756c2.97912,2.24084,6.05065,
4.45605,9.12957,6.58435Zm328.58582-6.64019-1.12763-1.49756c2.97223-2.23535,5.94818-4.56867,8.84534-6.93585l1.18634,1.45178c-2.9165,2.38275-5.91254,4.73163-8.904,6.98163Zm-346.69251-6.9798c-2.91046-2.37817-5.81268-4.84784-8.6261-7.34137l1.24311-1.40234c2.7951,2.47613,5.6781,4.93023,8.56933,7.29193Zm364.2157-7.33679-1.2431-1.40235c2.79285-2.47522,5.57373-5.041,8.265-7.62512l1.298,1.35291c-2.70856,2.60064-5.50782,5.18292-8.31983,7.67456ZM579.49121,629.149c-2.704-2.59784-5.3985-5.2909-8.00775-8.00409l1.35107-1.29987c2.59235,2.6958,5.26892,5.37146,7.95557,7.951Zm397.49444-7.99677-1.35113-1.29986c2.58411-2.68757,5.15179-5.46759,7.63245-8.2641l1.40234,1.24493C982.17218,615.64712,979.58722,618.44631,976.98565,621.15218Zm-413.18231-8.32263c-2.49945-2.81757-4.96869-5.71655-7.34-8.61652l1.45178-1.18634c2.35483,2.88074,4.808,5.7605,7.29056,8.55793Zm428.212-8.61835-1.45178-1.18634c2.369-2.8963,4.7069-5.87494,6.94958-8.85266L999.01068,595.3C996.75335,598.29781,994.399,601.29568,992.01532,604.2112Zm-442.5391-8.89752c-2.25915-2.99969-4.48767-6.08453-6.62326-9.17029l1.54151-1.06732c2.1214,3.06561,4.33481,6.13031,6.57931,9.10986Zm456.16825-9.20142-1.54151-1.06549c2.12915-3.07934,4.22174-6.23742,6.2182-9.38635l1.58362,1.00324C1009.89459,579.83364,1007.78833,583.01278,1005.64447,586.11226Zm-469.04029-9.3955c-2.00881-3.16724-3.98144-6.41956-5.86349-9.66736l1.62207-.93921c1.8692,3.22583,3.829,6.45618,5.82413,9.60236Zm481.17835-9.74793-1.62207-.93921c1.87653-3.24322,3.70819-6.56146,5.4447-9.86139l1.65869.87329c-1.74756,3.3219-3.592,6.66218-5.48138,9.92731ZM525.27316,557.155c-1.74655-3.31641-3.45007-6.71527-5.063-10.10217l1.69254-.80555c1.60238,3.364,3.29446,6.74,5.02911,10.03443Zm503.06821-10.25684-1.69348-.80554c1.60467-3.37591,3.16357-6.8324,4.63183-10.27423l1.72461.736C1031.526,540.01906,1029.957,543.49935,1028.34137,546.89815Zm-512.781-10.13788c-1.4765-3.45282-2.899-6.97522-4.22861-10.47015l1.752-.66638c1.32089,3.47021,2.73379,6.96973,4.20022,10.39874Zm521.68585-10.73468-1.753-.66455c1.3291-3.50683,2.60334-7.08142,3.7851-10.623l1.77771.59314C1039.867,518.89748,1038.58453,522.495,1037.24621,526.02559ZM507.52014,515.62777c-1.19366-3.5636-2.32965-7.20038-3.37637-10.80792l1.80053-.52179c1.03989,3.58282,2.16809,7.19488,3.35352,10.73468Zm536.90088-11.11-1.80145-.52c1.03436-3.57733,2.0111-7.23242,2.90362-10.8656l1.81976.44672C1046.44494,497.23678,1045.46179,500.91756,1044.421,504.51778Zm-543.212-10.634c-.90072-3.65057-1.73785-7.36609-2.48938-11.045l1.83719-.37531c.746,3.65424,1.57767,7.346,2.472,10.9718Zm548.6109-11.35168-1.83807-.37348c.74146-3.65149,1.41882-7.37433,2.01386-11.06421l1.85089.2984C1051.24792,475.10744,1050.566,478.855,1049.81994,482.53213ZM496.67972,471.70131c-.601-3.70092-1.13553-7.47229-1.58866-11.20977l1.861-.22522c.45038,3.71283.9813,7.45855,1.57859,11.1347Zm556.74319-11.52282-1.86188-.22339c.4458-3.711.822-7.47592,1.11676-11.1901l1.86921.14829c-.29755,3.73935-.6756,7.52948-1.12409,11.26514ZM493.95462,449.22771c-.30255-3.74438-.5332-7.54687-.68561-11.30221l1.87286-.076c.15149,3.73019.3808,7.50751.681,11.22717Zm561.266-11.61484-1.87286-.07415c.14648-3.73569.22149-7.519.22149-11.245l-.00091-.62109h1.87469l.00092.617c.00006,3.7544-.07495,7.56241-.22327,11.32324ZM494.907,426.60448h-1.87469l.00045-.31488c0-3.65695.071-7.36059.21146-11.00335l1.87286.07232c-.13913,3.619-.20962,7.29788-.20962,10.93515Zm558.41419-12.17413c-.15473-3.72241-.38721-7.49973-.69294-11.22626l1.86921-.15286c.30664,3.75168.541,7.55374.69659,11.3013ZM495.774,404.13094l-1.8692-.14645c.29474-3.754.66916-7.54459,1.11219-11.26746l1.86187.22153C496.43851,396.63668,496.06686,400.40258,495.774,404.13094Zm555.71378-12.11554c-.45221-3.69723-.98676-7.443-1.59094-11.1329l1.85089-.30252c.60687,3.71463,1.14606,7.48553,1.6001,11.2084ZM498.4313,381.80016l-1.85092-.2966c.59409-3.71188,1.27194-7.46081,2.01569-11.14157l1.83716.37073C499.695,374.38921,499.02173,378.11254,498.4313,381.80016Zm549.42606-11.97824c-.75244-3.66336-1.5882-7.35327-2.48438-10.96857l1.81977-.45129c.90258,3.63956,1.74383,7.3551,2.50085,11.04272Zm-544.97681-10.066-1.82116-.44488c.8916-3.64872,1.87106-7.33039,2.91091-10.94339l1.80149.51855c-1.03305,3.58878-2.00559,7.24573-2.89127,10.86972Zm539.566-11.76175c-1.04352-3.5805-2.175-7.19125-3.36493-10.73147l1.77765-.59684c1.19733,3.564,2.337,7.199,3.3869,10.80381ZM509.101,338.14373l-1.779-.59134c1.18634-3.56955,2.4642-7.16928,3.7984-10.699l1.75388.66275C511.54873,331.02251,510.27911,334.598,509.101,338.14373Zm526.18176-11.46747c-1.33191-3.48715-2.7489-6.98438-4.21167-10.39508l1.72278-.73871c1.47284,3.43359,2.8999,6.95416,4.241,10.46466Zm-518.20739-9.6225-1.7255-.73413c1.4733-3.46335,3.03861-6.94546,4.652-10.34842l1.69391.8028C520.09292,310.1545,518.5386,313.6133,517.07538,317.05376Zm509.36572-10.99283c-1.60468-3.36038-3.29993-6.73446-5.03919-10.02847l1.65686-.87555c1.752,3.31644,3.45923,6.713,5.074,10.09668Zm-499.71253-9.36847-1.66052-.87054c1.74747-3.33063,3.58829-6.6727,5.4708-9.93375l1.6239.93735c-1.87018,3.23911-3.69864,6.55917-5.43421,9.86691ZM1015.959,286.21224c-1.87469-3.22717-3.83728-6.45575-5.83465-9.59689l1.58178-1.006c2.01111,3.16221,3.98652,6.41272,5.874,9.661Zm-477.96945-9.02338-1.58453-1.00235c2.01111-3.17959,4.11419-6.361,6.25024-9.45544l1.54242,1.065c-2.12189,3.07388-4.21033,6.23377-6.20813,9.39276Zm465.9166-9.931c-2.12641-3.06424-4.34351-6.1271-6.58893-9.10211l1.49573-1.12958c2.261,2.99512,4.49267,6.07813,6.63287,9.16346Zm-453.1287-8.59542-1.4985-1.12592c2.25915-3.007,4.60941-6.00766,6.98529-8.91949l1.4527,1.18542c-2.36029,2.89212-4.695,5.87305-6.93952,8.85995Zm439.58927-9.34012c-2.36444-2.88483-4.82135-5.76142-7.30017-8.54969l1.40051-1.24581c2.49628,2.807,4.96869,5.70282,7.34961,8.60733ZM565.00482,241.229l-1.40329-1.24215c2.48892-2.81208,5.07077-5.614,7.6741-8.32816l1.353,1.298c-2.586,2.69577-5.15088,5.47943-7.62378,8.27227Zm410.42383-8.70987c-2.59418-2.69168-5.2735-5.36367-7.96472-7.94232l1.29712-1.35385c2.70861,2.596,5.40625,5.28589,8.0169,7.99542Zm-394.85358-7.52215-1.29986-1.35111c2.705-2.6029,5.50189-5.18792,8.31213-7.68417l1.24487,1.40143c-2.79193,2.47977-5.57007,5.04834-8.2572,7.63382Zm378.61286-8.03934c-2.80109-2.47656-5.68726-4.92706-8.57715-7.28277l1.18451-1.45316c2.909,2.37177,5.81451,4.83826,8.63391,7.33176Zm-361.8014-6.89007-1.18817-1.45c2.90863-2.38229,5.90192-4.73437,8.89618-6.99168l1.12866,1.49666c-2.97461,2.24222-5.94775,4.57919-8.83673,6.945Zm344.35877-7.32718c-2.99054-2.24453-6.06531-4.45655-9.13642-6.57474l1.06366-1.54334c3.09217,2.13239,6.18708,4.35906,9.19867,6.61869Zm-326.415-6.20356-1.06824-1.54058c3.09033-2.14154,6.26074-4.24555,9.4234-6.25391l1.00507,1.5827c-3.14154,1.99457-6.291,4.0844-9.36023,6.21175Zm307.8822-6.57519c-3.16083-1.99645-6.404-3.95491-9.64081-5.82092l.93738-1.62389c3.257,1.87837,6.5221,3.8501,9.7049,5.85983Zm-288.9223-5.46529-.94055-1.62205c3.24139-1.87975,6.56878-3.7215,9.88885-5.47307l.87512,1.65776c-3.29858,1.74008-6.60357,3.56947-9.82342,5.4373Zm269.41272-5.78476c-3.31091-1.73465-6.70337-3.42582-10.08386-5.02636l.80188-1.69437c3.40338,1.61107,6.81958,3.31367,10.15161,5.06023ZM654.14435,174.0248l-.80689-1.69255c3.38049-1.61153,6.843-3.17775,10.29163-4.65517l.73779,1.72321c-3.42535,1.46728-6.86493,3.023-10.22253,4.62445Zm229.1922-4.95451c-3.4455-1.46324-6.96607-2.8743-10.46466-4.19521l.66271-1.75387c3.52149,1.3296,7.06678,2.75073,10.53425,4.22358ZM674.76471,165.1941l-.66779-1.752c3.50775-1.33739,7.09424-2.62166,10.65961-3.81761l.59588,1.77768c-3.54107,1.1876-7.10333,2.46365-10.5877,3.79187Zm187.4768-4.08673c-3.54254-1.1749-7.15741-2.293-10.74475-3.32331l.51813-1.80146c3.61121,1.03712,7.24982,2.16259,10.81616,3.34527Zm-166.15478-3.06562-.52362-1.79965c3.60522-1.049,7.28418-2.03854,10.93426-2.94157l.45038,1.81978c-3.62585.897-7.28,1.88014-10.861,2.92138Zm144.53943-3.14206c-3.61945-.88287-7.31348-1.70443-10.97864-2.44178l.36981-1.83809c3.68988.74238,7.40863,1.56988,11.0528,2.45826Zm-122.709-2.25692-.37622-1.83626c3.67523-.75246,7.42194-1.44081,11.13611-2.04634l.30206,1.85C725.28924,151.212,721.56775,151.8958,717.91717,152.64277Zm100.66236-2.18044c-3.68671-.58768-7.43476-1.10853-11.1402-1.547l.22058-1.86189c3.73016.44167,7.50342.96573,11.21436,1.558Zm-78.46662-1.4367-.227-1.861c3.72925-.454,7.519-.839,11.2638-1.14285l.152,1.8683c-3.72009.30255-7.48461.68427-11.18872,1.13555Zm56.134-1.20876c-3.71644-.28972-7.49427-.5085-11.22809-.64992l.07141-1.87379c3.75854.1428,7.561.363,11.30224.65449Zm-33.71857-.61377-.07691-1.87286c3.74848-.1547,7.557-.23618,11.31965-.24257l.00274,1.87469c-3.73743.00641-7.52118.08742-11.24542.24074Z" transform="translate(-144.55603 -123.1929)" fill="#ccc"/><circle cx="530.38349" cy="297.68538" r="180.90894" fill="#3f3d56"/><ellipse cx="466.17488" cy="297.68538" rx="96.07861" ry="132.16663" fill="#fff"/><ellipse cx="434.32575" cy="325.68538" rx="26.81427" ry="42.18085" fill="#3f3d56"/><circle cx="885.81702" cy="196.65475" r="17.80969" fill="#11067d"/><circle id="c" cx="680.09215" cy="26.24586" r="26.24586" fill="#11067d"/><circle id="c1" cx="662.70442" cy="581.35092" r="17.80969" fill="#11067d"/></svg>
</div>
.rotate {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:orbit;
-moz-animation-duration:5s;
}
#-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg); -webkit-transform-origin: 50% 50%; }
to { -webkit-transform:rotate(360deg); -webkit-transform-origin: 50% 50%; }
}
#-moz-keyframes orbit {
from { -moz-transform:rotate(0deg); -moz-transform-origin: 50% 50%; }
to { -moz-transform:rotate(360deg); -moz-transform-origin: 50% 50%; }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<g class="rotate">
<g>
<circle fill="#FFFFFF" cx="250" cy="250" r="220.797"/>
<circle fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7.0069,7.0069" cx="250" cy="250" r="220.797"/>
</g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="363.787" cy="63.876" r="23.894"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="418.655" cy="394.851" r="21.239"/>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="85.911" cy="105.469" r="21.239"/>
</g>
<g>
<circle stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="199.608" cy="294.041" r="150.885"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -43.6117 23.8941)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="137.843" cy="303.338" rx="85.912" ry="96.809"/>
<ellipse transform="matrix(0.9889 -0.1488 0.1488 0.9889 -45.7056 14.6961)" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="7" cx="75.344" cy="312.744" rx="16.372" ry="24.336"/>
</g>
</g>
</svg>
Your svg code was not correct. So I create new one. I used Keyframe animation where I mentioned rotate css and most important transform-origin.
please see below the svg.
the animation css property works on chrome 58.
the same animation property doesn't work on edge 15.15.
what is the correct way to animate an svg element using edge?
this is the style tag i have inserted on the svg.
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
please see the whole svg attached in the snippet.
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<symbol id="background" viewBox="0 0 1200 1200">
<style type="text/css">
.bg0{fill:#63C6BD;}
.bg1{fill:#EDF7F7;}
.bg2{fill:none;stroke:#36BDB1;stroke-width:5;stroke-miterlimit:10;stroke-dasharray:192.3119,96.156;}
</style>
<g>
<g>
<path class="bg0" d="M252.5,614.6H176v43h76.5V614.6z M246.7,620.4v6.9h-64.9v-6.9H246.7z M181.8,651.9v-18.7h64.9v18.7H181.8z"/>
<path class="bg0" d="M474.5,599.1V545H143v54.1h7.1v247.2H143v27.6h331.5v-27.6h-7.1V599.1H474.5z M468.7,852.1v16H148.8v-16
h102.7v0.2h114.6v-0.2H468.7z M251.5,776.4v70h-95.6V599.1h305.8v247.2h-95.6v-70H251.5z M360.3,782.2v64.2h-103v-64.2H360.3z
M148.8,593.3v-42.5h319.9v42.5H148.8z"/>
<path class="bg0" d="M447,614.6h-76.5v43H447V614.6z M441.2,651.9h-64.9v-18.7h64.9V651.9z M441.2,627.3h-64.9v-6.9h64.9V627.3z"
/>
<path class="bg0" d="M349.8,614.6h-76.5v43h76.5V614.6z M344,651.9H279v-18.7H344V651.9z M344,627.3H279v-6.9H344V627.3z"/>
<path class="bg0" d="M268.6,808.9H349v-22.1h-80.4V808.9z M274.4,792.6h68.8v10.5h-68.8V792.6z"/>
<path class="bg0" d="M268.6,842.3H349V812h-80.4V842.3z M274.4,817.8h68.8v18.7h-68.8V817.8z"/>
<path class="bg0" d="M447,667.9h-76.5v43H447V667.9z M441.2,705.2h-64.9v-19.4h64.9V705.2z M441.2,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M349.8,667.9h-76.5v43h76.5V667.9z M344,705.2H279v-19.4H344V705.2z M344,679.9H279v-6.2H344V679.9z"/>
<path class="bg0" d="M252.5,667.9H176v43h76.5V667.9z M246.7,705.2h-64.9v-19.4h64.9V705.2z M246.7,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M447,721.3h-76.5v43H447V721.3z M441.2,758.5h-64.9v-19.3h64.9V758.5z M441.2,733.4h-64.9v-6.3h64.9V733.4z"
/>
<path class="bg0" d="M349.8,721.3h-76.5v43h76.5V721.3z M344,758.5H279v-19.3H344V758.5z M344,733.4H279v-6.3H344V733.4z"/>
<path class="bg0" d="M252.5,721.3H176v43h76.5V721.3z M246.7,758.5h-64.9v-19.3h64.9V758.5z M246.7,733.4h-64.9v-6.3h64.9V733.4z"
/>
</g>
</g>
<path class="bg0" d="M955,670.9c-3.5,0-7,0.4-10.4,1.2c-4.1-14.9-13.2-24.7-28.2-27.8c-1.5-7.1-4.2-14-8.2-20.2
c7.7-8.5,12-19.4,12-31.1c0-24.9-19.7-45.2-44.2-46c-4.6-11.8-26.5-16.1-46.4-16.1c-31.9,0-64.2,9.8-64.2,28.5c0,0.5,0,1.1,0,1.6
c-13.7,7-22.4,21.2-22.4,36.8c0,4.7,0.8,9.3,2.3,13.7c-21.2,9-35,27.6-35.4,48.3c-0.6,30.4,27.3,55.7,62.3,56.4
c7.2,0.1,20.7,0.2,41.5,0.2v152c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-152c6.5,0,12.8,0,18.4,0c2.3,20.7,20.7,36.8,43,36.8
h35v48.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-48.6H955c23.8,0,43.2-18.5,43.2-41.2C998.3,689.4,978.9,670.9,955,670.9z
M816.7,710.7L816.7,710.7L816.7,710.7c-0.6,0-1.1,0-1.7,0c-21.4,0-35.4-0.1-42.6-0.2c-31.8-0.7-57.2-23.3-56.6-50.5
c0.4-19.1,13.9-36.4,34.4-44l2.9-1.1l-1.2-2.8c-2-4.5-3-9.3-3-14.2c0-13.9,8.2-26.6,20.8-32.3l1.9-0.8l-0.2-2c-0.1-1-0.1-2-0.1-3.1
c0-14,30.3-22.7,58.4-22.7c22.9,0,39.9,5.6,41.3,13.7l0.5,2.5l3-0.1c22,0,39.9,18,39.9,40.2c0,10.9-4.2,21.1-11.9,28.7l-1.7,1.7
l1.4,2c6.4,9.1,9.7,19.7,9.7,30.8c0,30-24.8,54.4-55.3,54.4c-3.1,0-7.7,0-13.2,0C835.7,710.7,826.3,710.7,816.7,710.7z M955,747.5
h-74c-19.1,0-34.8-13.6-37.1-31c5.3,0,9.7,0,12.7,0c33.7,0,61.1-27,61.1-60.2c0-2-0.1-3.9-0.3-5.8c12.5,3.4,19.7,12.4,22.3,25.8
l0.6,3.2l3.1-1c3.8-1.2,7.7-1.8,11.7-1.8c20.6,0,37.4,15.9,37.4,35.4C992.5,731.6,975.7,747.5,955,747.5z"/>
<path class="bg0" d="M1052.2,836.4c-2-9.2-10.5-15.9-20.4-15.9c-2.9,0-5.6,0.6-8.1,1.6c-3.4-6.7-8.9-12.2-15.7-15.9
c-3.1-17.3-18.8-30.1-37.4-30.1c-17.2,0-32.1,11-36.6,26.5c-2.9-0.7-5.8-1-8.8-1c-20.9,0-37.9,16.2-37.9,36.2
c0,19.9,17,36.2,37.9,36.2h64.3c4,0,7.9-0.6,11.6-1.7c2.3,0.8,4.8,1.3,7.4,1.3h33c11.5,0,20.9-9,20.9-20
C1062.4,846.4,1058.5,840,1052.2,836.4z M989.5,868.2h-64.3c-17.7,0-32.1-13.6-32.1-30.4c0-16.7,14.4-30.4,32.1-30.4
c3.4,0,6.8,0.5,10,1.5l3.1,1l0.6-3.2c2.8-14.4,16.1-24.9,31.6-24.9c16.2,0,29.9,11.4,31.9,26.6l0.2,1.6l1.4,0.7
c6.4,3.1,11.5,8.1,14.6,14.2c-3,2.3-5.3,5.4-6.6,8.9c-1.2-0.2-2.4-0.3-3.6-0.3c-11.5,0-20.9,9-20.9,20c0,5.6,2.4,10.7,6.3,14.3
C992.5,868,991,868.2,989.5,868.2z M1041.5,867.7h-33c-8.3,0-15.1-6.4-15.1-14.2c0-7.8,6.8-14.2,15.1-14.2c1.6,0,3.2,0.2,4.7,0.7
l3.1,1l0.6-3.2c1.3-6.7,7.5-11.6,14.8-11.6c7.6,0,14,5.3,15,12.4l0.2,1.6l1.4,0.7c5.1,2.4,8.2,7.3,8.2,12.6
C1056.6,861.4,1049.8,867.7,1041.5,867.7z"/>
<path class="bg0" d="M770.9,814.3h-43.5v-6.7h19.5v-22.8H728c0.2-0.4,0.2-0.7,0.2-1.2v-6h18.7v-22H595.5v22h17.6v6
c0,0.4,0.1,0.8,0.2,1.2h-17.8v22.8h16.8v6.7h-39.2v30.3h12.8v23.9c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h160.6v23.9
c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h12.8V814.3z M721.6,807.5v6.7H618.1v-6.7H721.6z M601.3,761.3h139.8v10.4H601.3
V761.3z M618.9,783.6v-6h103.5v6c0,0.4,0.1,0.8,0.2,1.2h-104C618.8,784.4,618.9,784,618.9,783.6z M601.3,790.5h139.8v11.2H601.3
V790.5z M765.1,838.8H578.9v-18.7h186.2V838.8z"/>
<path class="bg0" d="M548.1,803.4h-3.9l4.9-28.4h-46.9l4.9,28.4h-4.1c-1.6,0-2.9,1.3-2.9,2.9v61.4c0,1.6,1.3,2.9,2.9,2.9
c1.6,0,2.9-1.3,2.9-2.9v-18.2h39.4v18.2c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-61.4C551,804.7,549.7,803.4,548.1,803.4z
M542.2,780.9l-8.4,49.3h-16.2l-4.1-23.8c0,0,0-0.1,0-0.1c0-0.4-0.1-0.8-0.2-1.1l-4.2-24.4H542.2z M505.8,843.8v-34.6h2.2l4.6,26.8
h26l4.6-26.8h2v34.6H505.8z"/>
<path class="bg0" d="M1062.5,437.3H921.7l0.4-3.3c2.1-16.7,17.1-29.1,34.2-27.5c7.2-13.9,21.7-22.8,37.4-22.8
c15.7,0,30.1,8.8,37.4,22.6c15.8,0.1,29.1,12,31.1,27.6L1062.5,437.3z M928.5,431.5h127.3c-2.9-11.2-13.1-19.3-24.9-19.3
c-0.5,0-0.9,0-1.4,0l-2,0.1l-0.8-1.8c-6-12.8-18.9-21-33-21c-14.2,0-27.2,8.4-33.1,21.3l-0.9,2l-2.2-0.3
C944,410.4,931.7,419,928.5,431.5z"/>
<path class="bg0" d="M665.9,393.2h92.7l-0.4-3.3c-1.9-15.7-15.3-27.5-31.1-27.6c-7.2-13.8-21.7-22.6-37.4-22.6
c-15.8,0-30.2,8.9-37.4,22.8c-8.1-0.7-15.7,1.7-21.7,6.1c-7.2-5.5-16.1-8.6-25.4-8.6c-15.8,0-30.2,8.9-37.4,22.8
c-17.1-1.6-32.1,10.8-34.2,27.5l-0.4,3.3h140.8l-0.4-3.3C672.8,403.7,670,397.8,665.9,393.2z M653.6,368.4l2.2,0.3l0.9-2
c5.9-12.9,18.9-21.3,33.1-21.3c14.1,0,27,8.2,33,21l0.8,1.8l2-0.1c0.5,0,0.9,0,1.4,0c11.9,0,22,8.1,24.9,19.3h-92.7
c-4.8-3-10.5-4.8-16.5-4.8c-2-3.8-4.5-7.2-7.4-10.1C640.3,369,646.8,367.3,653.6,368.4z M540,407.7c3.2-12.5,15.5-21.1,29.1-19
l2.2,0.3l0.9-2c5.9-12.9,18.9-21.3,33.1-21.3c7.7,0,15,2.5,21,6.8c6.2,4.1,10.1,10.3,11.9,14.2c5.6,0.8,6.5,0.6,10.8,2.2
c1.9,0.7,6.3,3,8.3,4.2c5.1,3,8.4,8.5,10,14.5H540z"/>
<path class="bg0" d="M959.8,325.6H768.3l0.4-3.3c2.8-22.7,23.4-39.4,46.6-36.9c9.6-19.2,29.4-31.4,50.9-31.4
c21.4,0,41.1,12.2,50.8,31.2c0.1,0,0.2,0,0.4,0c21.3,0,39.4,16,42,37.1L959.8,325.6z M775,319.8h178.1
c-3.6-16.6-18.4-28.8-35.7-28.8c-0.7,0-1.3,0-2,0.1l-1.9,0.1l-0.8-1.8c-8.4-18-26.6-29.6-46.4-29.6c-20,0-38.3,11.8-46.6,30l-0.9,2
l-2.2-0.3c-2-0.3-3.9-0.5-5.9-0.5C793.4,291,778.6,303.2,775,319.8z"/>
<g id="back">
<g>
<rect x="128.4" y="868.1" class="bg0" width="962.6" height="5.8"/>
</g>
</g>
<g>
<path class="bg1" d="M604,15C283.1,15,23,275.1,23,596s260.1,581,581,581s581-260.1,581-581S924.9,15,604,15z M604,1023.6
c-236.1,0-427.6-191.4-427.6-427.6S367.9,168.4,604,168.4c236.1,0,427.6,191.4,427.6,427.6S840.1,1023.6,604,1023.6z"/>
</g>
<g>
<circle class="bg2" cx="604" cy="596" r="505"/>
</g>
</symbol>
<symbol id="car" viewBox="0 0 43 40.2">
<style type="text/css">
.car0{fill:#B3E5FC;}
.car1{fill:#FFC107;}
.car2{fill:#FF8F00;}
.car3{fill:#BF5300;}
.car4{fill:#FFE082;}
.car5{fill:#455A64;}
.car6{fill:#546E7A;}
.car7{fill:#FFECB3;}
</style>
<g>
<g>
<path class="car0" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.6-0.6c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2c0.1-0.1,0.3-0.1,0.4,0
l1,1.4C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car0" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.4,7.1C7.2,7.1,7.2,6.9,7.3,6.7l1.6-2c0.1-0.1,0.3-0.1,0.4,0l1,1.4
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<g>
<path class="car1" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.4-0.5c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2C5.7,9,5.9,9,6,9.1
l0.9,1.3C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car1" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.5,7.2C7.3,7.2,7.3,7,7.4,6.8l1.6-2c0.1-0.1,0.3-0.1,0.4,0l0.9,1.3
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<path class="car2" d="M22.7,6.7l-4.9-3.9c-0.3-0.3-0.9-0.2-1.1,0.1l0,0l-1.5-1.1c-1.1-0.8-2.6-0.6-3.4,0.4L2.1,14.5
c-0.8,1-0.7,2.6,0.4,3.4l1.5,1.2l0,0c-0.3,0.3-0.2,0.9,0.1,1.1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l2.7,2.3l0.6,0.4l7.8,6.2
c-0.2,0.3-0.1,0.7,0.2,1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l0,0c1.4,1,3.7,0.5,5-0.6c1.6-1.2,3.1-3.1,3.8-4c0.7-0.9,4-5,4.8-6.9
c0.7-1.6,0.7-4-0.6-5l0,0c0.2-0.3,0.1-0.7-0.2-1l-4.9-3.9c-0.3-0.2-0.7-0.2-1,0l-7.8-6.2l-0.6-0.5l-2.8-2.2C23.1,7.4,23,7,22.7,6.7
z"/>
<path class="car1" d="M28.4,9l-1.9,0.6c-0.2,0.1-0.3,0.2-0.5,0.3l-0.2,0.3L16.4,3c-1.5-1.2-3.8-0.9-5,0.6L3.4,13.8
c-1.2,1.5-1,3.7,0.5,5l9.1,7.5l-0.2,0.3c-0.1,0.2-0.2,0.3-0.2,0.5l-0.2,2c0,0,1.1,0.6,1.2,0.3l0.2-1.9c0-0.1,0-0.2-0.1-0.2
l-0.4-0.2l0.3-0.4l13.4,10.6c1.3,1,3.6,0.4,4.9-0.6c1.5-1.2,3-3,3.7-3.9c0.7-0.9,3.9-4.9,4.7-6.7c0.7-1.5,0.7-3.9-0.6-4.9
L26.3,10.7l0.3-0.4l0.2,0.3c0.1,0.1,0.2,0.1,0.3,0.1L29,10C29.2,9.9,28.4,9,28.4,9z"/>
<path class="car3" d="M14.7,7.3l-7,8.8c-0.4,0.6-1.3,0.7-1.8,0.2l-1.3-1C4.1,14.8,4,14,4.4,13.5l7-8.8c0.4-0.6,1.3-0.7,1.8-0.2
l1.3,1C15,6,15.1,6.8,14.7,7.3z"/>
<path class="car4" d="M37.9,21.7c1.2,1,1.6,2.6,1,4c-0.7,1.7-3.7,5.6-4.4,6.4c-0.6,0.8-2,2.4-3.5,3.5c-1.2,0.9-2.9,0.9-4.1,0L5.6,19
c-1.3-1-1.5-2.8-0.5-4.1l7.8-9.8c1-1.2,2.8-1.4,4.1-0.4L37.9,21.7z"/>
<g>
<g>
<g>
<path class="car5" d="M27.3,18L20.9,26c-0.3,0.4-0.8,0.5-1.3,0.2l-5-2.9c-0.5-0.3-0.7-0.8-0.6-1.3c0.3-1.2,1-3.4,2.8-5.8
c2.1-2.6,4-3.7,5-4.2c0.5-0.2,1-0.1,1.4,0.3l4,4.3C27.6,17.1,27.6,17.6,27.3,18z"/>
</g>
<g>
<path class="car6" d="M22,12.1c-1,0.5-3,1.6-5,4.2l7.2,5.7l3.2-4c0.3-0.4,0.3-0.9-0.1-1.3l-4-4.3C23,12.1,22.4,11.9,22,12.1z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="car5" d="M35.9,25.8l-5.5,6.9c-0.3,0.3-0.4,0.6-0.4,0.7l0.3,1.2c0,0.1,0.2,0,0.5-0.3c0.6-0.7,1.9-2,3.5-4.1
c1.8-2.2,2.8-3.7,3.3-4.5c0.2-0.3,0.3-0.5,0.2-0.5l-1.2,0C36.5,25.2,36.2,25.4,35.9,25.8z"/>
</g>
<g>
<path class="car6" d="M37.6,25.8c-0.5,0.7-1.5,2.2-3.2,4.4l-1.2-1l2.7-3.5c0.3-0.3,0.5-0.6,0.6-0.6l1.2,0
C37.9,25.2,37.8,25.4,37.6,25.8z"/>
</g>
</g>
</g>
<g>
<g>
<path class="car5" d="M23,31.8l0.5-1.4c-1.8-1.6-4.1-3.4-6.5-5.2c-0.2-0.1-0.4-0.1-0.6,0l-0.8,0.5c-0.1,0.1-0.1,0.3,0,0.4L23,31.8
z"/>
<path class="car5" d="M23.6,32.2l3.2,2.5c0.1,0.1,0.2,0.1,0.3,0.1l1,0.1c0.2,0,0.3-0.2,0.2-0.3c-0.7-0.6-2.2-2.1-4.2-3.9
L23.6,32.2z"/>
</g>
<g>
<path class="car6" d="M25.8,12.9l-0.3,0.9c-0.1,0.2,0,0.4,0.2,0.6c2.3,2,4.5,3.7,6.5,5.2l1.3-0.8l-7.3-5.9
C26,12.7,25.8,12.7,25.8,12.9z"/>
<path class="car6" d="M32.7,20c2.2,1.6,3.9,2.7,4.7,3.2c0.1,0.1,0.3-0.1,0.3-0.2l-0.3-0.9c0-0.1-0.1-0.2-0.2-0.3L34,19.2L32.7,20z
"/>
</g>
</g>
<g>
<path class="car0" d="M2.1,14.5c-0.5,0.6-0.6,1.3-0.5,2c0.1-0.1,0.2-0.1,0.3-0.3L4,13.6c0.3-0.4,0.3-1-0.1-1.3l0,0L2.1,14.5z"/>
<path class="car0" d="M13.6,1.3c-0.7,0-1.3,0.3-1.8,0.9L10,4.4l0,0c0.4,0.3,1,0.3,1.3-0.1l2.1-2.6C13.5,1.6,13.6,1.4,13.6,1.3z"/>
</g>
<g>
<polygon class="car1" points="13.6,3.7 20.5,11.4 13.1,4 "/>
<polygon class="car1" points="3.9,15.9 13,20.8 4,15.3 "/>
</g>
<rect x="22.5" y="20.5" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.175 31.9094)" class="car7" width="12" height="10"/>
<g>
<g>
<path class="car2" d="M29.4,32.3l-0.2,0.2c-0.1,0.1-0.2,0.1-0.2,0.1c-3.6-3.6-7-5.4-7.6-5.7c-0.1,0-0.1-0.1,0-0.2l0.2-0.2
c0.1-0.1,0.2-0.1,0.2-0.1c0.7,0.3,4.1,2.2,7.7,5.8C29.5,32.1,29.5,32.2,29.4,32.3z"/>
</g>
<g>
<path class="car2" d="M35.3,24.9l0.2-0.2c0.1-0.1,0.1-0.2,0-0.2c-4.3-2.7-6.8-5.6-7.3-6.2c0-0.1-0.1,0-0.2,0l-0.2,0.2
c-0.1,0.1-0.1,0.2-0.1,0.2c0.5,0.6,3.1,3.5,7.4,6.2C35.2,25,35.3,24.9,35.3,24.9z"/>
</g>
</g>
<g>
<rect x="20.3" y="22.8" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.3977 28.4661)" class="car2" width="10" height="0.3"/>
<rect x="21.9" y="24.1" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.7932 30.2181)" class="car2" width="10" height="0.3"/>
<rect x="23.5" y="25.4" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.1887 31.9701)" class="car2" width="10" height="0.3"/>
<rect x="25.2" y="26.6" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.5842 33.7222)" class="car2" width="10" height="0.3"/>
<rect x="26.8" y="27.9" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.9797 35.4742)" class="st2" width="10" height="0.3"/>
</g>
</g>
</symbol>
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<use href="#background">
</use>
<g class="car-container">
<use href="#car" width="174" height="174" class="car" transform="translate(210,281) rotate(80)"></use>
</g>
</svg>
I was interested in studying the issue you were having, and found this article.
https://css-tricks.com/svg-animation-on-css-transforms/
Even though it's now fairly clear to me that you're not using SMIL, here was my previous response (which is still good to have on-hand, in case it's needed):
I don't have tons of experience with what you're asking, however, "Can
I use..." is our friend. If you're referring to SMIL:
http://caniuse.com/#search=svg%20animation
According to their notes, this is not planned for Edge and will
eventually be dropped by Chrome. Also, here is an interesting page
that may help you - listing alternative, cross-compatible methods of
animating SVGs.
https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/
I was using animation on transform css attribute.
edge does not currently support transforms on svg.
I don't see what I'm doing wrong, so perhaps someone else will!
Here goes: I've made a Facebook button in svg. When I hover over the button I would like it to "sink into the background" using a inline shadow.
Here is the svg:
<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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {display:none;}
g#shadow:hover {display:block;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
</g>
<g id="layer_3">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>
The group with ID "shadow" should display when I hover over it, but it doesn't. Who sees my mistake?
Thanx,
Thom
The shadow elements are display:none and are therefore not rendered. There's nothing there to hover over.
This turns on the shadow when you hover anywhere over the button, assuming that's what you want to achieve. There's an additional hidden circle to catch all the events and the foreground is pointer-events: none so it doesn't interfere with the catching of the hover events.
<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 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {visibility:hidden;pointer-events:all}
g#shadow:hover {visibility:visible;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
<circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>
I want to combine all SVG icons in one sprite, and call it from CSS like we do in other background-image cases.But it don't shown in the page. When opening SVG image in browser I get this error
http://gyazo.com/814ab252f2c104caf10fcef2d2f1d057
HTML
<div class="col-md-12 col-xs-12 input-group">
<span class="input-group-addon login-icon icon-banner">
<i class="icons icon-username"></i>
</span>
</div>
Css
.icons{
height: 20px;
width: 20px;
display: inline-block;
background:url('../images/icons/icons.svg') no-repeat;
}
This is the SVG image http://gyazo.com/25f8140160e3cb27b850a9b2916492f3
SVG markup is
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="126.099px" height="93.106px" viewBox="0 0 126.099 93.106" enable-background="new 0 0 126.099 93.106"
xml:space="preserve">
<g id="Page-1" sketch:type="MSPage">
<g id="Icons" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username" sketch:type="MSShapeGroup" fill="#F16059" d="M254.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C260.741,388.538,255.173,389.595,254.34,387.458"/>
</g>
</g>
<g id="Page-1_1_" sketch:type="MSPage">
<g id="Icons_1_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_1_" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M203.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C209.741,388.538,204.173,389.595,203.34,387.458"/>
</g>
</g>
<g id="Page-1_2_" sketch:type="MSPage">
<g id="Icons_2_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_2_" sketch:type="MSShapeGroup" fill="#37424E" d="M229.007,387.459c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C235.408,388.539,229.84,389.597,229.007,387.459"/>
</g>
</g>
<g id="Page-1_3_" sketch:type="MSPage">
<g id="Icons_3_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M208.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C209.5,444.447,209.265,444.215,208.975,444.215
L208.975,444.215z M203.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C204.418,449.473,204.181,449.891,203.819,450.145L203.819,450.145z M205.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L205.653,444.215z"/>
</g>
</g>
<g id="Page-1_4_" sketch:type="MSPage">
<g id="Icons_4_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_1_" sketch:type="MSShapeGroup" fill="#37424E" d="M234.642,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C235.167,444.448,234.932,444.215,234.642,444.215
L234.642,444.215z M229.486,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402s1.418,0.628,1.418,1.402
C230.085,449.473,229.848,449.891,229.486,450.145L229.486,450.145z M231.32,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624s2.653,1.177,2.653,2.624V444.215L231.32,444.215z"/>
</g>
</g>
<g id="Page-1_5_" sketch:type="MSPage">
<g id="Icons_5_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_2_" sketch:type="MSShapeGroup" fill="#F16059" d="M259.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C260.5,444.448,260.265,444.215,259.975,444.215
L259.975,444.215z M254.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C255.418,449.473,255.181,449.891,254.819,450.145L254.819,450.145z M256.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L256.653,444.215z"/>
</g>
</g>
</svg>
Can anyone help with this?
Try removing any attribute where it says sketch:type="..." throughout the svg code.