Как (правильно) повторно использовать SVG с линейным градиентом несколько раз на одной странице ⇐ CSS

[Anonymous]

Я использую следующий SVG-изображение кнопки загрузки Google Play. Внутри есть 4 .

требует идентификатора, на который CSS будет ссылаться в качестве заливки. Я бы предпочел не использовать идентификаторы, поскольку у меня будет два таких значка на одной странице, что приведет к тому, что на странице будут дублироваться идентификаторы. Е с т ь и д е и а л ь т е р н а т и в н о г о с п о с о б а д о б и т ь с я э т о г о ? < / p > < b r / > < b r / > К о д S V G : < / p > < b r / > < b r / > < c o d e > & l t ; s v g v i e w B o x = ' 0 0 1 3 5 4 0 ' & g t ; < b r / > & l t ; p a t h d = ' M 1 3 0 , 4 0 H 5 c - 2 . 8 , 0 - 5 - 2 . 2 - 5 - 5 V 5 c 0 - 2 . 7 , 2 . 2 - 5 , 5 - 5 h 1 2 5 c 2 . 8 , 0 , 5 , 2 . 2 , 5 , 5 v 3 0 C 1 3 5 , 3 7 . 7 , 1 3 2 . 8 , 4 0 , 1 3 0 , 4 0 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 0 ' d = ' M 1 3 0 , 0 . 8 c 2 . 3 , 0 , 4 . 2 , 1 . 9 , 4 . 2 , 4 . 2 v 3 0 c 0 , 2 . 3 - 1 . 9 , 4 . 2 - 4 . 2 , 4 . 2 H 5 c - 2 . 3 , 0 - 4 . 2 - 1 . 9 - 4 . 2 - 4 . 2 V 5 c 0 - 2 . 3 , 1 . 9 - 4 . 2 , 4 . 2 - 4 . 2 H 1 3 0 M 1 3 0 , 0 H 5 C 2 . 3 , 0 , 0 , 2 . 3 , 0 , 5 v 3 0 c 0 , 2 . 8 , 2 . 2 , 5 , 5 , 5 h 1 2 5 c 2 . 8 , 0 , 5 - 2 . 2 , 5 - 5 V 5 C 1 3 5 , 2 . 3 , 1 3 2 . 8 , 0 , 1 3 0 , 0 L 1 3 0 , 0 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 4 7 . 4 , 1 0 . 2 c 0 , 0 . 8 - 0 . 2 , 1 . 5 - 0 . 7 , 2 c - 0 . 6 , 0 . 6 - 1 . 3 , 0 . 9 - 2 . 2 , 0 . 9 c - 0 . 9 , 0 - 1 . 6 - 0 . 3 - 2 . 2 - 0 . 9 c - 0 . 6 - 0 . 6 - 0 . 9 - 1 . 3 - 0 . 9 - 2 . 2 c 0 - 0 . 9 , 0 . 3 - 1 . 6 , 0 . 9 - 2 . 2 c 0 . 6 - 0 . 6 , 1 . 3 - 0 . 9 , 2 . 2 - 0 . 9 c 0 . 4 , 0 , 0 . 8 , 0 . 1 , 1 . 2 , 0 . 3 c 0 . 4 , 0 . 2 , 0 . 7 , 0 . 4 , 0 . 9 , 0 . 7 l - 0 . 5 , 0 . 5 c - 0 . 4 - 0 . 5 - 0 . 9 - 0 . 7 - 1 . 6 - 0 . 7 c - 0 . 6 , 0 - 1 . 2 , 0 . 2 - 1 . 6 , 0 . 7 c - 0 . 5 , 0 . 4 - 0 . 7 , 1 - 0 . 7 , 1 . 7 s 0 . 2 , 1 . 3 , 0 . 7 , 1 . 7 c 0 . 5 , 0 . 4 , 1 , 0 . 7 , 1 . 6 , 0 . 7 c 0 . 7 , 0 , 1 . 2 - 0 . 2 , 1 . 7 - 0 . 7 c 0 . 3 - 0 . 3 , 0 . 5 - 0 . 7 , 0 . 5 - 1 . 2 h - 2 . 2 V 9 . 8 h 2 . 9 C 4 7 . 4 , 9 . 9 , 4 7 . 4 , 1 0 . 1 , 4 7 . 4 , 1 0 . 2 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 5 2 , 7 . 7 h - 2 . 7 v 1 . 9 h 2 . 5 v 0 . 7 h - 2 . 5 v 1 . 9 H 5 2 V 1 3 h - 3 . 5 V 7 H 5 2 V 7 . 7 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 5 5 . 3 , 1 3 h - 0 . 8 V 7 . 7 h - 1 . 7 V 7 H 5 7 v 0 . 7 h - 1 . 7 V 1 3 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 5 9 . 9 , 1 3 V 7 h 0 . 8 v 6 H 5 9 . 9 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 6 4 . 1 , 1 3 h - 0 . 8 V 7 . 7 h - 1 . 7 V 7 h 4 . 1 v 0 . 7 h - 1 . 7 V 1 3 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 7 3 . 6 , 1 2 . 2 c - 0 . 6 , 0 . 6 - 1 . 3 , 0 . 9 - 2 . 2 , 0 . 9 c - 0 . 9 , 0 - 1 . 6 - 0 . 3 - 2 . 2 - 0 . 9 c - 0 . 6 - 0 . 6 - 0 . 9 - 1 . 3 - 0 . 9 - 2 . 2 s 0 . 3 - 1 . 6 , 0 . 9 - 2 . 2 c 0 . 6 - 0 . 6 , 1 . 3 - 0 . 9 , 2 . 2 - 0 . 9 c 0 . 9 , 0 , 1 . 6 , 0 . 3 , 2 . 2 , 0 . 9 c 0 . 6 , 0 . 6 , 0 . 9 , 1 . 3 , 0 . 9 , 2 . 2 C 7 4 . 5 , 1 0 . 9 , 7 4 . 2 , 1 1 . 6 , 7 3 . 6 , 1 2 . 2 z M 6 9 . 8 , 1 1 . 7 c 0 . 4 , 0 . 4 , 1 , 0 . 7 , 1 . 6 , 0 . 7 s 1 . 2 - 0 . 2 , 1 . 6 - 0 . 7 c 0 . 4 - 0 . 4 , 0 . 7 - 1 , 0 . 7 - 1 . 7 S 7 3 . 5 , 8 . 7 , 7 3 , 8 . 3 c - 0 . 4 - 0 . 4 - 1 - 0 . 7 - 1 . 6 - 0 . 7 s - 1 . 2 , 0 . 2 - 1 . 6 , 0 . 7 c - 0 . 4 , 0 . 4 - 0 . 7 , 1 - 0 . 7 , 1 . 7 S 6 9 . 3 , 1 1 . 3 , 6 9 . 8 , 1 1 . 7 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 1 ' d = ' M 7 5 . 6 , 1 3 V 7 h 0 . 9 l 2 . 9 , 4 . 7 h 0 l 0 - 1 . 2 V 7 h 0 . 8 v 6 h - 0 . 8 l - 3 . 1 - 4 . 9 h 0 l 0 , 1 . 2 V 1 3 H 7 5 . 6 z ' / & g t ; < b r / > & l t ; p a t h c l a s s N a m e = ' s t 2 ' d = ' M 6 8 . 1 , 2 1 . 8 c - 2 . 4 , 0 - 4 . 3 , 1 . 8 - 4 . 3 , 4 . 3 c 0 , 2 . 4 , 1 . 9 , 4 . 3 , 4 . 3 , 4 . 3 c 2 . 4 , 0 , 4 . 3 - 1 . 8 , 4 . 3 - 4 . 3 C 7 2 . 4 , 2 3 . 5 , 7 0 . 5 , 2 1 . 8 , 6 8 . 1 , 2 1 . 8 z M 6 8 . 1 , 2 8 . 6 c - 1 . 3 , 0 - 2 . 4 - 1 . 1 - 2 . 4 - 2 . 6 c 0 - 1 . 5 , 1 . 1 - 2 . 6 , 2 . 4 - 2 . 6 c 1 . 3 , 0 , 2 . 4 , 1 , 2 . 4 , 2 . 6 C 7 0 . 5 , 2 7 . 5 , 6 9 . 4 , 2 8 . 6 , 6 8 . 1 , 2 8 . 6 z M 5 8 . 8 , 2 1 . 8 c - 2 . 4 , 0 - 4 . 3 , 1 . 8 - 4 . 3 , 4 . 3 c 0 , 2 . 4 , 1 . 9 , 4 . 3 , 4 . 3 , 4 . 3 c 2 . 4 , 0 , 4 . 3 - 1 . 8 , 4 . 3 - 4 . 3 C 6 3 . 1 , 2 3 . 5 , 6 1 . 2 , 2 1 . 8 , 5 8 . 8 , 2 1 . 8 z M 5 8 . 8 , 2 8 . 6 c - 1 . 3 , 0 - 2 . 4 - 1 . 1 - 2 . 4 - 2 . 6 c 0 - 1 . 5 , 1 . 1 - 2 . 6 , 2 . 4 - 2 . 6 c 1 . 3 , 0 , 2 . 4 , 1 , 2 . 4 , 2 . 6 C 6 1 . 2 , 2 7 . 5 , 6 0 . 1 , 2 8 . 6 , 5 8 . 8 , 2 8 . 6 z M 4 7 . 7 , 2 3 . 1v1.8h4.3c-0.1,1-0.5,1.8-1,2.3c-0.6,0.6-1.6,1.3-3.3,1.3c-2.7,0-4.7-2.1-4.7-4.8 s2.1-4.8,4.7-4.8c1.4,0,2.5,0.6,3.3,1.3l1.3-1.3c-1.1-1-2.5-1.8-4.5-1.8c-3.6,0-6.7,3-6.7,6.6c0,3.6,3.1,6.6,6.7,6.6 c2,0,3.4-0.6,4.6-1.9c1.2-1.2,1.6-2.9,1.6-4.2c0-0.4,0-0.8-0.1-1.1H47.7z M93.1,24.5c-0.4-1-1.4-2.7-3.6-2.7c-2.2,0-4,1.7-4,4.3 c0,2.4,1.8,4.3,4.2,4.3c1.9,0,3.1-1.2,3.5-1.9l-1.4-1c-0.5,0.7-1.1,1.2-2.1,1.2c-1,0-1.6-0.4-2.1-1.3l5.7-2.4L93.1,24.5z M87.3,25.9c0-1.6,1.3-2.5,2.2-2.5c0.7,0,1.4,0.4,1.6,0.9L87.3,25.9z M82.6,30h1.9V17.5h-1.9V30z M79.6,22.7L79.6,22.7 c-0.5-0.5-1.3-1-2.3-1c-2.1,0-4.1,1.9-4.1,4.3c0,2.4,1.9,4.2,4.1,4.2c1,0,1.8-0.5,2.2-1h0.1v0.6c0,1.6-0.9,2.5-2.3,2.5 c-1.1,0-1.9-0.8-2.1-1.5l-1.6,0.7c0.5,1.1,1.7,2.5,3.8,2.5c2.2,0,4-1.3,4-4.4V22h-1.8V22.7z M77.4,28.6c-1.3,0-2.4-1.1-2.4-2.6 c0-1.5,1.1-2.6,2.4-2.6c1.3,0,2.3,1.1,2.3,2.6C79.7,27.5,78.7,28.6,77.4,28.6z M101.8,17.5h-4.5V30h1.9v-4.7h2.6 c2.1,0,4.1-1.5,4.1-3.9S103.9,17.5,101.8,17.5z M101.9,23.5h-2.7v-4.3h2.7c1.4,0,2.2,1.2,2.2,2.1C104,22.4,103.2,23.5,101.9,23.5z M113.4,21.7c-1.4,0-2.8,0.6-3.3,1.9l1.7,0.7c0.4-0.7,1-0.9,1.7-0.9c1,0,1.9,0.6,2,1.6v0.1c-0.3-0.2-1.1-0.5-1.9-0.5 c-1.8,0-3.6,1-3.6,2.8c0,1.7,1.5,2.8,3.1,2.8c1.3,0,1.9-0.6,2.4-1.2h0.1v1h1.8v-4.8C117.2,23,115.5,21.7,113.4,21.7z M113.2,28.6 c-0.6,0-1.5-0.3-1.5-1.1c0-1,1.1-1.3,2-1.3c0.8,0,1.2,0.2,1.7,0.4C115.2,27.8,114.2,28.6,113.2,28.6z M123.7,22l-2.1,5.4h-0.1 l-2.2-5.4h-2l3.3,7.6l-1.9,4.2h1.9l5.1-11.8H123.7z M106.9,30h1.9V17.5h-1.9V30z'/>






































CSS:

.st0{
fill:#A6A6A6;
}
.st1{
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 0.2;
stroke-miterlimit: 10;
}
.st2{
fill: #FFFFFF;
}
.st3{
fill: url(#SVGID_1_);
}
.st4{
fill: url(#SVGID_2_);
}
.st5{
fill: url(#SVGID_3_);
}
.st6{
fill: url(#SVGID_4_);
}
.st7{
opacity: 0.2;
enable-background: new;
}
.st8{
opacity: 0.12;
enable-background: new;
}
.st9{
opacity: 0.25;
fill: #FFFFFF;
enable-background:new;
}


Подробнее здесь: https://stackoverflow.com/questions/523 ... single-pag