SVG hover won't work in Firefox - css
I have a fairly large SVG and there are specific paths that change when hovered on. This works in Chrome but not Firefox.
Each section that is to be animated is nested in a link tag, the hover effect is to make it look like the section is expanding. Any assistance as to why this does not work in Firefox is appreciated. Also not that looking through the debugger it appears Firefox recognize the hover event but is ignore the new path.
#matrice1:hover #sec1 {
d: path("M480.03,200.899l68.21-175.566C509.431,10.447,450.037,0,405.989,0 l-0.106,187.383C431.991,187.383,456.979,192.173,480.03,200.899");
}
<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 808 798" enable-background="new 0 0 800 798">
<a href="#" class="matrixSection matrixNav" onclick="animateMatrix(1)" id="matrice1">
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="M480.03,200.899l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066
v139.656C431.991,187.383,456.979,192.173,480.03,200.899"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-miterlimit="10" d="M480.03,200.899
l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066v139.656C431.991,187.383,456.979,192.173,480.03,200.899z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M475.407,212.728l4.623-11.829c-23.051-8.727-48.039-13.517-74.147-13.517
v12.695C430.36,200.078,453.789,204.56,475.407,212.728"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M475.407,212.728l4.623-11.829
c-23.051-8.727-48.039-13.517-74.147-13.517v12.695C430.36,200.078,453.789,204.56,475.407,212.728z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M450.935,275.354l24.473-62.626c-21.618-8.166-45.047-12.649-69.524-12.649
v67.277C421.72,267.354,436.894,270.184,450.935,275.354"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M450.935,275.354l24.473-62.626
c-21.618-8.166-45.047-12.649-69.524-12.649v67.277C421.72,267.354,436.894,270.184,450.935,275.354z"/>
<path clip-path="url(#SVGID_4_)" fill="#E7223B" d="M447.761,283.476l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723
C420.599,276.078,434.704,278.69,447.761,283.476"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-miterlimit="10" d="M447.761,283.476
l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723C420.599,276.078,434.704,278.69,447.761,283.476z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="1.307" stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="1.307" stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="456.941,77.504 456.98,77.504 456.98,99.654 461.847,99.654
461.847,70.718 457.963,70.718 453.481,75.967 453.481,81.045 453.524,81.045 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="436.893,124.923 436.893,130.997 435.522,130.997 435.522,121.33
437.118,121.33 438.872,126.875 438.872,121.33 440.227,121.33 440.227,130.997 438.801,130.997 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.151,128.501v-4.675c0-1.512,0.741-2.61,2.45-2.61
c1.728,0,2.468,1.098,2.468,2.61v4.675c0,1.498-0.74,2.611-2.468,2.611C441.893,131.112,441.151,130,441.151,128.501
M444.445,128.759v-5.189c0-0.583-0.259-0.998-0.844-0.998c-0.568,0-0.824,0.415-0.824,0.998v5.189
c0,0.585,0.256,0.997,0.824,0.997C444.187,129.756,444.445,129.344,444.445,128.759"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M435.522,134.873h2.409c1.64,0,2.238,0.813,2.238,2.167v2.038
c0,1.354-0.599,2.181-2.238,2.181h-0.785v3.28h-1.624V134.873z M437.146,136.198v3.807h0.602c0.555,0,0.795-0.271,0.795-0.799
v-2.224c0-0.527-0.24-0.784-0.795-0.784H437.146z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.01,142.043v-4.675c0-1.512,0.741-2.609,2.451-2.609
c1.726,0,2.467,1.098,2.467,2.609v4.675c0,1.499-0.741,2.608-2.467,2.608C441.751,144.651,441.01,143.542,441.01,142.043
M444.304,142.301v-5.19c0-0.585-0.259-0.998-0.843-0.998c-0.569,0-0.826,0.413-0.826,0.998v5.19c0,0.585,0.257,0.997,0.826,0.997
C444.045,143.298,444.304,142.886,444.304,142.301"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="451.772,134.872 449.933,144.538 448.165,144.538 446.324,134.872
447.98,134.872 449.091,141.617 449.104,141.617 450.246,134.872 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="452.44,134.872 456.319,134.872 456.319,136.197 454.067,136.197
454.067,138.964 455.678,138.964 455.678,140.274 454.067,140.274 454.067,143.213 456.319,143.213 456.319,144.538
452.44,144.538 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.813,140.105v4.434h-1.627v-9.667h2.369c1.638,0,2.237,0.813,2.237,2.167
v1.239c0,1.042-0.372,1.655-1.299,1.869l1.555,4.392h-1.711L458.813,140.105z M458.813,136.198v3.008h0.542
c0.555,0,0.798-0.285,0.798-0.798v-1.426c0-0.527-0.243-0.784-0.798-0.784H458.813z"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="462.347,134.872 466.669,134.872 466.669,136.197 465.327,136.197
465.327,144.538 463.688,144.538 463.688,136.197 462.347,136.197 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="470.586,140.86 470.586,144.538 468.963,144.538 468.963,140.86
467.151,134.872 468.85,134.872 469.832,138.535 469.844,138.535 470.83,134.872 472.383,134.872 "/>
</a>
</svg>
Styling the d attribute with CSS is a new SVG2 thing that Chrome has implemented, but Firefox has not, yet.
Update
You can achieve the same effect using SVGs built-in SMIL animation features. This will work on most browsers - except IE and Edge. If you need to support those browsers also, you will need to switch the path using Javascript (in a mouse event handler).
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="...initial path...">
<set attributeName="d" to="...new path..."
begin="matrice1.mouseover" end="matrice1.mouseout"/>
</path>
Demo:
<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 808 798" enable-background="new 0 0 800 798">
<a href="#" class="matrixSection matrixNav" onclick="animateMatrix(1)" id="matrice1">
<path clip-path="url(#SVGID_4_)" id="sec1" fill="#E7223B" d="M480.03,200.899l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066
v139.656C431.991,187.383,456.979,192.173,480.03,200.899">
<set attributeName="d" to="M480.03,200.899l68.21-175.566C509.431,10.447,450.037,0,405.989,0 l-0.106,187.383C431.991,187.383,456.979,192.173,480.03,200.899"
begin="matrice1.mouseover" end="matrice1.mouseout"/>
</path>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-miterlimit="10" d="M480.03,200.899
l50.842-130.106c-38.81-14.886-80.941-23.066-124.989-23.066v139.656C431.991,187.383,456.979,192.173,480.03,200.899z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M475.407,212.728l4.623-11.829c-23.051-8.727-48.039-13.517-74.147-13.517
v12.695C430.36,200.078,453.789,204.56,475.407,212.728"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M475.407,212.728l4.623-11.829
c-23.051-8.727-48.039-13.517-74.147-13.517v12.695C430.36,200.078,453.789,204.56,475.407,212.728z"/>
<path clip-path="url(#SVGID_4_)" fill="#932826" d="M450.935,275.354l24.473-62.626c-21.618-8.166-45.047-12.649-69.524-12.649
v67.277C421.72,267.354,436.894,270.184,450.935,275.354"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M450.935,275.354l24.473-62.626
c-21.618-8.166-45.047-12.649-69.524-12.649v67.277C421.72,267.354,436.894,270.184,450.935,275.354z"/>
<path clip-path="url(#SVGID_4_)" fill="#E7223B" d="M447.761,283.476l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723
C420.599,276.078,434.704,278.69,447.761,283.476"/>
<path clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-miterlimit="10" d="M447.761,283.476
l3.174-8.122c-14.041-5.17-29.215-7.999-45.052-7.999v8.723C420.599,276.078,434.704,278.69,447.761,283.476z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="1.307" stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M455.612,229.054c0.185-0.848,1.027-1.384,1.874-1.198
c0.85,0.186,1.386,1.024,1.198,1.875c-0.187,0.849-1.024,1.386-1.873,1.199C455.963,230.743,455.424,229.904,455.612,229.054"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.478,231.918c1.02,0.324,1.645,1.38,1.41,2.45l-0.113,0.51l-0.049,0.224
l-0.777,3.525c-0.07,0.327-0.397,0.536-0.727,0.463c-0.328-0.072-0.535-0.397-0.464-0.725l0.806-3.658
c0.03-0.138,0.031-0.332-0.22-0.389c-0.175-0.039-0.251,0.137-0.282,0.255l-2.412,10.964c-0.104,0.473-0.568,0.771-1.044,0.668
c-0.474-0.105-0.772-0.572-0.669-1.044l1.39-6.319c0.012-0.07,0.027-0.257-0.188-0.305h-0.003
c-0.218-0.048-0.282,0.127-0.301,0.198l-1.389,6.319c-0.104,0.471-0.57,0.772-1.045,0.667c-0.474-0.104-0.771-0.573-0.666-1.043
l2.411-10.967c0.021-0.118,0.021-0.311-0.149-0.35c-0.252-0.054-0.331,0.124-0.362,0.261l-0.803,3.659
c-0.073,0.326-0.4,0.537-0.729,0.464c-0.328-0.072-0.534-0.399-0.463-0.726l0.775-3.527l0.05-0.222l0.112-0.512
c0.234-1.07,1.245-1.767,2.312-1.632c0.033,0.004,0.073,0.007,0.111,0.016l1.686,0.371l1.676,0.368
C458.404,231.891,458.438,231.905,458.478,231.918"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M446.297,227.854c0.176-0.805-0.327-1.601-1.134-1.777
c-0.805-0.177-1.602,0.333-1.776,1.137c-0.177,0.802,0.33,1.597,1.136,1.775C445.326,229.166,446.12,228.657,446.297,227.854"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.185,230.184l-2.075,3.672c0,0-0.374,0.674,0.198,0.989
c0.568,0.315,0.909-0.351,0.909-0.351l1.699-3.072c0,0,0.106-0.241,0.287-0.144c0.178,0.097,0.047,0.351,0.047,0.351l-3.053,5.788
l1.577,0.347l-0.969,4.41c-0.092,0.419,0.174,0.832,0.592,0.924c0.42,0.092,0.833-0.173,0.924-0.591l0.971-4.41l0.217,0.046
l0.214,0.045l-0.972,4.413c-0.091,0.419,0.173,0.832,0.593,0.923c0.422,0.095,0.835-0.173,0.926-0.59l0.971-4.411l1.578,0.348
l-0.341-6.533c0,0-0.014-0.285,0.188-0.3c0.202-0.012,0.2,0.252,0.2,0.252l0.252,3.502c0,0,0.031,0.745,0.678,0.699
c0.655-0.045,0.596-0.815,0.596-0.815l-0.342-4.206c0,0-0.181-1.23-1.139-1.442l-1.543-0.339l-1.542-0.34
C441.868,229.142,441.185,230.184,441.185,230.184"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M437.58,225.936c0.176-0.804-0.328-1.601-1.133-1.777
c-0.805-0.177-1.601,0.333-1.778,1.137c-0.177,0.803,0.332,1.599,1.136,1.775C436.608,227.249,437.402,226.741,437.58,225.936"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M432.469,228.268l-2.075,3.671c0,0-0.376,0.675,0.198,0.99
c0.568,0.316,0.908-0.348,0.908-0.348l1.699-3.072c0,0,0.107-0.243,0.286-0.146c0.18,0.097,0.047,0.351,0.047,0.351l-3.052,5.787
l1.578,0.347l-0.971,4.412c-0.091,0.417,0.178,0.831,0.595,0.923c0.417,0.092,0.831-0.174,0.924-0.592l0.969-4.41l0.219,0.047
l0.214,0.048l-0.973,4.411c-0.09,0.417,0.173,0.832,0.594,0.924c0.418,0.093,0.833-0.173,0.924-0.59l0.972-4.412l1.577,0.348
l-0.34-6.533c0,0-0.016-0.286,0.187-0.3c0.203-0.014,0.201,0.253,0.201,0.253l0.252,3.5c0,0,0.03,0.746,0.677,0.7
c0.654-0.046,0.595-0.816,0.595-0.816l-0.341-4.205c0,0-0.179-1.231-1.14-1.442l-1.54-0.339l-1.544-0.339
C433.151,227.225,432.469,228.268,432.469,228.268"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M449.394,237.072c0.669,0.146,1.327-0.277,1.476-0.947
c0.148-0.669-0.274-1.329-0.944-1.477c-0.669-0.146-1.331,0.274-1.477,0.945C448.299,236.263,448.722,236.926,449.394,237.072"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M445.659,240.196c-0.088,0.129-0.204,0.417,0.053,0.612
c0.298,0.228,0.556-0.054,0.556-0.054l1.118-1.954c0,0,0.144-0.117,0.116,0.029l-1.088,4.944h0.004
c-0.077,0.343,0.139,0.681,0.483,0.758c0.342,0.074,0.682-0.142,0.757-0.485l0.43-1.951c0,0,0.023-0.284,0.249-0.235
c0.221,0.049,0.126,0.318,0.126,0.318l-0.429,1.949c-0.076,0.345,0.143,0.684,0.486,0.758c0.343,0.076,0.684-0.14,0.759-0.483
l1.088-4.945c0.028-0.144,0.085-0.024,0.085-0.024l0.2,1.55c0,0,0.082,0.693,0.145,0.737c0.212,0.149,0.505,0.098,0.657-0.117
c0.097-0.137,0.108-0.308,0.044-0.454l0.008-0.002c-0.008-0.049-0.354-2.074-0.385-2.351c-0.099-0.857-0.595-0.96-1.072-1.079
c-0.478-0.118-0.766-0.169-0.766-0.169s-0.303-0.079-0.942-0.201c-0.635-0.118-0.903,0.163-1.992,1.799
c-0.158,0.236-0.677,0.997-0.692,1.047L445.659,240.196z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M424.761,222.271c0.188-0.849-0.35-1.688-1.2-1.876
c-0.847-0.187-1.686,0.351-1.871,1.201c-0.188,0.847,0.346,1.689,1.195,1.874C423.732,223.656,424.574,223.119,424.761,222.271"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M420.961,223.667c-1.065-0.135-2.075,0.563-2.311,1.632l-0.112,0.509
l-0.048,0.224l-0.777,3.526c-0.07,0.33,0.137,0.654,0.467,0.728c0.329,0.071,0.655-0.135,0.727-0.464l0.805-3.658
c0.029-0.139,0.11-0.315,0.361-0.258c0.174,0.038,0.167,0.229,0.15,0.347l-2.411,10.966c-0.104,0.473,0.191,0.941,0.667,1.045
c0.474,0.104,0.939-0.197,1.044-0.668l1.391-6.32c0.018-0.069,0.08-0.243,0.299-0.196c0.218,0.048,0.204,0.234,0.193,0.305
l-1.392,6.318c-0.103,0.472,0.195,0.942,0.667,1.047c0.473,0.103,0.939-0.199,1.046-0.669l2.411-10.967
c0.031-0.116,0.109-0.29,0.282-0.254c0.25,0.056,0.248,0.25,0.219,0.389l-0.805,3.658c-0.072,0.326,0.137,0.653,0.465,0.726
c0.329,0.073,0.654-0.137,0.727-0.465l0.775-3.524l0.049-0.225l0.111-0.51c0.236-1.07-0.388-2.127-1.412-2.45
c-0.033-0.012-0.068-0.023-0.11-0.035l-1.682-0.371l-1.679-0.368C421.037,223.673,420.996,223.671,420.961,223.667"/>
<line clip-path="url(#SVGID_4_)" fill="none" stroke="#FFFFFF" stroke-width="1.307" stroke-linecap="round" stroke-miterlimit="10" x1="418.099" y1="230.292" x2="415.143" y2="237.227"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M425.78,231.214c-0.054-0.143-0.172-0.256-0.328-0.289
c-0.244-0.053-0.484,0.101-0.538,0.344c-0.016,0.071,0,0.202,0,0.202l0.735,2.477c0,0,0.04,0.17,0.01,0.309l-1.044,4.745h0.005
c-0.074,0.333,0.133,0.656,0.465,0.728c0.33,0.074,0.652-0.134,0.726-0.464l0.412-1.875c0,0,0.025-0.27,0.238-0.225
c0.213,0.048,0.121,0.305,0.121,0.305l-0.411,1.875c-0.074,0.33,0.137,0.654,0.467,0.727c0.329,0.071,0.656-0.135,0.729-0.465
l1.045-4.747c0.029-0.14,0.137-0.275,0.137-0.275l1.578-1.792c0,0,0.202-0.262,0.218-0.332c0.054-0.242-0.101-0.484-0.344-0.538
c-0.162-0.036-0.315,0.02-0.42,0.125l-0.005-0.003c-0.042,0.022-0.829,0.906-1.055,1.049c-0.243,0.158-0.413,0.096-0.413,0.096
l-0.737-0.163l-0.732-0.161c0,0-0.183-0.016-0.335-0.259c-0.148-0.229-0.488-1.358-0.518-1.397L425.78,231.214z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M427.538,232.267c0.671,0.146,1.33-0.276,1.479-0.947
c0.147-0.669-0.274-1.329-0.944-1.477c-0.67-0.146-1.329,0.274-1.477,0.945C426.445,231.457,426.87,232.12,427.538,232.267"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="427.168,233.967 428.316,235.267 428.438,237.805 426.421,237.361
424.399,236.917 425.577,234.664 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="456.941,77.504 456.98,77.504 456.98,99.654 461.847,99.654
461.847,70.718 457.963,70.718 453.481,75.967 453.481,81.045 453.524,81.045 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="436.893,124.923 436.893,130.997 435.522,130.997 435.522,121.33
437.118,121.33 438.872,126.875 438.872,121.33 440.227,121.33 440.227,130.997 438.801,130.997 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.151,128.501v-4.675c0-1.512,0.741-2.61,2.45-2.61
c1.728,0,2.468,1.098,2.468,2.61v4.675c0,1.498-0.74,2.611-2.468,2.611C441.893,131.112,441.151,130,441.151,128.501
M444.445,128.759v-5.189c0-0.583-0.259-0.998-0.844-0.998c-0.568,0-0.824,0.415-0.824,0.998v5.189
c0,0.585,0.256,0.997,0.824,0.997C444.187,129.756,444.445,129.344,444.445,128.759"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M435.522,134.873h2.409c1.64,0,2.238,0.813,2.238,2.167v2.038
c0,1.354-0.599,2.181-2.238,2.181h-0.785v3.28h-1.624V134.873z M437.146,136.198v3.807h0.602c0.555,0,0.795-0.271,0.795-0.799
v-2.224c0-0.527-0.24-0.784-0.795-0.784H437.146z"/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M441.01,142.043v-4.675c0-1.512,0.741-2.609,2.451-2.609
c1.726,0,2.467,1.098,2.467,2.609v4.675c0,1.499-0.741,2.608-2.467,2.608C441.751,144.651,441.01,143.542,441.01,142.043
M444.304,142.301v-5.19c0-0.585-0.259-0.998-0.843-0.998c-0.569,0-0.826,0.413-0.826,0.998v5.19c0,0.585,0.257,0.997,0.826,0.997
C444.045,143.298,444.304,142.886,444.304,142.301"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="451.772,134.872 449.933,144.538 448.165,144.538 446.324,134.872
447.98,134.872 449.091,141.617 449.104,141.617 450.246,134.872 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="452.44,134.872 456.319,134.872 456.319,136.197 454.067,136.197
454.067,138.964 455.678,138.964 455.678,140.274 454.067,140.274 454.067,143.213 456.319,143.213 456.319,144.538
452.44,144.538 "/>
<path clip-path="url(#SVGID_4_)" fill="#FFFFFF" d="M458.813,140.105v4.434h-1.627v-9.667h2.369c1.638,0,2.237,0.813,2.237,2.167
v1.239c0,1.042-0.372,1.655-1.299,1.869l1.555,4.392h-1.711L458.813,140.105z M458.813,136.198v3.008h0.542
c0.555,0,0.798-0.285,0.798-0.798v-1.426c0-0.527-0.243-0.784-0.798-0.784H458.813z"/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="462.347,134.872 466.669,134.872 466.669,136.197 465.327,136.197
465.327,144.538 463.688,144.538 463.688,136.197 462.347,136.197 "/>
<polygon clip-path="url(#SVGID_4_)" fill="#FFFFFF" points="470.586,140.86 470.586,144.538 468.963,144.538 468.963,140.86
467.151,134.872 468.85,134.872 469.832,138.535 469.844,138.535 470.83,134.872 472.383,134.872 "/>
</a>
</svg>
Related
SVG does not load on firefox
The svg image loads on all other browsers
Its not loading on Firefox
I cannot find the code on the DOM.
I am serving page from Tomcat 9.0.34
<kendo-grid grid-options="gridOptions">
<img
src="common/svg/Plain-HedvigLogo.svg"
height="150"
width="100"/>
</kendo-grid>
Plain-Logo.svg
This is the logo svg file that is supposed to appear on the browser.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, 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 459.2 602.7" style="enable-background:new 0 0 459.2 602.7;" class="add-new-placeholder" xml:space="preserve">
<style type="text/css">
.st0{fill:#8496A1;}
.st1{fill:#476273;}
.st2{fill:#061A28;}
.st3{fill:#082335;}
.st4{fill:#FFA4B4;}
.st5{fill:#FF778F;}
.st6{fill:#FF4A6A;}
.st7{fill:#C53953;}
.st8{fill:#841F37;}
.st9{fill:#922A3E;}
.st10{fill:#0B2E44;}
</style>
<g>
<path class="st0" d="M177.9,125.8h-51.7V74.1h48.1c2,0,3.6,1.6,3.6,3.6V125.8z"/>
</g>
<g>
<path class="st1" d="125.8z"/>
<rect x="126.2" y="125.8" class="st1" width="51.7" height="51.7"/>
</g>
<g>
<rect x="126.2" y="280.9" class="st2" width="51.7" height="51.7"/>
<path class="st2" d="1.7V384.3z"/>
</g>
<g>
<rect x="74.5" y="177.5" class="st3" width="51.7" height="51.7"/>
<rect x="126.2" y="229.2" class="st3" width="51.7" height="51.7"/>
<rect x="74.5" y="280.9" class="st3" width="51.7" height="51.7"/>
<path class="st3" d=",176.3,384.3,174.3,384.3z"/>
</g>
<g>
<path class="st4" d="6,3.6,3.6V74.1z"/>
</g>
<g>
<path class="st5" d="3.6-3.6H333V74.1z"/>
<rect x="281.3" y="125.8" class="st5" width="51.7" height="51.7"/>
<rect x="333" y="74.1" class="st5" width="51.7" height="51.7"/>
</g>
<g>
<rect x="281.3" y="177.5" class="st6" width="51.7" height="51.7"/>
<rect x="333" y="229.2" class="st6" width="51.7" height="51.7"/>
</g>
<g>
<rect x="229.6" y="177.5" class="st7" width="51.7" height="51.7"/>
<rect x="333" y="177.5" class="st7" width="51.7" height="51.7"/>
<rect x="281.3" y="229.2" class="st7" width="51.7" height="51.7"/>
<rect x="333" y="280.9" class="st7" width="51.7" height="51.7"/>
</g>
<g>
<path class="st8" d="3.6-3.6v-48.1H333V384.3z"/>
</g>
<g>
<rect x="177.9" y="177.5" class="st9" width="51.7" height="51.7"/>
<rect x="229.6" y="229.2" class="st9" width="51.7" height="51.7"/>
<rect x="281.3" y="280.9" class="st9" width="51.7" height="51.7"/>
<path class="st9" d="M381.1,384.3H333v-51.7h51.784.3,381.1,384.3z"/>
</g>
</svg>
The svg image loads on all other browsers
Its not loading on Firefox
I cannot even find the code on the DOM.
You can't find svg code in DOM if you are using its as IMG <img src="common/svg/Plain-Logo.svg" style="width:150px; height:100px;" /> Please check your SVG file directly open with Firefox and check below, check SVG file view-box Image location floating issue Open SVG file direct in Firefox
Animating SVG with CSS ideas?
I'm working on some animation where I first create the svg files in Illustrator then i'm trying to animate them with css or some library ( anime.js) .
I run in to a problem where I don't know how to hide the code and make it visible only in the screen.
#keyframes scrolling {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-400px);
}
}
.code {
animation: scrolling 5s linear infinite;
}
/* colors */
body{
display: flex;
justify-content: center;
background-color: #111116;
}
.st0 {
opacity: 0.17;
}
.st1 {
fill: #56aeec;
}
.st2 {
fill: #2c65cc;
}
.st3 {
fill: #2984d6;
}
.st4 {
fill: #ccccff;
}
.st5 {
fill: #8dfcff;
}
.st6 {
fill: #38e0eb;
}
.st7 {
fill: #e0fa09;
}
.st8 {
fill: #ff49a5;
}
.st9 {
fill: #ff3333;
}
.st10 {
fill: #00ff66;
}
.st11 {
fill: #ff6666;
}
.st12 {
fill: #ff66cc;
}
<svg width="180" height="375" viewBox="0 0 180 375">
<g class="code">
<path class="st4" d="M107.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C108.8,313.1,108.3,313.6,107.7,313.6z"/>
<path class="st5" d="M161,319.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C162.1,319.1,161.6,319.6,161,319.6z"/>
<path class="st4" d="M51.7,319.6H36.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,319.1,52.3,319.6,51.7,319.6z"/>
<path class="st4" d="M134.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C135.8,313.1,135.3,313.6,134.7,313.6z"/>
<path class="st5" d="M120.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C121.8,313.1,121.3,313.6,120.7,313.6z"/>
<path class="st5" d="M147.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C148.8,313.1,148.3,313.6,147.7,313.6z"/>
<path class="st4" d="M160.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C161.8,313.1,161.3,313.6,160.7,313.6z"/>
<path class="st6" d="M51.7,313.6H16.7c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,313.1,52.3,313.6,51.7,313.6z"/>
<path class="st5" d="M95.6,313.6H60.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C96.7,313.1,96.2,313.6,95.6,313.6z"/>
<path class="st4" d="M28.6,319.6H16.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h11.9c0.6,0,1.2,0.5,1.2,1.2l0,0C29.7,319.1,29.2,319.6,28.6,319.6z"/>
<path class="st6" d="M25.2,330.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,329.8,26,330.5,25.2,330.5z"/>
<path class="st6" d="M25.2,337.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,336.8,26,337.5,25.2,337.5z"/>
<path class="st6" d="M25.2,344.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,343.8,26,344.5,25.2,344.5z"/>
<path class="st7" d="M35.2,351.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,350.8,36,351.5,35.2,351.5z"/>
<path class="st8" d="M35.2,358.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,357.8,36,358.5,35.2,358.5z"/>
<path class="st9" d="M35.2,365.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,364.8,36,365.5,35.2,365.5z"/>
<path class="st9" d="M60.2,330.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,329.8,61,330.5,60.2,330.5z"/>
<path class="st8" d="M60.2,337.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,336.8,61,337.5,60.2,337.5z"/>
<path class="st7" d="M60.2,344.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,343.8,61,344.5,60.2,344.5z"/>
<path class="st6" d="M60.2,351.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,350.8,61,351.5,60.2,351.5z"/>
<path class="st6" d="M60.2,358.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,357.8,61,358.5,60.2,358.5z"/>
<path class="st6" d="M60.2,365.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,364.8,61,365.5,60.2,365.5z"/>
<path class="st6" d="M92.2,330.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,329.8,93,330.5,92.2,330.5z"/>
<path class="st6" d="M92.2,337.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,336.8,93,337.5,92.2,337.5z"/>
<path class="st6" d="M92.2,344.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,343.8,93,344.5,92.2,344.5z"/>
<path class="st7" d="M82.2,351.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,350.8,83,351.5,82.2,351.5z"/>
<path class="st8" d="M82.2,358.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,357.8,83,358.5,82.2,358.5z"/>
<path class="st9" d="M82.2,365.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,364.8,83,365.5,82.2,365.5z"/>
<path class="st9" d="M117.2,330.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,329.8,118,330.5,117.2,330.5z"/>
<path class="st8" d="M117.2,337.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,336.8,118,337.5,117.2,337.5z"/>
<path class="st7" d="M117.2,344.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,343.8,118,344.5,117.2,344.5z"/>
<path class="st6" d="M117.2,351.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,350.8,118,351.5,117.2,351.5z"/>
<path class="st6" d="M117.2,358.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,357.8,118,358.5,117.2,358.5z"/>
<path class="st6" d="M117.2,365.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,364.8,118,365.5,117.2,365.5z"/>
<path class="st10" d="M156,329h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,328.7,156.4,329,156,329z"/>
<path class="st8" d="M156,334.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,334.6,156.4,334.9,156,334.9z"/>
<path class="st10" d="M156,340.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,340.6,156.4,340.9,156,340.9z"/>
<path class="st7" d="M156,346.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,346.5,156.4,346.8,156,346.8z"/>
<path class="st10" d="M156,352.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,352.5,156.4,352.8,156,352.8z"/>
<path class="st9" d="M156,358.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,358.4,156.4,358.7,156,358.7z"/>
<path class="st10" d="M156,364.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,364.4,156.4,364.7,156,364.7z"/>
<path class="st9" d="M35.2,371.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,370.8,36,371.5,35.2,371.5z"/>
<path class="st6" d="M60.2,371.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,370.8,61,371.5,60.2,371.5z"/>
<path class="st9" d="M82.2,371.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,370.8,83,371.5,82.2,371.5z"/>
<path class="st6" d="M117.2,371.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,370.8,118,371.5,117.2,371.5z"/>
<path class="st10" d="M156,370.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,370.4,156.4,370.7,156,370.7z"/>
<path class="st5" d="M126,224.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C127.1,224.1,126.6,224.6,126,224.6z"/>
<path class="st6" d="M75.8,217.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,216.8,76.7,217.5,75.8,217.5z"/>
<path class="st6" d="M21.7,224.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,224.1,22.3,224.6,21.7,224.6z"/>
<path class="st7" d="M64.6,231H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,230.7,65,231,64.6,231z"/>
<path class="st7" d="M64.6,236.9H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,236.6,65,236.9,64.6,236.9z"/>
<path class="st7" d="M64.6,242.8H16.2c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7v0C65.3,242.4,65,242.8,64.6,242.8z"/>
<path class="st10" d="M64.6,248.6H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,248.3,65,248.6,64.6,248.6z"/>
<path class="st7" d="M23.6,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C24.3,254.2,23.9,254.5,23.6,254.5z"/>
<path class="st7" d="M36.4,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C37.2,254.2,36.8,254.5,36.4,254.5z"/>
<path class="st7" d="M49.3,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C50.1,254.2,49.7,254.5,49.3,254.5z"/>
<path class="st7" d="M62.2,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C62.9,254.2,62.6,254.5,62.2,254.5z"/>
<path class="st7" d="M75.1,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C75.8,254.2,75.5,254.5,75.1,254.5z"/>
<path class="st7" d="M88,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H88c0.4,0,0.7,0.3,0.7,0.7l0,0C88.7,254.2,88.4,254.5,88,254.5z"/>
<path class="st7" d="M64.6,260.4H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,260.1,65,260.4,64.6,260.4z"/>
<path class="st11" d="M164.1,235.8h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,235.4,164.7,235.8,164.1,235.8z"/>
<path class="st11" d="M130.7,242.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,242.2,131.3,242.7,130.7,242.7z"/>
<path class="st11" d="M164.1,242.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,242.2,164.7,242.7,164.1,242.7z"/>
<path class="st7" d="M164.1,260.9h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,260.5,164.7,260.9,164.1,260.9z"/>
<path class="st10" d="M164.1,266.2h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,265.7,164.7,266.2,164.1,266.2z"/>
<path class="st5" d="M30.9,289.1H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,288.6,31.4,289.1,30.9,289.1z"/>
<path class="st5" d="M30.9,285H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,284.5,31.4,285,30.9,285z"/>
<path class="st5" d="M30.9,280.8H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,280.4,31.4,280.8,30.9,280.8z"/>
<path class="st5" d="M30.9,276.7H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,276.3,31.4,276.7,30.9,276.7z"/>
<path class="st10" d="M53.3,276.7H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,276.3,53.9,276.7,53.3,276.7z"/>
<path class="st10" d="M43.3,285H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,284.5,43.9,285,43.3,285z"/>
<path class="st10" d="M53.3,280.8H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,280.4,53.9,280.8,53.3,280.8z"/>
<path class="st10" d="M43.3,289.1H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,288.6,43.9,289.1,43.3,289.1z"/>
<path class="st10" d="M62.3,285H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,284.5,62.9,285,62.3,285z"/>
<path class="st10" d="M62.3,289.1H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,288.6,62.9,289.1,62.3,289.1z"/>
<path class="st10" d="M71.3,276.7H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,276.3,71.9,276.7,71.3,276.7z"/>
<path class="st10" d="M71.3,280.8H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,280.4,71.9,280.8,71.3,280.8z"/>
<path class="st11" d="M130.7,247.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,247.2,131.3,247.7,130.7,247.7z"/>
<path class="st11" d="M164.1,247.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,247.2,164.7,247.7,164.1,247.7z"/>
<path class="st8" d="M134,276h-30c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h30c0.4,0,0.7,0.3,0.7,0.7l0,0C134.7,275.7,134.4,276,134,276z"/>
<path class="st7" d="M163.6,280.9h-43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h43.2c0.4,0,0.7,0.3,0.7,0.7l0,0C164.3,280.6,164,280.9,163.6,280.9z"/>
<path class="st8" d="M143.2,284.8h-39c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h39c0.4,0,0.7,0.3,0.7,0.7l0,0C143.9,284.4,143.6,284.8,143.2,284.8z"/>
<path class="st8" d="M162.7,288.6h-35.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h35.2c0.4,0,0.7,0.3,0.7,0.7l0,0C163.4,288.3,163.1,288.6,162.7,288.6z"/>
<path class="st8" d="M164,271.4h-59.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H164c0.4,0,0.7,0.3,0.7,0.7l0,0C164.7,271.1,164.4,271.4,164,271.4z"/>
<path class="st4" d="M21.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,137.1,22.3,137.6,21.7,137.6z"/>
<path class="st5" d="M160,144.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C161.1,144.1,160.6,144.6,160,144.6z"/>
<path class="st6" d="M75.8,151.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,150.8,76.7,151.5,75.8,151.5z"/>
<path class="st6" d="M48.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,144.1,49.3,144.6,48.7,144.6z"/>
<path class="st4" d="M48.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,137.1,49.3,137.6,48.7,137.6z"/>
<path class="st5" d="M34.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,137.1,35.3,137.6,34.7,137.6z"/>
<path class="st5" d="M61.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C62.8,137.1,62.3,137.6,61.7,137.6z"/>
<path class="st4" d="M74.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C75.8,137.1,75.3,137.6,74.7,137.6z"/>
<path class="st6" d="M111.6,137.6H80.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.9c0.6,0,1.2,0.5,1.2,1.2l0,0C112.7,137.1,112.2,137.6,111.6,137.6z"/>
<path class="st5" d="M159.6,137.6h-34.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,137.1,160.2,137.6,159.6,137.6z"/>
<path class="st6" d="M34.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,144.1,35.3,144.6,34.7,144.6z"/>
<path class="st8" d="M75.8,157.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,156.8,76.7,157.5,75.8,157.5z"/>
<path class="st6" d="M34.2,164.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,163.8,35,164.5,34.2,164.5z"/>
<path class="st6" d="M34.2,171.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,170.8,35,171.5,34.2,171.5z"/>
<path class="st6" d="M34.2,178.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,177.8,35,178.5,34.2,178.5z"/>
<path class="st6" d="M34.2,185.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,184.8,35,185.5,34.2,185.5z"/>
<path class="st6" d="M34.2,192.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,191.8,35,192.5,34.2,192.5z"/>
<path class="st5" d="M159.6,163.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,163.3,160.2,163.9,159.6,163.9z"/>
<path class="st12" d="M59.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,170.3,60.2,170.9,59.6,170.9z"/>
<path class="st12" d="M73.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,170.3,74.2,170.9,73.6,170.9z"/>
<path class="st5" d="M159.6,177.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,177.3,160.2,177.9,159.6,177.9z"/>
<path class="st11" d="M59.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,184.3,60.2,184.9,59.6,184.9z"/>
<path class="st11" d="M73.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,184.3,74.2,184.9,73.6,184.9z"/>
<path class="st5" d="M159.6,191.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,191.3,160.2,191.9,159.6,191.9z"/>
<path class="st7" d="M59.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,198.3,60.2,198.9,59.6,198.9z"/>
<path class="st7" d="M73.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,198.3,74.2,198.9,73.6,198.9z"/>
<path class="st9" d="M34.2,199.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,198.8,35,199.5,34.2,199.5z"/>
<path class="st11" d="M110.6,184.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.6c0.6,0,1.2,0.5,1.2,1.2l0,0C111.7,184.3,111.2,184.9,110.6,184.9z"/>
<path class="st7" d="M87.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C88.7,198.3,88.2,198.9,87.6,198.9z"/>
<path class="st7" d="M101.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C102.7,198.3,102.2,198.9,101.6,198.9z"/>
<path class="st12" d="M117.6,170.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h37.6c0.6,0,1.2,0.5,1.2,1.2l0,0C118.7,170.3,118.2,170.9,117.6,170.9z"/>
<path class="st10" d="M159.1,170.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,170.3,159.7,170.9,159.1,170.9z"/>
<circle class="st9" cx="17.6" cy="128.7" r="1.9"/>
<circle class="st7" cx="25.2" cy="128.7" r="1.9"/>
<circle class="st10" cx="32.8" cy="128.7" r="1.9"/>
<path class="st10" d="M159.1,184.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,184.3,159.7,184.9,159.1,184.9z"/>
<path class="st10" d="M159.1,198.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,198.3,159.7,198.9,159.1,198.9z"/>
<path class="st7" d="M75,130H43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H75c0.4,0,0.7,0.3,0.7,0.7l0,0C75.7,129.7,75.4,130,75,130z"/>
<path class="st7" d="M112,130H80.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H112c0.4,0,0.7,0.3,0.7,0.7l0,0C112.7,129.7,112.4,130,112,130z"/>
</g>
<g class="screen">
<g class="st0">
<polygon class="st1" points="172.2,71.1 172.2,53.5 118.6,107.1 136.2,107.1"/>
<polygon class="st1" points="79.9,107.1 172.2,14.8 172.2,8.7 131.2,8.7 32.8,107.1"/>
<polygon class="st1" points="6,51.5 6,91.3 88.6,8.7 48.8,8.7"/>
</g>
<path class="st2" d="M175.2,123.9H5c-2.8,0-5-2.3-5-5v-6.2c0-2.8,2.3-5,5-5h170.1c2.8,0,5,2.3,5,5v6.2C180.2,121.6,178,123.9,175.2,123.9z"/>
<path class="st3" d="M175.2,0H5C2.3,0,0,2.3,0,5v105.2h180.2V5C180.2,2.3,178,0,175.2,0z M172.2,107.1H6V8.7h166.2V107.1z"/>
</g>
</svg>
I'm able to modify the SVG and I'm open for any ideas.
Link to my jsfiddle
Add svg into a div and set the height and overflow:hidden.
#keyframes scrolling {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-400px);
}
}
.code {
animation: scrolling 5s linear infinite;
}
.svg-container {
height:124px;
width:180px;
overflow:hidden;
}
/* colors */
body{
display: flex;
justify-content: center;
background-color: #111116;
}
.st0 {
opacity: 0.17;
}
.st1 {
fill: #56aeec;
}
.st2 {
fill: #2c65cc;
}
.st3 {
fill: #2984d6;
}
.st4 {
fill: #ccccff;
}
.st5 {
fill: #8dfcff;
}
.st6 {
fill: #38e0eb;
}
.st7 {
fill: #e0fa09;
}
.st8 {
fill: #ff49a5;
}
.st9 {
fill: #ff3333;
}
.st10 {
fill: #00ff66;
}
.st11 {
fill: #ff6666;
}
.st12 {
fill: #ff66cc;
}
<div class="svg-container">
<svg width="180" height="375" viewBox="0 0 180 375">
<g class="code">
<path class="st4" d="M107.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C108.8,313.1,108.3,313.6,107.7,313.6z"/>
<path class="st5" d="M161,319.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C162.1,319.1,161.6,319.6,161,319.6z"/>
<path class="st4" d="M51.7,319.6H36.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,319.1,52.3,319.6,51.7,319.6z"/>
<path class="st4" d="M134.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C135.8,313.1,135.3,313.6,134.7,313.6z"/>
<path class="st5" d="M120.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C121.8,313.1,121.3,313.6,120.7,313.6z"/>
<path class="st5" d="M147.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C148.8,313.1,148.3,313.6,147.7,313.6z"/>
<path class="st4" d="M160.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C161.8,313.1,161.3,313.6,160.7,313.6z"/>
<path class="st6" d="M51.7,313.6H16.7c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,313.1,52.3,313.6,51.7,313.6z"/>
<path class="st5" d="M95.6,313.6H60.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C96.7,313.1,96.2,313.6,95.6,313.6z"/>
<path class="st4" d="M28.6,319.6H16.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h11.9c0.6,0,1.2,0.5,1.2,1.2l0,0C29.7,319.1,29.2,319.6,28.6,319.6z"/>
<path class="st6" d="M25.2,330.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,329.8,26,330.5,25.2,330.5z"/>
<path class="st6" d="M25.2,337.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,336.8,26,337.5,25.2,337.5z"/>
<path class="st6" d="M25.2,344.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,343.8,26,344.5,25.2,344.5z"/>
<path class="st7" d="M35.2,351.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,350.8,36,351.5,35.2,351.5z"/>
<path class="st8" d="M35.2,358.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,357.8,36,358.5,35.2,358.5z"/>
<path class="st9" d="M35.2,365.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,364.8,36,365.5,35.2,365.5z"/>
<path class="st9" d="M60.2,330.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,329.8,61,330.5,60.2,330.5z"/>
<path class="st8" d="M60.2,337.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,336.8,61,337.5,60.2,337.5z"/>
<path class="st7" d="M60.2,344.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,343.8,61,344.5,60.2,344.5z"/>
<path class="st6" d="M60.2,351.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,350.8,61,351.5,60.2,351.5z"/>
<path class="st6" d="M60.2,358.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,357.8,61,358.5,60.2,358.5z"/>
<path class="st6" d="M60.2,365.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,364.8,61,365.5,60.2,365.5z"/>
<path class="st6" d="M92.2,330.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,329.8,93,330.5,92.2,330.5z"/>
<path class="st6" d="M92.2,337.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,336.8,93,337.5,92.2,337.5z"/>
<path class="st6" d="M92.2,344.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,343.8,93,344.5,92.2,344.5z"/>
<path class="st7" d="M82.2,351.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,350.8,83,351.5,82.2,351.5z"/>
<path class="st8" d="M82.2,358.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,357.8,83,358.5,82.2,358.5z"/>
<path class="st9" d="M82.2,365.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,364.8,83,365.5,82.2,365.5z"/>
<path class="st9" d="M117.2,330.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,329.8,118,330.5,117.2,330.5z"/>
<path class="st8" d="M117.2,337.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,336.8,118,337.5,117.2,337.5z"/>
<path class="st7" d="M117.2,344.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,343.8,118,344.5,117.2,344.5z"/>
<path class="st6" d="M117.2,351.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,350.8,118,351.5,117.2,351.5z"/>
<path class="st6" d="M117.2,358.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,357.8,118,358.5,117.2,358.5z"/>
<path class="st6" d="M117.2,365.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,364.8,118,365.5,117.2,365.5z"/>
<path class="st10" d="M156,329h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,328.7,156.4,329,156,329z"/>
<path class="st8" d="M156,334.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,334.6,156.4,334.9,156,334.9z"/>
<path class="st10" d="M156,340.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,340.6,156.4,340.9,156,340.9z"/>
<path class="st7" d="M156,346.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,346.5,156.4,346.8,156,346.8z"/>
<path class="st10" d="M156,352.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,352.5,156.4,352.8,156,352.8z"/>
<path class="st9" d="M156,358.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,358.4,156.4,358.7,156,358.7z"/>
<path class="st10" d="M156,364.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,364.4,156.4,364.7,156,364.7z"/>
<path class="st9" d="M35.2,371.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,370.8,36,371.5,35.2,371.5z"/>
<path class="st6" d="M60.2,371.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,370.8,61,371.5,60.2,371.5z"/>
<path class="st9" d="M82.2,371.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,370.8,83,371.5,82.2,371.5z"/>
<path class="st6" d="M117.2,371.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,370.8,118,371.5,117.2,371.5z"/>
<path class="st10" d="M156,370.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,370.4,156.4,370.7,156,370.7z"/>
<path class="st5" d="M126,224.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C127.1,224.1,126.6,224.6,126,224.6z"/>
<path class="st6" d="M75.8,217.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,216.8,76.7,217.5,75.8,217.5z"/>
<path class="st6" d="M21.7,224.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,224.1,22.3,224.6,21.7,224.6z"/>
<path class="st7" d="M64.6,231H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,230.7,65,231,64.6,231z"/>
<path class="st7" d="M64.6,236.9H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,236.6,65,236.9,64.6,236.9z"/>
<path class="st7" d="M64.6,242.8H16.2c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7v0C65.3,242.4,65,242.8,64.6,242.8z"/>
<path class="st10" d="M64.6,248.6H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,248.3,65,248.6,64.6,248.6z"/>
<path class="st7" d="M23.6,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C24.3,254.2,23.9,254.5,23.6,254.5z"/>
<path class="st7" d="M36.4,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C37.2,254.2,36.8,254.5,36.4,254.5z"/>
<path class="st7" d="M49.3,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C50.1,254.2,49.7,254.5,49.3,254.5z"/>
<path class="st7" d="M62.2,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C62.9,254.2,62.6,254.5,62.2,254.5z"/>
<path class="st7" d="M75.1,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C75.8,254.2,75.5,254.5,75.1,254.5z"/>
<path class="st7" d="M88,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H88c0.4,0,0.7,0.3,0.7,0.7l0,0C88.7,254.2,88.4,254.5,88,254.5z"/>
<path class="st7" d="M64.6,260.4H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,260.1,65,260.4,64.6,260.4z"/>
<path class="st11" d="M164.1,235.8h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,235.4,164.7,235.8,164.1,235.8z"/>
<path class="st11" d="M130.7,242.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,242.2,131.3,242.7,130.7,242.7z"/>
<path class="st11" d="M164.1,242.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,242.2,164.7,242.7,164.1,242.7z"/>
<path class="st7" d="M164.1,260.9h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,260.5,164.7,260.9,164.1,260.9z"/>
<path class="st10" d="M164.1,266.2h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,265.7,164.7,266.2,164.1,266.2z"/>
<path class="st5" d="M30.9,289.1H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,288.6,31.4,289.1,30.9,289.1z"/>
<path class="st5" d="M30.9,285H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,284.5,31.4,285,30.9,285z"/>
<path class="st5" d="M30.9,280.8H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,280.4,31.4,280.8,30.9,280.8z"/>
<path class="st5" d="M30.9,276.7H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,276.3,31.4,276.7,30.9,276.7z"/>
<path class="st10" d="M53.3,276.7H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,276.3,53.9,276.7,53.3,276.7z"/>
<path class="st10" d="M43.3,285H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,284.5,43.9,285,43.3,285z"/>
<path class="st10" d="M53.3,280.8H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,280.4,53.9,280.8,53.3,280.8z"/>
<path class="st10" d="M43.3,289.1H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,288.6,43.9,289.1,43.3,289.1z"/>
<path class="st10" d="M62.3,285H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,284.5,62.9,285,62.3,285z"/>
<path class="st10" d="M62.3,289.1H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,288.6,62.9,289.1,62.3,289.1z"/>
<path class="st10" d="M71.3,276.7H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,276.3,71.9,276.7,71.3,276.7z"/>
<path class="st10" d="M71.3,280.8H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,280.4,71.9,280.8,71.3,280.8z"/>
<path class="st11" d="M130.7,247.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,247.2,131.3,247.7,130.7,247.7z"/>
<path class="st11" d="M164.1,247.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,247.2,164.7,247.7,164.1,247.7z"/>
<path class="st8" d="M134,276h-30c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h30c0.4,0,0.7,0.3,0.7,0.7l0,0C134.7,275.7,134.4,276,134,276z"/>
<path class="st7" d="M163.6,280.9h-43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h43.2c0.4,0,0.7,0.3,0.7,0.7l0,0C164.3,280.6,164,280.9,163.6,280.9z"/>
<path class="st8" d="M143.2,284.8h-39c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h39c0.4,0,0.7,0.3,0.7,0.7l0,0C143.9,284.4,143.6,284.8,143.2,284.8z"/>
<path class="st8" d="M162.7,288.6h-35.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h35.2c0.4,0,0.7,0.3,0.7,0.7l0,0C163.4,288.3,163.1,288.6,162.7,288.6z"/>
<path class="st8" d="M164,271.4h-59.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H164c0.4,0,0.7,0.3,0.7,0.7l0,0C164.7,271.1,164.4,271.4,164,271.4z"/>
<path class="st4" d="M21.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,137.1,22.3,137.6,21.7,137.6z"/>
<path class="st5" d="M160,144.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C161.1,144.1,160.6,144.6,160,144.6z"/>
<path class="st6" d="M75.8,151.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,150.8,76.7,151.5,75.8,151.5z"/>
<path class="st6" d="M48.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,144.1,49.3,144.6,48.7,144.6z"/>
<path class="st4" d="M48.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,137.1,49.3,137.6,48.7,137.6z"/>
<path class="st5" d="M34.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,137.1,35.3,137.6,34.7,137.6z"/>
<path class="st5" d="M61.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C62.8,137.1,62.3,137.6,61.7,137.6z"/>
<path class="st4" d="M74.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C75.8,137.1,75.3,137.6,74.7,137.6z"/>
<path class="st6" d="M111.6,137.6H80.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.9c0.6,0,1.2,0.5,1.2,1.2l0,0C112.7,137.1,112.2,137.6,111.6,137.6z"/>
<path class="st5" d="M159.6,137.6h-34.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,137.1,160.2,137.6,159.6,137.6z"/>
<path class="st6" d="M34.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,144.1,35.3,144.6,34.7,144.6z"/>
<path class="st8" d="M75.8,157.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,156.8,76.7,157.5,75.8,157.5z"/>
<path class="st6" d="M34.2,164.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,163.8,35,164.5,34.2,164.5z"/>
<path class="st6" d="M34.2,171.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,170.8,35,171.5,34.2,171.5z"/>
<path class="st6" d="M34.2,178.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,177.8,35,178.5,34.2,178.5z"/>
<path class="st6" d="M34.2,185.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,184.8,35,185.5,34.2,185.5z"/>
<path class="st6" d="M34.2,192.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,191.8,35,192.5,34.2,192.5z"/>
<path class="st5" d="M159.6,163.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,163.3,160.2,163.9,159.6,163.9z"/>
<path class="st12" d="M59.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,170.3,60.2,170.9,59.6,170.9z"/>
<path class="st12" d="M73.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,170.3,74.2,170.9,73.6,170.9z"/>
<path class="st5" d="M159.6,177.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,177.3,160.2,177.9,159.6,177.9z"/>
<path class="st11" d="M59.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,184.3,60.2,184.9,59.6,184.9z"/>
<path class="st11" d="M73.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,184.3,74.2,184.9,73.6,184.9z"/>
<path class="st5" d="M159.6,191.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,191.3,160.2,191.9,159.6,191.9z"/>
<path class="st7" d="M59.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,198.3,60.2,198.9,59.6,198.9z"/>
<path class="st7" d="M73.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,198.3,74.2,198.9,73.6,198.9z"/>
<path class="st9" d="M34.2,199.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,198.8,35,199.5,34.2,199.5z"/>
<path class="st11" d="M110.6,184.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.6c0.6,0,1.2,0.5,1.2,1.2l0,0C111.7,184.3,111.2,184.9,110.6,184.9z"/>
<path class="st7" d="M87.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C88.7,198.3,88.2,198.9,87.6,198.9z"/>
<path class="st7" d="M101.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C102.7,198.3,102.2,198.9,101.6,198.9z"/>
<path class="st12" d="M117.6,170.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h37.6c0.6,0,1.2,0.5,1.2,1.2l0,0C118.7,170.3,118.2,170.9,117.6,170.9z"/>
<path class="st10" d="M159.1,170.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,170.3,159.7,170.9,159.1,170.9z"/>
<circle class="st9" cx="17.6" cy="128.7" r="1.9"/>
<circle class="st7" cx="25.2" cy="128.7" r="1.9"/>
<circle class="st10" cx="32.8" cy="128.7" r="1.9"/>
<path class="st10" d="M159.1,184.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,184.3,159.7,184.9,159.1,184.9z"/>
<path class="st10" d="M159.1,198.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,198.3,159.7,198.9,159.1,198.9z"/>
<path class="st7" d="M75,130H43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H75c0.4,0,0.7,0.3,0.7,0.7l0,0C75.7,129.7,75.4,130,75,130z"/>
<path class="st7" d="M112,130H80.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H112c0.4,0,0.7,0.3,0.7,0.7l0,0C112.7,129.7,112.4,130,112,130z"/>
</g>
<g class="screen">
<g class="st0">
<polygon class="st1" points="172.2,71.1 172.2,53.5 118.6,107.1 136.2,107.1"/>
<polygon class="st1" points="79.9,107.1 172.2,14.8 172.2,8.7 131.2,8.7 32.8,107.1"/>
<polygon class="st1" points="6,51.5 6,91.3 88.6,8.7 48.8,8.7"/>
</g>
<path class="st2" d="M175.2,123.9H5c-2.8,0-5-2.3-5-5v-6.2c0-2.8,2.3-5,5-5h170.1c2.8,0,5,2.3,5,5v6.2C180.2,121.6,178,123.9,175.2,123.9z"/>
<path class="st3" d="M175.2,0H5C2.3,0,0,2.3,0,5v105.2h180.2V5C180.2,2.3,178,0,175.2,0z M172.2,107.1H6V8.7h166.2V107.1z"/>
</g>
</svg>
</div>
Why my SVG calling doesn't work?
I'm studying SVG files (beginning) but I can't make my SVG appear when I set <defs> tag! I mean.. If I call the SVG directly it works properly. Like this: <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="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514" xml:space="preserve"> <g> <rect class="bosta1" y="55.406" fill="#E8CF1E" stroke="#000000" stroke-miterlimit="10" width="163.514" height="137.838"/> <rect class="bosta2" x="62.162" fill="#E42326" stroke="#000000" stroke-miterlimit="10" width="44.811" height="263.514"/> </g> </svg> Fiddle: https://jsfiddle.net/sz0bkbdm/ But if I try to use refs I can't make the rects visible. Like this: <svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514" xml:space="preserve"> <defs> <g> <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> </g> </defs> </svg> MY CONTENT <svg> <use xlink:href="#mySvg"></use> </svg> Fiddle: https://jsfiddle.net/g1hdLy82/
You problem is here please follow this code <svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg"> <defs> <g> <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> </g> </defs> </svg> MY CONTENT <svg > <use xlink:href="#ret1"></use> <use xlink:href="#ret2"></use> </svg> or <svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg"> <defs> <g id="rec1"> <rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> <rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> </g> </defs> </svg> MY CONTENT <svg > <use xlink:href="#rec1"></use> </svg>
I guess you are exchanging <refs> with <defs>, since i have never heard of a <refs> tag before. UPDATE remove the wrong refs/defs, than it works! fiddle UPDATE #2 Well ok, than like so: <svg> <defs> <g id="toshow"> <rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/> <rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/> </g> </defs> </svg> <svg> <use xlink:href="#toshow"></use> </svg> FIDDLE UDDATE #3 Probably helpful.
You can try this:
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<defs>
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</defs>
</svg>
MY CONTENT
<svg>
<use xlink:href="#ret1"></use>
<use xlink:href="#ret2"></use>
</svg>
and the css is:
#mySvg { width:100px; height:auto; }
#ret1 { fill:green; stroke:red; }
#ret2 { fill:blue; stroke:white; }
rotate animation on selected part of the svg that contains paths
I have this picture of what my svg looks like (I created it with illustrator) what I want is to rotate animate the upper part circle line of the circle (it has 4 circle lines, lets say the number one circle line start from the bottom inside the circle) from left to right and next circle line of the upper circle line from right to left. Below is the code of my svg. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, 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="700px" height="700px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve"> <g> <g> <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54"/> <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54 C633.068,117.25,50.095,740.004,50.095,1498.942s582.974,1381.693,1325.536,1444.94"/> <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882 c742.562-63.251,1325.534-686.003,1325.534-1444.94S2367.63,117.25,1625.068,54"/> <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882"/> <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,54"/> </g> <g> <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1395.021"/> <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251h77.141 c-30.628-647.454-565.236-1162.983-1220.269-1162.983c-655.036,0-1189.644,515.529-1220.271,1162.983h77.142"/> <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251"/> <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633"/> <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633h-77.142 c30.627,647.452,565.235,1162.982,1220.271,1162.982c655.032,0,1189.641-515.53,1220.269-1162.982h-77.141"/> </g> <g id="XMLID_1_"> <g> <path fill="#00AEEF" d="M2903.798,1498.94c0,15.417-0.269,30.797-0.758,46.129h-122.333c0.551-15.308,0.831-30.688,0.831-46.129 c0-53.941-3.361-107.1-9.866-159.304l120.658-21.286C2899.959,1377.854,2903.798,1438.104,2903.798,1498.94z"/> <path fill="#00AEEF" d="M2779.937,1563.408h122.407c-3.338,74.248-12.422,147.519-27.228,219.505l-120.67-21.273 C2767.931,1697.185,2776.575,1630.98,2779.937,1563.408z"/> <path fill="#00AEEF" d="M2889.885,1300.158l-120.608,21.273c-9.341-67.121-23.914-132.591-43.28-195.995l115.327-41.972 C2863.281,1154.303,2879.48,1226.644,2889.885,1300.158z"/> <path fill="#00AEEF" d="M2750.558,1779.575l120.744,21.285c-15.674,71.474-36.983,141.65-63.893,210.214l-115.23-41.936 C2716.35,1908.095,2735.936,1844.764,2750.558,1779.575z"/> <path fill="#00AEEF" d="M2835.761,1065.97l-115.242,41.947c-20.784-64.688-46.568-127.15-76.913-186.922l106.39-61.436 c15.649,30.528,30.174,61.594,43.488,93.076C2809.267,989.937,2823.352,1027.727,2835.761,1065.97z"/> <path fill="#00AEEF" d="M2685.296,1986.146l115.303,41.972c-2.335,5.722-4.694,11.431-7.115,17.128 c-25.895,61.253-56.35,120.891-90.839,178.035l-106.317-61.375C2630.291,2105.972,2660.086,2047.238,2685.296,1986.146z"/> <path fill="#00AEEF" d="M2741.511,843.286l-106.329,61.387c-31.788-60.47-68.27-118.103-108.97-172.423l94.2-79.041 c15.1,19.977,29.686,40.309,43.672,61.008C2692.154,755.772,2718.024,798.93,2741.511,843.286z"/> <path fill="#00AEEF" d="M2586.693,2177.519l106.366,61.411c-9.378,15.099-19.036,30.026-28.976,44.747 c-30.639,45.334-64.052,89.017-99.874,130.622l-94.104-78.968C2512.824,2285.877,2551.837,2233.122,2586.693,2177.519z"/> <path fill="#00AEEF" d="M2609.25,638.648l-94.152,79.004c-42.008-54.442-88.296-105.412-138.349-152.421l79.09-94.25 c12.52,11.639,24.831,23.499,36.897,35.565C2534.231,548.041,2573.196,592.263,2609.25,638.648z"/> <path fill="#00AEEF" d="M2458.027,2349.134l94.128,78.992c-19.171,21.677-38.989,42.779-59.419,63.208 c-36.151,36.152-74.37,70.41-114.3,102.467l-78.98-94.116C2356.479,2454.058,2409.551,2403.687,2458.027,2349.134z"/> <path fill="#00AEEF" d="M2442.305,458.572l-79.028,94.176c-56.374-51.459-117.357-97.954-182.24-138.801l61.435-106.402 c14.378,8.974,28.585,18.192,42.608,27.667C2340.193,372.452,2392.863,413.788,2442.305,458.572z"/> <path fill="#00AEEF" d="M2285.055,2511.043l79.004,94.152c-25.687,20.087-52.046,39.281-78.979,57.486 c-33.084,22.349-67.182,43.304-102.1,62.768l-61.362-106.28C2178.933,2587.26,2233.546,2551.07,2285.055,2511.043z"/> <path fill="#00AEEF" d="M2226.834,297.935l-61.387,106.329c-58.696-35.785-120.486-66.986-184.856-93.113l41.96-115.254 c8.057,3.24,16.089,6.517,24.109,9.903C2108.67,232.037,2169.029,262.919,2226.834,297.935z"/> <path fill="#00AEEF" d="M2105.528,2627.972l61.374,106.305c-39.196,21.188-79.358,40.518-120.242,57.805 c-25.626,10.845-51.483,20.87-77.562,30.112l-41.911-115.156C1988.929,2685.152,2048.506,2658.646,2105.528,2627.972z"/> <path fill="#00AEEF" d="M2005.471,189.172l-41.935,115.205c-64.053-24.917-130.586-44.833-199.125-59.247l21.273-120.67 C1860.459,139.902,1933.826,161.505,2005.471,189.172z"/> <path fill="#00AEEF" d="M1909.852,2713.04l41.923,115.181c-68.331,23.242-138.129,41.055-209.101,53.403l-21.261-120.597 C1786.002,2749.755,1848.954,2733.629,1909.852,2713.04z"/> <path fill="#00AEEF" d="M1767.7,120.866l-21.273,120.609c-67.438-13.167-136.747-21.029-207.486-23.131V96.023 C1616.318,98.089,1692.682,106.402,1767.7,120.866z"/> <path fill="#00AEEF" d="M1703.318,2764.06l21.261,120.584c-61.093,9.793-123.03,15.552-185.639,17.227v-122.32 C1594.69,2777.887,1649.561,2772.642,1703.318,2764.06z"/> <path fill="#00AEEF" d="M1520.602,2779.965v122.284c-6.749,0.086-13.498,0.146-20.247,0.146 c-68.135,0-135.525-4.816-201.961-14.377l21.273-120.585c59.039,8.362,119.362,12.703,180.688,12.703 C1507.116,2780.137,1513.864,2780.075,1520.602,2779.965z"/> <path fill="#00AEEF" d="M1520.602,95.644v122.284c-6.737-0.11-13.485-0.183-20.247-0.183c-76.375,0-151.199,6.736-223.931,19.61 l-21.273-120.597c80.374-14.146,162.239-21.273,245.204-21.273C1507.104,95.485,1513.864,95.546,1520.602,95.644z"/> <path fill="#00AEEF" d="M1301.512,2764.72l-21.261,120.572c-73.821-11.615-146.431-29.11-217.476-52.449l41.935-115.206 C1168.285,2738.336,1234.037,2754.156,1301.512,2764.72z"/> <path fill="#00AEEF" d="M1237.118,120.059l21.261,120.609c-71.473,13.718-140.843,33.401-207.584,58.501l-41.923-115.193 C1083.242,156.138,1159.458,134.792,1237.118,120.059z"/> <path fill="#00AEEF" d="M1087.301,2711.83l-41.911,115.168c-30.761-10.551-61.216-22.165-91.353-34.917 c-38.867-16.444-77.085-34.734-114.435-54.699l61.374-106.305C960.468,2662.706,1022.735,2689.774,1087.301,2711.83z"/> <path fill="#00AEEF" d="M991.73,190.529l41.935,115.206c-67.194,26.383-131.649,58.281-192.779,95.13L779.5,294.56 c56.093-33.621,114.545-63.379,174.538-88.76C966.544,200.518,979.113,195.432,991.73,190.529z"/> <path fill="#00AEEF" d="M884.838,2622.348l-61.362,106.28c-36.923-20.368-72.953-42.375-107.858-65.946 c-20.943-14.158-41.531-28.927-61.729-44.222l79.041-94.201C781.064,2560.374,831.814,2593.177,884.838,2622.348z"/> <path fill="#00AEEF" d="M763.826,304.097l61.411,106.354c-60.788,37.827-118.188,80.618-171.628,127.786l-78.98-94.127 c44.686-39.246,91.866-75.703,140.99-108.897C731.464,324.514,747.553,314.146,763.826,304.097z"/> <path fill="#00AEEF" d="M718.321,2513.121l-78.992,94.152c-46.128-35.884-90.105-74.664-131.368-115.939 c-11.859-11.858-23.511-23.938-34.954-36.225l94.262-79.103C613.899,2425.583,664.404,2471.455,718.321,2513.121z"/> <path fill="#00AEEF" d="M560.912,456.31l79.016,94.152c-47.241,42.889-91.254,89.262-131.673,138.679l-94.091-78.955 c29.55-36.079,60.873-70.715,93.798-103.64C525.15,489.356,542.829,472.607,560.912,456.31z"/> <path fill="#00AEEF" d="M554.774,2362.546l-94.189,79.041c-45.016-49.649-86.56-102.552-123.971-157.91 c-4.976-7.373-9.854-14.794-14.695-22.264l106.476-61.473C466.172,2257.525,508.474,2311.894,554.774,2362.546z"/> <path fill="#00AEEF" d="M402.622,624.454l94.127,78.979c-44.258,55.702-83.968,115.157-118.592,177.814l-106.28-61.362 c20.026-36.165,41.629-71.461,64.736-105.669C357.374,683.493,379.429,653.527,402.622,624.454z"/> <path fill="#00AEEF" d="M418.43,2184.512l-106.391,61.436c-40.297-63.979-75.483-131.307-104.825-200.702 c-0.379-0.88-0.734-1.76-1.101-2.641l115.364-41.996C348.876,2064.758,381.373,2126.218,418.43,2184.512z"/> <path fill="#00AEEF" d="M263.087,835.987l106.305,61.375c-33.291,62.34-61.582,127.737-84.322,195.652l-115.218-41.935 c11.175-33.169,23.633-65.996,37.363-98.443C223.976,912.999,242.657,874.047,263.087,835.987z"/> <path fill="#00AEEF" d="M314.375,1983.676l-115.267,41.959c-29.085-71.754-52.009-145.293-68.722-220.275l120.768-21.297 C266.84,1852.857,288.077,1919.563,314.375,1983.676z"/> <path fill="#00AEEF" d="M164.105,1068.513l115.267,41.948c-21.249,66.619-37.191,135.586-47.302,206.411l-120.597-21.261 C122.647,1218.477,140.191,1142.651,164.105,1068.513z"/> <path fill="#00AEEF" d="M247.206,1766.139l-120.695,21.286c-15.344-73.441-24.746-148.229-28.157-224.017h122.407 C224.208,1632.558,233.17,1700.277,247.206,1766.139z"/> <path fill="#00AEEF" d="M108.966,1313.791l120.622,21.273c-6.883,53.672-10.429,108.371-10.429,163.877 c0,15.441,0.281,30.821,0.831,46.129H97.657c-0.489-15.332-0.758-30.712-0.758-46.129 C96.899,1436.551,100.946,1374.773,108.966,1313.791z"/> </g> <g> </g> </g> <g> <path fill="#00AEEF" d="M714.827,655.783c11.458-10.68,23.14-21.121,35.024-31.334l-15.507-19.669 c-12.194,10.472-24.206,21.196-36.011,32.197L714.827,655.783z"/> <path fill="#00AEEF" d="M763.862,612.598c12.066-10.043,24.33-19.854,36.803-29.407l-14.468-20.471 c-12.806,9.794-25.414,19.873-37.839,30.211L763.862,612.598z"/> <path fill="#00AEEF" d="M624.686,749.812c10.139-11.834,20.502-23.47,31.103-34.881l-17.471-17.935 c-10.941,11.743-21.607,23.689-32.024,35.815L624.686,749.812z"/> <path fill="#00AEEF" d="M511.15,907.297c7.944-13.233,16.137-26.299,24.59-39.182l-20.097-15.006 c-8.707,13.253-17.127,26.691-25.289,40.292L511.15,907.297z"/> <path fill="#00AEEF" d="M583.821,800.284c9.433-12.346,19.11-24.493,29.024-36.44l-18.404-17.013 c-10.229,12.288-20.208,24.754-29.902,37.416L583.821,800.284z"/> <path fill="#00AEEF" d="M479.525,963.445c7.167-13.606,14.6-27.049,22.288-40.327l-20.789-13.89 c-7.907,13.66-15.561,27.478-22.923,41.47L479.525,963.445z"/> <path fill="#00AEEF" d="M451.192,1021.114c6.369-13.93,13.011-27.71,19.913-41.336l-21.417-12.742 c-7.096,14.013-13.917,28.188-20.468,42.518L451.192,1021.114z"/> <path fill="#00AEEF" d="M545.939,852.842c8.701-12.812,17.659-25.435,26.855-37.873l-19.293-16.045 c-9.482,12.794-18.696,25.771-27.639,38.928L545.939,852.842z"/> <path fill="#00AEEF" d="M924.925,500.173c13.651-7.895,27.481-15.517,41.478-22.862l-11.009-22.323 c-14.395,7.517-28.62,15.319-42.664,23.411L924.925,500.173z"/> <path fill="#00AEEF" d="M421.698,1026.322c-2.088,4.762-4.153,9.538-6.181,14.333c-49.052,115.971-78.764,237.712-88.737,363.029 h24.582c10.607-129.072,42.545-252.194,92.308-365.804L421.698,1026.322z"/> <path fill="#00AEEF" d="M2649.337,1594.199c-14.892,181.217-71.867,350.691-161.118,498.604l22.143,11.651 c28.249-47.074,53.238-96.199,74.821-147.227c49.051-115.972,78.764-237.713,88.736-363.028H2649.337z"/> <path fill="#00AEEF" d="M668.395,701.584c10.813-11.277,21.856-22.334,33.116-33.167l-16.5-18.813 c-5.772,5.546-11.508,11.143-17.184,16.817c-5.697,5.698-11.315,11.457-16.882,17.252L668.395,701.584z"/> <path fill="#00AEEF" d="M1094.746,393.312l8.554,23.185c14.823-5.455,29.793-10.602,44.893-15.458l-7.327-23.594 C1125.403,382.407,1110.029,387.696,1094.746,393.312z"/> <path fill="#00AEEF" d="M982.714,468.923c14.093-7.11,28.343-13.955,42.758-20.497l-9.788-22.779 c-14.826,6.697-29.476,13.704-43.964,20.984L982.714,468.923z"/> <path fill="#00AEEF" d="M1042.238,440.99c14.483-6.297,29.123-12.298,43.906-18.009l-8.56-23.2 c-11.896,4.584-23.742,9.346-35.523,14.328c-3.21,1.357-6.403,2.744-9.599,4.129L1042.238,440.99z"/> <path fill="#00AEEF" d="M869.068,534.63c13.164-8.647,26.523-17.022,40.055-25.138l-12.21-21.801 C883,496,869.26,504.583,855.71,513.461L869.068,534.63z"/> <path fill="#00AEEF" d="M815.328,572.162c12.636-9.364,25.465-18.48,38.488-27.333l-13.369-21.186 c-13.38,9.071-26.574,18.427-39.58,28.057L815.328,572.162z"/> <path fill="#00AEEF" d="M2447.525,2155.576c-7.213,10.371-14.592,20.611-22.13,30.73l20.854,13.936 c7.796-10.49,15.42-21.095,22.854-31.828L2447.525,2155.576z"/> <path fill="#00AEEF" d="M2302.807,2325.975c-8.901,8.639-17.933,17.145-27.109,25.497l17.455,17.918 c9.47-8.641,18.817-17.45,28.038-26.424L2302.807,2325.975z"/> <path fill="#00AEEF" d="M2414.304,2200.953c-7.667,9.958-15.492,19.789-23.472,29.486l20.082,14.996 c8.265-10.052,16.355-20.23,24.266-30.531L2414.304,2200.953z"/> <path fill="#00AEEF" d="M2341.849,2286.224c-8.513,9.092-17.163,18.054-25.961,26.865l18.36,16.972 c9.121-9.147,18.071-18.421,26.857-27.822L2341.849,2286.224z"/> <path fill="#00AEEF" d="M2379.047,2244.527c-8.102,9.531-16.348,18.936-24.748,28.195l19.244,16.006 c8.705-9.605,17.237-19.339,25.6-29.195L2379.047,2244.527z"/> <path fill="#00AEEF" d="M1832.029,2603.217c-105.083,31.622-216.431,48.635-331.68,48.635 c-603.643,0-1100.398-466.33-1148.989-1057.652h-24.582c9.974,125.315,39.686,247.057,88.737,363.028 c59.299,140.2,144.19,266.11,252.312,374.233c108.124,108.124,234.035,193.012,374.234,252.315 c145.16,61.396,299.35,92.527,458.288,92.527c116.091,0,229.645-16.63,339.001-49.513L1832.029,2603.217z"/> <path fill="#00AEEF" d="M1165.698,395.571c105.955-32.198,218.313-49.539,334.652-49.539 c603.642,0,1100.397,466.329,1148.987,1057.652h24.582c-9.973-125.317-39.686-247.058-88.736-363.029 c-59.301-140.2-144.192-266.111-252.313-374.234c-108.122-108.123-234.034-193.013-374.234-252.313 c-145.159-61.397-299.348-92.528-458.285-92.528c-117.145,0-231.704,16.934-341.975,50.41L1165.698,395.571z"/> <path fill="#00AEEF" d="M1892.773,2609.323l-8.553-23.179c-11.475,4.063-23.037,7.935-34.675,11.641l7.324,23.586 C1868.891,2617.551,1880.859,2613.54,1892.773,2609.323z"/> <path fill="#00AEEF" d="M2478.611,2108.471c-6.734,10.768-13.649,21.407-20.723,31.932l21.545,12.817 c7.303-10.908,14.43-21.931,21.361-33.078L2478.611,2108.471z"/> <path fill="#00AEEF" d="M2083.276,2493.331c-10.54,6.202-21.186,12.245-31.937,18.116l12.174,21.736 c11.139-6.066,22.172-12.306,33.096-18.725L2083.276,2493.331z"/> <path fill="#00AEEF" d="M1985.896,2544.547c-11.051,5.15-22.201,10.124-33.439,14.934l9.774,22.748 c11.643-4.971,23.195-10.109,34.64-15.433L1985.896,2544.547z"/> <path fill="#00AEEF" d="M2035.172,2520.115c-10.807,5.683-21.714,11.194-32.719,16.541l10.981,22.268 c11.406-5.521,22.71-11.211,33.905-17.086L2035.172,2520.115z"/> <path fill="#00AEEF" d="M2262.018,2363.711c-9.271,8.177-18.665,16.215-28.197,24.092l16.51,18.826 c9.845-8.156,19.568-16.479,29.17-24.972L2262.018,2363.711z"/> <path fill="#00AEEF" d="M1935.545,2566.574c-11.272,4.614-22.643,9.033-34.092,13.297l8.556,23.188 c11.823-4.393,23.596-8.963,35.307-13.748L1935.545,2566.574z"/> <path fill="#00AEEF" d="M2219.574,2399.375c-9.617,7.7-19.354,15.257-29.221,22.651l15.508,19.671 c10.2-7.652,20.284-15.473,30.246-23.471L2219.574,2399.375z"/> <path fill="#00AEEF" d="M2175.574,2432.904c-9.946,7.213-20.006,14.277-30.188,21.176l14.448,20.444 c10.536-7.137,20.961-14.446,31.264-21.925L2175.574,2432.904z"/> <path fill="#00AEEF" d="M2130.11,2464.242c-10.255,6.711-20.617,13.271-31.094,19.664l13.335,21.129 c10.85-6.606,21.589-13.384,32.215-20.341L2130.11,2464.242z"/> </g> <g> <path fill="#00AEEF" d="M2600.148,2439.238l75.949-13.516c201.208-254.912,321.304-576.818,321.304-926.781 c0-115.553-13.102-228.042-37.882-336.077l-60.659-36.077c31.612,118.866,48.481,243.74,48.481,372.559 C2947.342,1858.194,2816.589,2186.49,2600.148,2439.238z"/> <path fill="#00AEEF" d="M580.414,2613.735C259.956,2348.547,55.777,1947.793,55.777,1499.347 c0-574.105,334.625-1070.053,819.473-1303.448H762.825C309.303,453.146,3.297,940.298,3.297,1498.942 c0,445.579,194.667,845.69,503.59,1119.93L580.414,2613.735z"/> </g> <polyline fill="#00AEEF" points="2002.903,440.99 1996.871,572.727 2118.385,500.173 "/> <polyline fill="#00AEEF" points="934.566,2378.094 815.834,2435.484 937.477,2507.826 "/> </g> </svg> how can I make my svg animated (circle line 4 left to right and the circle line 3 is right to left)?
Isolate the element or group g that you want to animate and make sure it has an ID (if you name your layers in Illustrator it should export those names out as ID's I believe)
Define a keyframe animation (unprefixed for brevity)
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Apply it to the element in question (Only one for this example)
#XMLID_1_ {
animation: spin 12s linear infinite;
animation-direction:reverse; /* note below */
transform-origin: center;
}
NB: The animation is defined to work clockwise. However, it can be utilised to run in the opposite direction with the animation-direction property.
#Layer_1 {
width: 400px;
height: 400px;
margin: 0 auto;
display: block;
}
#XMLID_1_ {
animation: spin 12s linear infinite;
animation-direction: reverse;
transform-origin: center;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<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 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
<g>
<g>
<path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54" />
<path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54
C633.068,117.25,50.095,740.004,50.095,1498.942s582.974,1381.693,1325.536,1444.94" />
<path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882
c742.562-63.251,1325.534-686.003,1325.534-1444.94S2367.63,117.25,1625.068,54" />
<path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882" />
<path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,54" />
</g>
<g>
<path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1395.021" />
<path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251h77.141
c-30.628-647.454-565.236-1162.983-1220.269-1162.983c-655.036,0-1189.644,515.529-1220.271,1162.983h77.142" />
<path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251" />
<path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633" />
<path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633h-77.142
c30.627,647.452,565.235,1162.982,1220.271,1162.982c655.032,0,1189.641-515.53,1220.269-1162.982h-77.141" />
</g>
<g id="XMLID_1_">
<g>
<path fill="#00AEEF" d="M2903.798,1498.94c0,15.417-0.269,30.797-0.758,46.129h-122.333c0.551-15.308,0.831-30.688,0.831-46.129
c0-53.941-3.361-107.1-9.866-159.304l120.658-21.286C2899.959,1377.854,2903.798,1438.104,2903.798,1498.94z" />
<path fill="#00AEEF" d="M2779.937,1563.408h122.407c-3.338,74.248-12.422,147.519-27.228,219.505l-120.67-21.273
C2767.931,1697.185,2776.575,1630.98,2779.937,1563.408z" />
<path fill="#00AEEF" d="M2889.885,1300.158l-120.608,21.273c-9.341-67.121-23.914-132.591-43.28-195.995l115.327-41.972
C2863.281,1154.303,2879.48,1226.644,2889.885,1300.158z" />
<path fill="#00AEEF" d="M2750.558,1779.575l120.744,21.285c-15.674,71.474-36.983,141.65-63.893,210.214l-115.23-41.936
C2716.35,1908.095,2735.936,1844.764,2750.558,1779.575z" />
<path fill="#00AEEF" d="M2835.761,1065.97l-115.242,41.947c-20.784-64.688-46.568-127.15-76.913-186.922l106.39-61.436
c15.649,30.528,30.174,61.594,43.488,93.076C2809.267,989.937,2823.352,1027.727,2835.761,1065.97z" />
<path fill="#00AEEF" d="M2685.296,1986.146l115.303,41.972c-2.335,5.722-4.694,11.431-7.115,17.128
c-25.895,61.253-56.35,120.891-90.839,178.035l-106.317-61.375C2630.291,2105.972,2660.086,2047.238,2685.296,1986.146z" />
<path fill="#00AEEF" d="M2741.511,843.286l-106.329,61.387c-31.788-60.47-68.27-118.103-108.97-172.423l94.2-79.041
c15.1,19.977,29.686,40.309,43.672,61.008C2692.154,755.772,2718.024,798.93,2741.511,843.286z" />
<path fill="#00AEEF" d="M2586.693,2177.519l106.366,61.411c-9.378,15.099-19.036,30.026-28.976,44.747
c-30.639,45.334-64.052,89.017-99.874,130.622l-94.104-78.968C2512.824,2285.877,2551.837,2233.122,2586.693,2177.519z" />
<path fill="#00AEEF" d="M2609.25,638.648l-94.152,79.004c-42.008-54.442-88.296-105.412-138.349-152.421l79.09-94.25
c12.52,11.639,24.831,23.499,36.897,35.565C2534.231,548.041,2573.196,592.263,2609.25,638.648z" />
<path fill="#00AEEF" d="M2458.027,2349.134l94.128,78.992c-19.171,21.677-38.989,42.779-59.419,63.208
c-36.151,36.152-74.37,70.41-114.3,102.467l-78.98-94.116C2356.479,2454.058,2409.551,2403.687,2458.027,2349.134z" />
<path fill="#00AEEF" d="M2442.305,458.572l-79.028,94.176c-56.374-51.459-117.357-97.954-182.24-138.801l61.435-106.402
c14.378,8.974,28.585,18.192,42.608,27.667C2340.193,372.452,2392.863,413.788,2442.305,458.572z" />
<path fill="#00AEEF" d="M2285.055,2511.043l79.004,94.152c-25.687,20.087-52.046,39.281-78.979,57.486
c-33.084,22.349-67.182,43.304-102.1,62.768l-61.362-106.28C2178.933,2587.26,2233.546,2551.07,2285.055,2511.043z" />
<path fill="#00AEEF" d="M2226.834,297.935l-61.387,106.329c-58.696-35.785-120.486-66.986-184.856-93.113l41.96-115.254
c8.057,3.24,16.089,6.517,24.109,9.903C2108.67,232.037,2169.029,262.919,2226.834,297.935z" />
<path fill="#00AEEF" d="M2105.528,2627.972l61.374,106.305c-39.196,21.188-79.358,40.518-120.242,57.805
c-25.626,10.845-51.483,20.87-77.562,30.112l-41.911-115.156C1988.929,2685.152,2048.506,2658.646,2105.528,2627.972z" />
<path fill="#00AEEF" d="M2005.471,189.172l-41.935,115.205c-64.053-24.917-130.586-44.833-199.125-59.247l21.273-120.67
C1860.459,139.902,1933.826,161.505,2005.471,189.172z" />
<path fill="#00AEEF" d="M1909.852,2713.04l41.923,115.181c-68.331,23.242-138.129,41.055-209.101,53.403l-21.261-120.597
C1786.002,2749.755,1848.954,2733.629,1909.852,2713.04z" />
<path fill="#00AEEF" d="M1767.7,120.866l-21.273,120.609c-67.438-13.167-136.747-21.029-207.486-23.131V96.023
C1616.318,98.089,1692.682,106.402,1767.7,120.866z" />
<path fill="#00AEEF" d="M1703.318,2764.06l21.261,120.584c-61.093,9.793-123.03,15.552-185.639,17.227v-122.32
C1594.69,2777.887,1649.561,2772.642,1703.318,2764.06z" />
<path fill="#00AEEF" d="M1520.602,2779.965v122.284c-6.749,0.086-13.498,0.146-20.247,0.146
c-68.135,0-135.525-4.816-201.961-14.377l21.273-120.585c59.039,8.362,119.362,12.703,180.688,12.703
C1507.116,2780.137,1513.864,2780.075,1520.602,2779.965z" />
<path fill="#00AEEF" d="M1520.602,95.644v122.284c-6.737-0.11-13.485-0.183-20.247-0.183c-76.375,0-151.199,6.736-223.931,19.61
l-21.273-120.597c80.374-14.146,162.239-21.273,245.204-21.273C1507.104,95.485,1513.864,95.546,1520.602,95.644z" />
<path fill="#00AEEF" d="M1301.512,2764.72l-21.261,120.572c-73.821-11.615-146.431-29.11-217.476-52.449l41.935-115.206
C1168.285,2738.336,1234.037,2754.156,1301.512,2764.72z" />
<path fill="#00AEEF" d="M1237.118,120.059l21.261,120.609c-71.473,13.718-140.843,33.401-207.584,58.501l-41.923-115.193
C1083.242,156.138,1159.458,134.792,1237.118,120.059z" />
<path fill="#00AEEF" d="M1087.301,2711.83l-41.911,115.168c-30.761-10.551-61.216-22.165-91.353-34.917
c-38.867-16.444-77.085-34.734-114.435-54.699l61.374-106.305C960.468,2662.706,1022.735,2689.774,1087.301,2711.83z" />
<path fill="#00AEEF" d="M991.73,190.529l41.935,115.206c-67.194,26.383-131.649,58.281-192.779,95.13L779.5,294.56
c56.093-33.621,114.545-63.379,174.538-88.76C966.544,200.518,979.113,195.432,991.73,190.529z" />
<path fill="#00AEEF" d="M884.838,2622.348l-61.362,106.28c-36.923-20.368-72.953-42.375-107.858-65.946
c-20.943-14.158-41.531-28.927-61.729-44.222l79.041-94.201C781.064,2560.374,831.814,2593.177,884.838,2622.348z" />
<path fill="#00AEEF" d="M763.826,304.097l61.411,106.354c-60.788,37.827-118.188,80.618-171.628,127.786l-78.98-94.127
c44.686-39.246,91.866-75.703,140.99-108.897C731.464,324.514,747.553,314.146,763.826,304.097z" />
<path fill="#00AEEF" d="M718.321,2513.121l-78.992,94.152c-46.128-35.884-90.105-74.664-131.368-115.939
c-11.859-11.858-23.511-23.938-34.954-36.225l94.262-79.103C613.899,2425.583,664.404,2471.455,718.321,2513.121z" />
<path fill="#00AEEF" d="M560.912,456.31l79.016,94.152c-47.241,42.889-91.254,89.262-131.673,138.679l-94.091-78.955
c29.55-36.079,60.873-70.715,93.798-103.64C525.15,489.356,542.829,472.607,560.912,456.31z" />
<path fill="#00AEEF" d="M554.774,2362.546l-94.189,79.041c-45.016-49.649-86.56-102.552-123.971-157.91
c-4.976-7.373-9.854-14.794-14.695-22.264l106.476-61.473C466.172,2257.525,508.474,2311.894,554.774,2362.546z" />
<path fill="#00AEEF" d="M402.622,624.454l94.127,78.979c-44.258,55.702-83.968,115.157-118.592,177.814l-106.28-61.362
c20.026-36.165,41.629-71.461,64.736-105.669C357.374,683.493,379.429,653.527,402.622,624.454z" />
<path fill="#00AEEF" d="M418.43,2184.512l-106.391,61.436c-40.297-63.979-75.483-131.307-104.825-200.702
c-0.379-0.88-0.734-1.76-1.101-2.641l115.364-41.996C348.876,2064.758,381.373,2126.218,418.43,2184.512z" />
<path fill="#00AEEF" d="M263.087,835.987l106.305,61.375c-33.291,62.34-61.582,127.737-84.322,195.652l-115.218-41.935
c11.175-33.169,23.633-65.996,37.363-98.443C223.976,912.999,242.657,874.047,263.087,835.987z" />
<path fill="#00AEEF" d="M314.375,1983.676l-115.267,41.959c-29.085-71.754-52.009-145.293-68.722-220.275l120.768-21.297
C266.84,1852.857,288.077,1919.563,314.375,1983.676z" />
<path fill="#00AEEF" d="M164.105,1068.513l115.267,41.948c-21.249,66.619-37.191,135.586-47.302,206.411l-120.597-21.261
C122.647,1218.477,140.191,1142.651,164.105,1068.513z" />
<path fill="#00AEEF" d="M247.206,1766.139l-120.695,21.286c-15.344-73.441-24.746-148.229-28.157-224.017h122.407
C224.208,1632.558,233.17,1700.277,247.206,1766.139z" />
<path fill="#00AEEF" d="M108.966,1313.791l120.622,21.273c-6.883,53.672-10.429,108.371-10.429,163.877
c0,15.441,0.281,30.821,0.831,46.129H97.657c-0.489-15.332-0.758-30.712-0.758-46.129
C96.899,1436.551,100.946,1374.773,108.966,1313.791z" />
</g>
<g>
</g>
</g>
<g>
<path fill="#00AEEF" d="M714.827,655.783c11.458-10.68,23.14-21.121,35.024-31.334l-15.507-19.669
c-12.194,10.472-24.206,21.196-36.011,32.197L714.827,655.783z" />
<path fill="#00AEEF" d="M763.862,612.598c12.066-10.043,24.33-19.854,36.803-29.407l-14.468-20.471
c-12.806,9.794-25.414,19.873-37.839,30.211L763.862,612.598z" />
<path fill="#00AEEF" d="M624.686,749.812c10.139-11.834,20.502-23.47,31.103-34.881l-17.471-17.935
c-10.941,11.743-21.607,23.689-32.024,35.815L624.686,749.812z" />
<path fill="#00AEEF" d="M511.15,907.297c7.944-13.233,16.137-26.299,24.59-39.182l-20.097-15.006
c-8.707,13.253-17.127,26.691-25.289,40.292L511.15,907.297z" />
<path fill="#00AEEF" d="M583.821,800.284c9.433-12.346,19.11-24.493,29.024-36.44l-18.404-17.013
c-10.229,12.288-20.208,24.754-29.902,37.416L583.821,800.284z" />
<path fill="#00AEEF" d="M479.525,963.445c7.167-13.606,14.6-27.049,22.288-40.327l-20.789-13.89
c-7.907,13.66-15.561,27.478-22.923,41.47L479.525,963.445z" />
<path fill="#00AEEF" d="M451.192,1021.114c6.369-13.93,13.011-27.71,19.913-41.336l-21.417-12.742
c-7.096,14.013-13.917,28.188-20.468,42.518L451.192,1021.114z" />
<path fill="#00AEEF" d="M545.939,852.842c8.701-12.812,17.659-25.435,26.855-37.873l-19.293-16.045
c-9.482,12.794-18.696,25.771-27.639,38.928L545.939,852.842z" />
<path fill="#00AEEF" d="M924.925,500.173c13.651-7.895,27.481-15.517,41.478-22.862l-11.009-22.323
c-14.395,7.517-28.62,15.319-42.664,23.411L924.925,500.173z" />
<path fill="#00AEEF" d="M421.698,1026.322c-2.088,4.762-4.153,9.538-6.181,14.333c-49.052,115.971-78.764,237.712-88.737,363.029
h24.582c10.607-129.072,42.545-252.194,92.308-365.804L421.698,1026.322z" />
<path fill="#00AEEF" d="M2649.337,1594.199c-14.892,181.217-71.867,350.691-161.118,498.604l22.143,11.651
c28.249-47.074,53.238-96.199,74.821-147.227c49.051-115.972,78.764-237.713,88.736-363.028H2649.337z" />
<path fill="#00AEEF" d="M668.395,701.584c10.813-11.277,21.856-22.334,33.116-33.167l-16.5-18.813
c-5.772,5.546-11.508,11.143-17.184,16.817c-5.697,5.698-11.315,11.457-16.882,17.252L668.395,701.584z" />
<path fill="#00AEEF" d="M1094.746,393.312l8.554,23.185c14.823-5.455,29.793-10.602,44.893-15.458l-7.327-23.594
C1125.403,382.407,1110.029,387.696,1094.746,393.312z" />
<path fill="#00AEEF" d="M982.714,468.923c14.093-7.11,28.343-13.955,42.758-20.497l-9.788-22.779
c-14.826,6.697-29.476,13.704-43.964,20.984L982.714,468.923z" />
<path fill="#00AEEF" d="M1042.238,440.99c14.483-6.297,29.123-12.298,43.906-18.009l-8.56-23.2
c-11.896,4.584-23.742,9.346-35.523,14.328c-3.21,1.357-6.403,2.744-9.599,4.129L1042.238,440.99z" />
<path fill="#00AEEF" d="M869.068,534.63c13.164-8.647,26.523-17.022,40.055-25.138l-12.21-21.801
C883,496,869.26,504.583,855.71,513.461L869.068,534.63z" />
<path fill="#00AEEF" d="M815.328,572.162c12.636-9.364,25.465-18.48,38.488-27.333l-13.369-21.186
c-13.38,9.071-26.574,18.427-39.58,28.057L815.328,572.162z" />
<path fill="#00AEEF" d="M2447.525,2155.576c-7.213,10.371-14.592,20.611-22.13,30.73l20.854,13.936
c7.796-10.49,15.42-21.095,22.854-31.828L2447.525,2155.576z" />
<path fill="#00AEEF" d="M2302.807,2325.975c-8.901,8.639-17.933,17.145-27.109,25.497l17.455,17.918
c9.47-8.641,18.817-17.45,28.038-26.424L2302.807,2325.975z" />
<path fill="#00AEEF" d="M2414.304,2200.953c-7.667,9.958-15.492,19.789-23.472,29.486l20.082,14.996
c8.265-10.052,16.355-20.23,24.266-30.531L2414.304,2200.953z" />
<path fill="#00AEEF" d="M2341.849,2286.224c-8.513,9.092-17.163,18.054-25.961,26.865l18.36,16.972
c9.121-9.147,18.071-18.421,26.857-27.822L2341.849,2286.224z" />
<path fill="#00AEEF" d="M2379.047,2244.527c-8.102,9.531-16.348,18.936-24.748,28.195l19.244,16.006
c8.705-9.605,17.237-19.339,25.6-29.195L2379.047,2244.527z" />
<path fill="#00AEEF" d="M1832.029,2603.217c-105.083,31.622-216.431,48.635-331.68,48.635
c-603.643,0-1100.398-466.33-1148.989-1057.652h-24.582c9.974,125.315,39.686,247.057,88.737,363.028
c59.299,140.2,144.19,266.11,252.312,374.233c108.124,108.124,234.035,193.012,374.234,252.315
c145.16,61.396,299.35,92.527,458.288,92.527c116.091,0,229.645-16.63,339.001-49.513L1832.029,2603.217z" />
<path fill="#00AEEF" d="M1165.698,395.571c105.955-32.198,218.313-49.539,334.652-49.539
c603.642,0,1100.397,466.329,1148.987,1057.652h24.582c-9.973-125.317-39.686-247.058-88.736-363.029
c-59.301-140.2-144.192-266.111-252.313-374.234c-108.122-108.123-234.034-193.013-374.234-252.313
c-145.159-61.397-299.348-92.528-458.285-92.528c-117.145,0-231.704,16.934-341.975,50.41L1165.698,395.571z" />
<path fill="#00AEEF" d="M1892.773,2609.323l-8.553-23.179c-11.475,4.063-23.037,7.935-34.675,11.641l7.324,23.586
C1868.891,2617.551,1880.859,2613.54,1892.773,2609.323z" />
<path fill="#00AEEF" d="M2478.611,2108.471c-6.734,10.768-13.649,21.407-20.723,31.932l21.545,12.817
c7.303-10.908,14.43-21.931,21.361-33.078L2478.611,2108.471z" />
<path fill="#00AEEF" d="M2083.276,2493.331c-10.54,6.202-21.186,12.245-31.937,18.116l12.174,21.736
c11.139-6.066,22.172-12.306,33.096-18.725L2083.276,2493.331z" />
<path fill="#00AEEF" d="M1985.896,2544.547c-11.051,5.15-22.201,10.124-33.439,14.934l9.774,22.748
c11.643-4.971,23.195-10.109,34.64-15.433L1985.896,2544.547z" />
<path fill="#00AEEF" d="M2035.172,2520.115c-10.807,5.683-21.714,11.194-32.719,16.541l10.981,22.268
c11.406-5.521,22.71-11.211,33.905-17.086L2035.172,2520.115z" />
<path fill="#00AEEF" d="M2262.018,2363.711c-9.271,8.177-18.665,16.215-28.197,24.092l16.51,18.826
c9.845-8.156,19.568-16.479,29.17-24.972L2262.018,2363.711z" />
<path fill="#00AEEF" d="M1935.545,2566.574c-11.272,4.614-22.643,9.033-34.092,13.297l8.556,23.188
c11.823-4.393,23.596-8.963,35.307-13.748L1935.545,2566.574z" />
<path fill="#00AEEF" d="M2219.574,2399.375c-9.617,7.7-19.354,15.257-29.221,22.651l15.508,19.671
c10.2-7.652,20.284-15.473,30.246-23.471L2219.574,2399.375z" />
<path fill="#00AEEF" d="M2175.574,2432.904c-9.946,7.213-20.006,14.277-30.188,21.176l14.448,20.444
c10.536-7.137,20.961-14.446,31.264-21.925L2175.574,2432.904z" />
<path fill="#00AEEF" d="M2130.11,2464.242c-10.255,6.711-20.617,13.271-31.094,19.664l13.335,21.129
c10.85-6.606,21.589-13.384,32.215-20.341L2130.11,2464.242z" />
</g>
<g id="outer-markers">
<path fill="#00AEEF" d="M2600.148,2439.238l75.949-13.516c201.208-254.912,321.304-576.818,321.304-926.781
c0-115.553-13.102-228.042-37.882-336.077l-60.659-36.077c31.612,118.866,48.481,243.74,48.481,372.559
C2947.342,1858.194,2816.589,2186.49,2600.148,2439.238z" />
<path fill="#00AEEF" d="M580.414,2613.735C259.956,2348.547,55.777,1947.793,55.777,1499.347
c0-574.105,334.625-1070.053,819.473-1303.448H762.825C309.303,453.146,3.297,940.298,3.297,1498.942
c0,445.579,194.667,845.69,503.59,1119.93L580.414,2613.735z" />
</g>
<polyline fill="#00AEEF" points="2002.903,440.99 1996.871,572.727 2118.385,500.173 " />
<polyline fill="#00AEEF" points="934.566,2378.094 815.834,2435.484 937.477,2507.826 " />
</g>
</svg>
Note: Transformations of this type are often interpreted differently in various browsers, what wokrs for one may not work for another.
The above works in Chrome but quite differently in Firefox. There are a number of SO questions on this point
Codepen Demo
CSS-Tricks has a range of articles on this too. Especially, this one on Transforms
SVG not rendering in Firefox (latest version) [closed]
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers. Closed 7 years ago. Improve this question Looked at other answers on StackOverflow and tried changing the <g></g>, <clientpath/>, etc but no luck. The SVG doesnt render in Firefox (v 36.0.4) Here is the html code: <td role="gridcell"> <span class="entity-chart k-chart" data-role="chart" style="position: relative;"> <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; overflow: hidden;"> <defs> <clipPath id="fd1ba3a5-b043-4aea-bf23-6263c8c364dd"> <path fill="none" stroke-linejoin="miter" stroke="#000" d="M14 5 L 594 5 594 19 14 19Z"/> </clipPath> <linearGradient gradientUnits="objectBoundingBox" y2="1" x2="0" y1="0" x1="0" id="e6d64ff2-2146-408e-b1ed-924e26e7da59"> <stop style="stop-color:#fff;stop-opacity:0;" offset="0"/> <stop style="stop-color:#fff;stop-opacity:0.3;" offset="0.25"/> <stop style="stop-color:#fff;stop-opacity:0;" offset="1"/> </linearGradient> </defs> <g> <path fill="none" stroke="none" d="M0 0 L 600 0 600 25 0 25Z"/> <path fill="none" stroke="none" d="M14 5 L 594 5 594 19 14 19Z"/> <g><g/> <g/> <g><g/> </g> <g clip-path="url(#fd1ba3a5-b043-4aea-bf23-6263c8c364dd)"> <g transform="matrix(1,0,0,1,0,0)"> <path fill-opacity="1" fill="#0055cc" stroke-opacity="1" stroke-width="1" stroke="#0044a3" d="M14.5 9.5 L 409.5 9.5 409.5 15.5 14.5 15.5Z"/> <path fill="url(#e6d64ff2-2146-408e-b1ed-924e26e7da59)" stroke="none" d="M14.5 9.5 L 409.5 9.5 409.5 15.5 14.5 15.5Z"/> </g> </g> <g> <text fill-opacity="1" fill="#000" stroke="none" y="12" x="5" style="font:12px Arial,Helvetica,sans-serif;"> <tspan/> </text> </g> </g> <g/> <g/> <g/> <g opacity="1"> <path fill="none" stroke="none" d="M413.455 9.2 L 446.455 9.2 446.455 14.8 413.455 14.8Z"/> <text fill-opacity="1" fill="#000" stroke="none" y="15.999999999999998" x="417.45454545454544" style="font:11px Arial,Helvetica,sans-serif;"> <tspan>75 %</tspan> </text> </g> </g> </svg> </span> </td>
Your svg code has errors with the group tags not being properly opened/closed. Additionally, there are a couple that seem to be mistyped (<g/>). The code below is valid so you can use as a reference. <td role="gridcell"> <span class="entity-chart k-chart" data-role="chart" style="position: relative;"> <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 1500 1000" enable-background="new 0 0 1500 1000" xml:space="preserve"> <g> <path fill="none" d="M0,0h600v25H0V0z"/> <path fill="none" d="M14,5h580v14H14V5z"/> <g> <g> <defs> <rect id="SVGID_1_" x="14" y="5" width="580" height="14"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <g clip-path="url(#SVGID_2_)"> <g transform="matrix(1,0,0,1,0,0)"> <path fill="#0055CC" stroke="#0044A3" d="M14.5,9.5h395v6h-395V9.5z"/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0.5" y1="1000" x2="0.5" y2="999" gradientTransform="matrix(395 0 0 -6 14.5 6009.5)"> <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/> <stop offset="0.25" style="stop-color:#FFFFFF;stop-opacity:0.3"/> <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/> </linearGradient> <path fill="url(#SVGID_3_)" d="M14.5,9.5h395v6h-395V9.5z"/> </g> </g> </g> </g> <g> <path fill="none" d="M413.5,9.2h33v5.6h-33V9.2z"/> <text transform="matrix(1 0 0 1 417.4546 16)" font-family="'ArialMT'" font-size="11">75 %</text> </g> </g> </svg> </span> </td>