Изменение цвета путей SVG при наведении на его контейнер - PullRequest
0 голосов
/ 11 июня 2018

У меня есть 6 изображений SVG на странице (в качестве данных пути).У каждого из них есть именованные пути, которые я использовал для установки их начальных цветов.

Чего я не могу понять, так это как заставить их изменить цвет, когда элемент, в котором они находятся (имеют свои собственные события при наведении курсора)).

Как бы я поступил об этом?

Пример того, что у меня сейчас есть, [здесь] [1] и показано ниже

html {
  box-sizing: border-box;
  background: #f3f3f3;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

.clip {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.svg--source {
  display: none;
}

.svg--icon {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.Link {
  width: 5rem;
  height: 5rem;
  float: left;
  margin: .5rem 1rem .5rem 0;
  color: #353c4a;
  border: .125rem solid #f3f3f3;
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  border-radius: 50%;
  transition: 250ms;
}

.Link:last-child {
  margin-right: 0;
}

.Link:focus {
  outline-color: inherit;
}


/* Icon Colours */


/* ------ Data ------ */

.Data1-Cog {
  color: #eda700
}

.Data2-Monitor {
  fill: #3a3a3a
}

.Data3-Pie {
  color: #3ca0ef
}

.Data4-Table {
  color: #3a3a3a
}

.Data5-TableData1 {
  color: #9b2242
}

.Data6-TableData2 {
  color: #009639
}

.Data7-TableData3 {
  color: #009639
}

.Data:hover,
.Data:focus {
  color: #3a3a3a;
  fill: #009639;
  box-shadow: 0 0 24px 0 #3ca0ef;
}


/* ------------------ */


/* ------ Trading ------ */

.Trading1-Line {
  color: #9b2242
}

.Trading2-Bars {
  color: #009639
}

.Trading:hover,
.Trading:focus {
  color: #dd4b39;
  box-shadow: 0 0 24px 0 #dd4b39;
}


/* ------------------ */


/* ------ Solutions ------ */

.Solutions1-Flower {
  color: #3ca0ef
}

.Solutions2-Stem {
  color: #009639
}

.Solutions3-LeftLeaf {
  color: #009639
}

.Solutions4-RightLeaf {
  color: #009639
}

.Solutions5-Ground1 {
  color: #9b2242
}

.Solutions6-Ground2 {
  color: #9b2242
}

.Solutions7-Ground3 {
  color: #9b2242
}

.Solutions8-Ground4 {
  color: #9b2242
}

.Solutions:hover,
.Solutions:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}


/* ------------------ */


/* ------ Contracts ------ */

.Contracts1-PageLeft {
  color: #3a3a3a
}

.Contracts2-PageRight {
  color: #3a3a3a
}

.Contracts3-Writing1 {
  color: #000000
}

.Contracts4-Writing2 {
  color: #000000
}

.Contracts5-Writing3 {
  color: #000000
}

.Contracts6-Writing4 {
  color: #000000
}

.Contracts7-Writing5 {
  color: #000000
}

.Contracts8-Writing6 {
  color: #000000
}

.Contracts9-Writing7 {
  color: #000000
}

.Contracts10-Writing8 {
  color: #000000
}

.Contracts11-Writing9 {
  color: #000000
}

.Contracts12-Writing10 {
  color: #000000
}

.Contracts13-Signature {
  color: #9b2242
}

.Contracts14-Stamp {
  color: #eda700
}

.Contracts15-RibbonLeft {
  color: #723dd2
}

.Contracts16-RibbonRight {
  color: #723dd2
}

.Contracts:hover,
.Contracts:focus {
  color: #4183c4;
  box-shadow: 0 0 24px 0 #4183c4;
}


/* ------------------ */


/* ------ Finance ------ */

.Finance1-Stack1 {
  color: #3a3a3a
}

.Finance2-Stack2 {
  color: #3a3a3a
}

.Finance3-Stack3 {
  color: #3a3a3a
}

.Finance4-Stack4 {
  color: #3a3a3a
}

.Finance5-Stack5 {
  color: #3a3a3a
}

.Finance6-Stack6 {
  color: #3a3a3a
}

.Finance7-Stack7 {
  color: #3a3a3a
}

.Finance8-CoinOutside {
  color: #eda700
}

.Finance9-CoinInside {
  color: #fde03a
}

.Finance10-CoinDollarSign {
  color: #009639
}

.Finance:hover,
.Finance:focus {
  color: #bd081c;
  box-shadow: 0 0 24px 0 #bd081c;
}


/* ------------------ */


/* ------ Sales ------ */

.Sales1-DollarSign {
  color: #009639
}

.Sales2-FrontTag {
  color: #3a3a3a
}

.Sales3-BackTag {
  color: #eda700
}

.Sales:hover,
.Sales:focus {
  color: #cd201f;
  box-shadow: 0 0 24px 0 #cd201f;
}


/* ------------------ */
<svg class="svg--source" width="0" height="0" aria-hidden="true">

<symbol id="svg--Data" viewbox="0 -100 500 750">
<path class="Data7-TableData3" d="M401.1,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S396.4,307.2,401.1,307.2z"/>
<path class="Data6-TableData2" d="M349.9,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S345.2,307.2,349.9,307.2z"/>
<path class="Data5-TableData1" d="M298.7,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S294,307.2,298.7,307.2z"/>
<path class="Data4-Table" d="M452.3,221.9H204.8c-4.7,0-8.5,3.8-8.5,8.5v102.4c0,4.7,3.8,8.5,8.5,8.5h247.5c4.7,0,8.5-3.8,8.5-8.5
    V230.4C460.8,225.7,457,221.9,452.3,221.9z M256,324.3h-42.7v-51.2H256V324.3z M256,256h-42.7v-17.1H256V256z M443.7,324.3H273.1
    v-51.2h170.7L443.7,324.3L443.7,324.3z M443.7,256H273.1v-17.1h170.7L443.7,256L443.7,256z"/>
<path class="Data3-Pie" d="M169.8,271.7L169.8,271.7c-4.5-26.9-26.6-47.3-53.8-49.6s-52.4,14-61.5,39.7c-9,25.7,0.5,54.3,23.1,69.4
    l0.1,0.1c0.1,0,0.2,0.1,0.2,0.1c19.8,13.3,45.6,13.5,65.6,0.5S173.9,295.2,169.8,271.7L169.8,271.7L169.8,271.7z M119.5,239.8
    c14.2,3,26,12.9,31.2,26.5l-31.2,5.2C119.5,271.5,119.5,239.8,119.5,239.8z M70.1,269.2c4.5-15,16.9-26.3,32.3-29.4V279l-21.7,32.6
    C69.6,300.5,65.6,284.2,70.1,269.2z M110.9,324.3c-5.5,0-11-1.1-16.1-3.2l21.1-31.7l37.5-6.3C152.6,306,133.9,324.2,110.9,324.3z"/>
<path class="Data2-Monitor" d="M469.3,76.8h-62c-1.3-1.7-2.5-3.5-3.8-5.2c-2.6-3.3-7.3-4.2-11-2.1l-23.9,13.8c-2.6-2.9-5.4-5.6-8.2-8.2
    l13.8-23.9c2.1-3.7,1.2-8.3-2.1-11c-14.1-11.2-29.7-20.2-46.4-26.8c-3.9-1.6-8.4,0-10.5,3.6l-13.8,23.9c-3.7-1.1-7.5-2.1-11.2-3
    V10.4c0-4.2-3.1-7.8-7.2-8.4c-17.8-2.6-36-2.6-53.8,0c-4.2,0.6-7.2,4.2-7.2,8.4v27.5c-3.7,0.8-7.5,1.8-11.2,3L196.8,17
    c-2.1-3.7-6.6-5.2-10.5-3.6c-16.7,6.6-32.4,15.7-46.4,26.8c-3.3,2.6-4.2,7.3-2.1,11l13.8,23.9c-2.9,2.6-5.6,5.4-8.2,8.2l-23.9-13.8
    c-3.7-2.1-8.3-1.2-10.9,2.1c-1.3,1.7-2.6,3.5-3.8,5.2h-62C19.1,76.8,0,95.9,0,119.5v281.6c0,23.6,19.1,42.6,42.7,42.7h136.5v17.1
    h-59.7c-4.7,0-8.5,3.8-8.5,8.5v34.1c0,4.7,3.8,8.5,8.5,8.5h273.1c4.7,0,8.5-3.8,8.5-8.5v-34.1c0-4.7-3.8-8.5-8.5-8.5h-59.7v-17.1
    h136.5c23.6,0,42.6-19.1,42.7-42.7V119.5C512,95.9,492.9,76.8,469.3,76.8z M117.4,88l23.4,13.6c3.6,2.1,8.2,1.3,10.8-1.9
    c4.9-5.9,10.4-11.3,16.3-16.3c3.2-2.7,4-7.2,1.9-10.8l-13.6-23.4c9.2-6.7,19.1-12.4,29.5-17.1l13.5,23.4c2.1,3.6,6.4,5.1,10.3,3.8
    c7.2-2.6,14.6-4.6,22.2-5.8c4.1-0.7,7.1-4.3,7.1-8.4v-27c11.4-1.1,22.8-1.1,34.1,0v27c0,4.2,3,7.7,7.1,8.4c7.5,1.3,15,3.2,22.2,5.8
    c3.9,1.4,8.2-0.2,10.3-3.8l13.5-23.4c10.4,4.7,20.3,10.4,29.5,17.1l-13.6,23.4c-2.1,3.6-1.3,8.2,1.9,10.8
    c5.9,4.9,11.3,10.4,16.3,16.3c2.7,3.2,7.2,4,10.8,1.9L394.6,88c6.7,9.2,12.4,19.1,17.1,29.5l-23.4,13.5c-3.6,2.1-5.1,6.4-3.8,10.3
    c2.6,7.2,4.6,14.6,5.8,22.2c0.7,4.1,4.3,7.1,8.4,7.1h27c0.3,2.8,0.3,5.7,0.4,8.5H375c-4.4-62.5-56.4-110.9-119-110.9
    s-114.6,48.4-119,110.9H85.8c0.1-2.8,0.1-5.8,0.4-8.5h27.1c4.2,0,7.7-3,8.4-7.1c1.3-7.5,3.2-15,5.8-22.2c1.4-3.9-0.2-8.2-3.8-10.3
    l-23.4-13.5C105.1,107.2,110.8,97.3,117.4,88z M358,179.2H154c4.4-53.1,48.7-93.9,102-93.9C309.2,85.3,353.6,126.1,358,179.2z
     M384,477.9v17.1H128v-17.1H384z M196.3,460.8v-17.1h119.5v17.1H196.3z M494.9,401.1c0,14.1-11.5,25.6-25.6,25.6H42.7
    c-14.1,0-25.6-11.5-25.6-25.6v-25.6h477.9L494.9,401.1L494.9,401.1z M494.9,358.4H17.1V119.5c0-14.1,11.5-25.6,25.6-25.6h50.7
    c-4.5,7.8-8.4,15.8-11.7,24.1c-1.6,3.9,0,8.4,3.6,10.5l23.9,13.8c-1.1,3.7-2.1,7.5-3,11.2H78.7c-4.2,0-7.8,3.1-8.4,7.2
    c-0.9,6.1-1.4,12.2-1.7,18.4h-8.8c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h392.5c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-8.8
    c-0.2-6.1-0.8-12.3-1.7-18.4c-0.6-4.2-4.2-7.2-8.4-7.2h-27.5c-0.8-3.7-1.8-7.5-3-11.2l23.9-13.8c3.7-2.1,5.2-6.6,3.6-10.5
    c-3.3-8.3-7.2-16.4-11.7-24.1h50.7c14.1,0,25.6,11.5,25.6,25.6L494.9,358.4L494.9,358.4z"/>
<path class="Data1-Cog" d="M93.4,93.9c-4.5,7.8-8.4,15.8-11.7,24.1c-1.6,3.9,0,8.4,3.6,10.5l23.9,13.8c-1.1,3.7-2.1,7.5-3,11.2H78.7
    c-4.2,0-7.8,3.1-8.4,7.2c-0.9,6.1-1.4,12.2-1.7,18.4h-8.8c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h392.5
    c4.7,0,8.5-3.8,8.5-8.5c0-4.7-3.8-8.5-8.5-8.5h-8.8c-0.2-6.1-0.8-12.3-1.7-18.4c-0.6-4.2-4.2-7.2-8.4-7.2h-27.5
    c-0.8-3.7-1.8-7.5-3-11.2l23.9-13.8c3.7-2.1,5.2-6.6,3.6-10.5c-3.3-8.3-7.2-16.4-11.7-24.1l0,0c-5-8.5,0,0-5-8.5l-6.3-8.5
    c-1.3-1.7-2.5-3.5-3.8-5.2c-2.6-3.3-7.3-4.2-11-2.1l-23.9,13.8c-2.6-2.9-5.4-5.6-8.2-8.2l13.8-23.9c2.1-3.7,1.2-8.3-2.1-11
    c-14.1-11.2-29.7-20.2-46.4-26.8c-3.9-1.6-8.4,0-10.5,3.6l-13.8,23.9c-3.7-1.1-7.5-2.1-11.2-3V10.4c0-4.2-3.1-7.8-7.2-8.4
    c-17.8-2.6-36-2.6-53.8,0c-4.2,0.6-7.2,4.2-7.2,8.4v27.5c-3.7,0.8-7.5,1.8-11.2,3L196.8,17c-2.1-3.7-6.6-5.2-10.5-3.6
    c-16.7,6.6-32.4,15.7-46.4,26.8c-3.3,2.6-4.2,7.3-2.1,10.9l13.8,23.9c-2.9,2.6-5.6,5.4-8.2,8.2l-23.9-13.8c-3.7-2.1-8.3-1.2-11,2.1
    c-1.3,1.7-2.6,3.5-3.8,5.2 M154,179.2c4.4-53,48.7-93.9,102-93.9s97.6,40.8,102,93.9H154z M375,179.2
    c-4.4-62.5-56.4-110.9-119-110.9s-114.6,48.4-119,110.9H85.8c0.1-2.8,0.1-5.8,0.4-8.5h27.1c4.2,0,7.7-3,8.4-7.1
    c1.3-7.5,3.2-15,5.8-22.2c1.4-3.9-0.2-8.2-3.8-10.3l-23.4-13.5c4.7-10.4,10.4-20.3,17.1-29.5l23.4,13.6c3.6,2.1,8.2,1.3,10.8-1.9
    c4.9-5.9,10.4-11.3,16.3-16.3c3.2-2.7,4-7.2,1.9-10.8l-13.6-23.4c9.2-6.7,19.1-12.4,29.5-17.1l13.5,23.4c2.1,3.6,6.4,5.1,10.3,3.8
    c7.2-2.6,14.6-4.6,22.2-5.8c4.1-0.7,7.1-4.3,7.1-8.4v-27c11.3-1.1,22.8-1.1,34.1,0v27c0,4.2,3,7.7,7.1,8.4c7.5,1.3,15,3.2,22.2,5.8
    c3.9,1.4,8.2-0.2,10.3-3.8l13.5-23.4c10.4,4.7,20.3,10.4,29.5,17.1l-13.6,23.4c-2.1,3.6-1.3,8.2,1.9,10.8
    c5.9,4.9,11.3,10.4,16.3,16.3c2.7,3.2,7.2,4,10.8,1.9L394.6,88c6.7,9.2,12.4,19.1,17.1,29.5l-23.4,13.5c-3.6,2.1-5.1,6.4-3.8,10.3
    c2.6,7.2,4.6,14.6,5.8,22.2c0.7,4.1,4.3,7.1,8.4,7.1h27c0.3,2.8,0.3,5.7,0.4,8.5H375z"/>
</symbol>

<symbol id="svg--Trading" viewbox="0 -100 500 750">
            <path class="Trading2-Bars" d="M503.5,494.9h-42.7V230.4c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5v264.5h-17.1V349.9
                c0-4.7-3.8-8.5-8.5-8.5h-50.5c-4.7,0-8.5,3.8-8.5,8.5v145.1h-17.8V298.7c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5
                v196.3h-17.1V332.8c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5v162.1h-17.1v-93.9c0-4.7-3.8-8.5-8.5-8.5H59.7
                c-4.7,0-8.5,3.8-8.5,8.5v93.9H8.5c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h51.2c4.7,0,8.5-3.8,8.5-8.5v-93.9h34.1v93.9
                c0,4.7,3.8,8.5,8.5,8.5h34.1c4.7,0,8.5-3.8,8.5-8.5V341.3h34.1v162.1c0,4.7,3.8,8.5,8.5,8.5h34.1c4.7,0,8.5-3.8,8.5-8.5V307.2
                h34.1v196.3c0,4.7,3.8,8.5,8.5,8.5h34.8c4.7,0,8.5-3.8,8.5-8.5V358.4h33.4v145.1c0,4.7,3.8,8.5,8.5,8.5h34.1
                c4.7,0,8.5-3.8,8.5-8.5V238.9h34.1v264.5c0,4.7,3.8,8.5,8.5,8.5h51.2c4.7,0,8.5-3.8,8.5-8.5S508.2,494.9,503.5,494.9z"/>
            <path class="Trading1-Line" d="M34.1,324.3c18.8,0,34.1-15.3,34.1-34.1c0-4-0.8-7.8-2.1-11.4l167.6-167.6c6,5.2,13.7,8.4,22.2,8.4
                c6.3,0,12.2-1.8,17.3-4.9l38.8,38.8c-3,5.1-4.9,10.9-4.9,17.3c0,18.8,15.3,34.1,34.1,34.1c18.8,0,34.1-15.3,34.1-34.1
                c0-6.3-1.8-12.2-4.8-17.2l90-90c5.1,3,10.9,4.8,17.2,4.8c18.8,0,34.1-15.3,34.1-34.1C512,15.3,496.7,0,477.9,0
                s-34.1,15.3-34.1,34.1c0,6.3,1.8,12.2,4.8,17.2l-90,90c-5.1-3-10.9-4.8-17.2-4.8c-6.3,0-12.1,1.8-17.2,4.8l-38.8-38.8
                c3-5.1,4.8-10.9,4.8-17.2c0-18.8-15.3-34.1-34.1-34.1c-18.8,0-34.1,15.3-34.1,34.1c0,4,0.8,7.8,2.1,11.4L56.3,264.4
                c-6-5.2-13.7-8.4-22.2-8.4C15.3,256,0,271.3,0,290.1S15.3,324.3,34.1,324.3z M477.9,17.1c9.4,0,17.1,7.7,17.1,17.1
                c0,9.4-7.7,17.1-17.1,17.1c-4.7,0-8.9-1.9-12-4.9c0,0,0-0.1-0.1-0.1s-0.1,0-0.1-0.1c-3-3.1-4.9-7.3-4.9-12
                C460.8,24.7,468.5,17.1,477.9,17.1z M341.3,153.6c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C324.3,161.3,331.9,153.6,341.3,153.6z M256,68.3c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C238.9,75.9,246.6,68.3,256,68.3z M34.1,273.1c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C17.1,280.7,24.7,273.1,34.1,273.1z"/>
</symbol>

<symbol id="svg--Solutions" viewbox="0 -100 500 730">
<path class="Solutions8-Ground4" d="M503.5,494.9H366.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h136.5c4.7,0,8.5-3.8,8.5-8.5
    S508.2,494.9,503.5,494.9z"/>
<path class="Solutions7-Ground3" d="M332.8,494.9h-17.1c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h17.1c4.7,0,8.5-3.8,8.5-8.5
    S337.5,494.9,332.8,494.9z"/>
<path class="Solutions6-Ground2" d="M247.5,494.9h-85.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h119.5c4.7,0,8.5-3.8,8.5-8.5
    c0-4.7-3.8-8.5-8.5-8.5h-17.1"/>
<path class="Solutions5-Ground1" d="M128,494.9H8.5c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5H128c4.7,0,8.5-3.8,8.5-8.5
    S132.7,494.9,128,494.9z"/>
<path class="Solutions4-RightLeaf" d="M334.2,426.7c7.5,0,46.1-1.4,72.9-28.1c29.6-29.6,28.2-72.8,28.1-74.3v-42.7
    c0-4.7-3.8-8.5-8.5-8.5l-42.3,0l-1.8,0c-7.5,0-46.1,1.4-72.9,28.1c-29.6,29.6-28.2,72.8-28.1,74.3v42.6c0,1.2,0.2,2.3,0.7,3.4
    c0,0.1,0.1,0.2,0.2,0.3c0.4,0.9,0.9,1.7,1.6,2.4c0.7,0.7,1.5,1.1,2.3,1.5c0.2,0.1,0.3,0.2,0.4,0.3c1,0.4,2.2,0.7,3.3,0.7
    c0,0,0,0,0.1,0l42.2,0L334.2,426.7z M398.6,309.7c-3.3-3.3-8.7-3.3-12.1,0l-87.8,87.8l0-22.4c0-0.4-1.3-37.5,23.1-61.9
    c22-22,54.5-23.1,60.8-23.1l35.6,0l0,34.5c0,0.4,1.1,37.7-23.1,61.9c-22,22-54.5,23.1-60.8,23.1l-23.5,0l87.8-87.8
    C401.9,318.5,401.9,313.1,398.6,309.7z"/>
<path class="Solutions3-LeftLeaf" d="M104.9,432.7c26.8,26.8,65.4,28.1,72.8,28.1l44.2,0c0.5,0,0.8-0.2,1.3-0.2c0.7-0.1,1.4-0.1,2-0.4
    c1-0.4,2-1.1,2.8-1.9h0c0.2-0.2,0.3-0.5,0.5-0.7c0.5-0.6,1-1.2,1.3-2c0.5-1.1,0.7-2.2,0.7-3.4l0-42.2c0.1-1.8,1.4-45-28.2-74.6
    c-26.8-26.8-65.4-28.1-72.8-28.1l-44.1,0c-4.7,0-8.5,3.8-8.5,8.5l0,42.3C76.7,359.9,75.3,403.1,104.9,432.7z M93.9,358.4v-34.1
    l35.5,0c6.3,0,38.8,1.1,60.8,23.1c24.2,24.2,23.2,61.5,23.2,62.2v22l-87.8-87.8c-3.3-3.3-8.7-3.3-12.1,0c-3.3,3.3-3.3,8.7,0,12.1
    l87.9,87.9l-23.6,0c-6.3,0-38.8-1.1-60.7-23.1C92.7,396.4,93.8,359.1,93.9,358.4z"/>
<path class="Solutions2-Stem" d="M247.5,238.9v256l17.1,0v-256"/>
<path class="Solutions1-Flower" d="M264.5,238.9h8.5c9.4,0,17.1-7.7,17.1-17.1v-24.2c30.1-13.2,51.2-43.2,51.2-78.2V76.8
    c0-4.7-3.8-8.5-8.5-8.5h-8.5V17.1c0-9.4-7.7-17.1-17.1-17.1h-17.1c-9.4,0-17.1,7.7-17.1,17.1v51.2h-34.1V17.1
    c0-9.4-7.7-17.1-17.1-17.1h-17.1c-9.4,0-17.1,7.7-17.1,17.1v51.2h-8.5c-4.7,0-8.5,3.8-8.5,8.5v42.7c0,34.9,21.1,65,51.2,78.2v24.2
    c0,9.4,7.7,17.1,17.1,17.1h8.5 M290.1,17.1h17.1v51.2h-17.1L290.1,17.1L290.1,17.1z M204.8,17.1h17.1v51.2h-17.1V17.1z M187.7,119.5
    V85.3h136.5v34.1c0,37.6-30.6,68.3-68.3,68.3C218.4,187.7,187.7,157.1,187.7,119.5z M238.9,221.9v-18.8c5.5,1.1,11.2,1.7,17.1,1.7
    s11.6-0.6,17.1-1.7v18.8H238.9z"/>
<symbol>

<symbol id="svg--Contracts" viewbox="0 -100 500 750">
<path class="Contracts16-RibbonRight" d="M449,438c-2.4-4.1-7.6-5.5-11.7-3.1c-4.1,2.4-5.5,7.6-3.1,11.7l18.5,31.9l-5.3,0.3
    c-2.7,0.2-5.1,1.6-6.6,3.8l-2.9,4.4l-18.3-31.7c-2.4-4.1-7.6-5.5-11.7-3.1c-4.1,2.4-5.5,7.6-3.1,11.7l25.2,43.6
    c1.5,2.6,4.2,4.2,7.1,4.3h0.3c2.9,0,5.5-1.4,7.1-3.8l8.2-12.4l14.8-0.9c3-0.2,5.6-1.9,7-4.5s1.3-5.8-0.1-8.3L449,438z"/>
<path class="Contracts15-RibbonLeft" d="M377,452.1c-4.1-2.4-9.3-1-11.7,3.1L347,487l-2.9-4.4c-1.5-2.2-3.9-3.7-6.6-3.8l-5.3-0.3
    l18.7-32.3c2.4-4.1,1-9.3-3.1-11.7c-4.1-2.4-9.3-1-11.7,3.1l-25.6,44.3c-1.5,2.6-1.5,5.7-0.1,8.3s4,4.3,7,4.5l14.8,0.9l8.2,12.4
    c1.6,2.4,4.3,3.8,7.1,3.8h0.3c2.9-0.1,5.6-1.7,7.1-4.3l25.3-43.8C382.5,459.7,381.1,454.4,377,452.1z"/>
<path class="Contracts14-Stamp" d="M443.6,392.3c0-28.2-23-51.2-51.2-51.2s-51.2,23-51.2,51.2s23,51.2,51.2,51.2
    C420.7,443.5,443.6,420.6,443.6,392.3z M392.4,426.5c-18.8,0-34.1-15.3-34.1-34.1s15.3-34.1,34.1-34.1c18.8,0,34.1,15.3,34.1,34.1
    S411.3,426.5,392.4,426.5z"/>
<path class="Contracts13-Signature" d="M162.9,396.2c2.1,4.2,7.2,5.9,11.4,3.8c4.2-2.1,5.9-7.2,3.8-11.5c-8.4-16.9-10.3-32.1-5.1-40.6
    c2.8-4.5,7.7-6.8,14.5-6.8c4.1,0,5.6,1.4,6.5,2.8c6.4,9.2,0.3,37.1-6,54c-1.4,3.8,0,8,3.4,10.2c3.4,2.2,7.8,1.7,10.6-1.1
    c3.6-3.6,7.6-7.3,11-10.2v4.2c0,3.4,2.1,6.6,5.3,7.9c3.2,1.3,6.9,0.6,9.3-1.8c3.9-3.9,8.4-7.7,12.2-10.5c-0.1,0.2-0.2,0.4-0.3,0.6
    c-1.3,2.6-1.2,5.8,0.4,8.3c1.6,2.5,4.3,4,7.3,4h34.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-22.2c0.7-4.1,0.5-8.2-1.5-11.5
    c-2.2-3.5-6-5.5-10.4-5.5c-5.3,0-11.5,3.2-17.1,7.2c-0.4-3.7-2.6-6.8-6-8.2c-2.3-0.9-5.2-2.2-12.3,2.1c2.8-14.7,3.6-31.6-3.7-42.2
    c-3.2-4.6-9.4-10.1-20.6-10.1c-12.8,0-23.1,5.3-29,14.9C150.1,352.8,151.7,373.6,162.9,396.2z"/>
<path class="Contracts12-Writing10" d="M392.4,281.4c0-4.7-3.8-8.5-8.5-8.5h-85.3c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h85.3
    C388.6,289.9,392.4,286.1,392.4,281.4z"/>
<path class="Contracts11-Writing9" d="M162,289.9h102.4c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,289.9,162,289.9z"/>
<path class="Contracts10-Writing8" d="M358.3,230.2c0,4.7,3.8,8.5,8.5,8.5H418c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-51.2
    C362.1,221.7,358.3,225.5,358.3,230.2z"/>
<path class="Contracts9-Writing7" d="M247.4,221.7c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h85.3c4.7,0,8.5-3.8,8.5-8.5
    s-3.8-8.5-8.5-8.5H247.4z"/>
<path class="Contracts8-Writing6" d="M162,238.7h51.2c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,238.7,162,238.7z"/>
<path class="Contracts7-Writing5" d="M307.1,179c0,4.7,3.8,8.5,8.5,8.5H401c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-85.3
    C310.9,170.5,307.1,174.3,307.1,179z"/>
<path class="Contracts6-Writing4" d="M162,187.5h119.5c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,187.5,162,187.5z"/>
<path class="Contracts5-Writing3" d="M349.8,136.3c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    s3.8,8.5,8.5,8.5H349.8z"/>
<path class="Contracts4-Writing2" d="M298.6,119.3h-68.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h68.3c4.7,0,8.5-3.8,8.5-8.5
    C307.1,123.1,303.3,119.3,298.6,119.3z"/>
<path class="Contracts3-Writing1" d="M162,136.3h34.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,136.3,162,136.3z"/>
<path class="Contracts2-PageRight" d="M418,0H93.8C51.5,0,17.1,34.3,17,76.5v0.1v0.1v0.1v0.1c0.1,27.2,14.8,52.6,38.4,66.2
    c4.1,2.4,9.3,1,11.7-3.1c2.4-4.1,1-9.3-3.1-11.7C45.5,117.7,34.1,97.9,34,76.7c0.1-32.9,26.8-59.6,59.7-59.6H418
    c32.9,0,59.7,26.8,59.7,59.7v358.4c0,4.3-1.2,8.7-3.5,12.5c-2.4,4.1-1,9.3,3,11.7c1.4,0.8,2.9,1.2,4.3,1.2c2.9,0,5.8-1.5,7.4-4.2
    c3.8-6.5,5.8-13.8,5.8-21.2V76.8C494.8,34.4,460.4,0,418,0z"/>
<path class="Contracts1-PageLeft" d="M290,460.6H127.9c-14.1,0-25.6-11.5-25.6-25.6V42.5c0-4.7-3.8-8.5-8.5-8.5
    c-23.5,0-42.7,19.1-42.7,42.7c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5c0-11.1,7.1-20.6,17.1-24.1V435c0,23.5,19.1,42.7,42.7,42.7H290
    c4.7,0,8.5-3.8,8.5-8.5S294.8,460.6,290,460.6z"/>
</symbol>

<symbol id="svg--Finance" viewbox="0 -100 500 750">
<path class="Finance10-CoinDollarSign" d="M170.7,290.1c9.4,0,17.1,7.7,17.1,17.1c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5
    c0-15.9-10.9-29.1-25.6-32.9v-1.2c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v1.2c-14.7,3.8-25.6,17.1-25.6,32.9
    c0,18.8,15.3,34.1,34.1,34.1c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1c0-4.7-3.8-8.5-8.5-8.5
    s-8.5,3.8-8.5,8.5c0,15.9,10.9,29.1,25.6,32.9v1.2c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5v-1.2c14.7-3.8,25.6-17.1,25.6-32.9
    c0-18.8-15.3-34.1-34.1-34.1c-9.4,0-17.1-7.7-17.1-17.1S161.3,290.1,170.7,290.1z"/>
<path class="Finance9-CoinInside" d="M170.7,196.3c-75.3,0-136.5,61.3-136.5,136.5s61.3,136.5,136.5,136.5s136.5-61.3,136.5-136.5
    S245.9,196.3,170.7,196.3z M170.7,452.3c-65.9,0-119.5-53.6-119.5-119.5s53.6-119.5,119.5-119.5s119.5,53.6,119.5,119.5
    S236.5,452.3,170.7,452.3z"/>
<path class="Finance8-CoinOutside" d="M341.3,332.8c0-94.1-76.6-170.7-170.7-170.7S0,238.7,0,332.8s76.6,170.7,170.7,170.7
    S341.3,426.9,341.3,332.8z M170.7,486.4c-84.7,0-153.6-68.9-153.6-153.6S86,179.2,170.7,179.2s153.6,68.9,153.6,153.6
    S255.4,486.4,170.7,486.4z"/>
<path class="Finance7-Stack7" d="M486.4,452.3c-4.7,0-8.5,3.8-8.5,8.5v25.6H281.6c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h204.8
    c4.7,0,8.5-3.8,8.5-8.5v-34.1C494.9,456.1,491.1,452.3,486.4,452.3z"/>
<path class="Finance6-Stack6" d="M503.5,384c-4.7,0-8.5,3.8-8.5,8.5v25.6H349.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h153.6
    c4.7,0,8.5-3.8,8.5-8.5v-34.1C512,387.8,508.2,384,503.5,384z"/>
<path class="Finance5-Stack5" d="M477.9,349.9H366.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h119.5c4.7,0,8.5-3.8,8.5-8.5v-34.1
    c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5V349.9z"/>
<path class="Finance4-Stack4" d="M366.9,298.7h102.4c4.7,0,8.5-3.8,8.5-8.5V256c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v25.6h-93.9
    c-4.7,0-8.5,3.8-8.5,8.5S362.2,298.7,366.9,298.7z"/>
<path class="Finance3-Stack3" d="M460.8,213.3h-128c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h136.5c4.7,0,8.5-3.8,8.5-8.5v-34.1
    c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5L460.8,213.3L460.8,213.3z"/>
<path class="Finance2-Stack2" d="M460.8,153.6v-34.1c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v25.6H264.5c-4.7,0-8.5,3.8-8.5,8.5
    s3.8,8.5,8.5,8.5h187.7C457,162.1,460.8,158.3,460.8,153.6z"/>
<path class="Finance1-Stack1" d="M128,145.1c4.7,0,8.5-3.8,8.5-8.5V25.6h307.2v51.2H162.1c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5
    h290.1c4.7,0,8.5-3.8,8.5-8.5V17.1c0-4.7-3.8-8.5-8.5-8.5H128c-4.7,0-8.5,3.8-8.5,8.5v119.5C119.5,141.2,123.3,145.1,128,145.1z"/>
</symbol>

<symbol id="svg--Sales" viewbox="0 -100 600 700">
<path class="Sales3-BackTag" d="M443.1,312.1c-4.1-2.4-9.3-1-11.7,3L333.6,482c-7.1,12.2-22.7,16.4-34.6,9.6l-19.1-12.3
    c-4-2.6-9.2-1.4-11.8,2.5c-2.6,4-1.4,9.2,2.5,11.8l19.4,12.6c6.7,3.9,14,5.7,21.3,5.7c14.8,0,29.1-7.6,37-21.3l97.8-166.8
    C448.5,319.7,447.1,314.5,443.1,312.1z"/>
<path class="Sales2-FrontTag" d="M468.9,0H332.3c-26.4,0-46.1,8.4-65.8,28.1c-3.3,3.3-3.3,8.7,0,12.1c3.3,3.3,8.7,3.3,12.1,0
    c16.6-16.6,31.7-23.1,53.7-23.1h136.5c14.1,0,25.6,11.5,25.6,25.6v136.5c0,22-6.5,37.1-23.1,53.7L217.9,486.7
    c-9.7,9.7-26.5,9.7-36.2,0L24.9,329.8c-4.8-4.8-7.5-11.3-7.5-18.1c0-6.8,2.7-13.3,7.5-18.1L253.9,64.9c3.5,0.9,7.1,1.8,10.7,2.8
    c34.7,9.3,62.1,18.9,82.5,27.5c-4,7.4-6.3,15.8-6.3,24.3c0,28.2,23,51.2,51.2,51.2s51.2-23,51.2-51.2s-23-51.2-51.2-51.2
    c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5c18.8,0,34.1,15.3,34.1,34.1c0,18.8-15.3,34.1-34.1,34.1s-34.1-15.3-34.1-34.1
    c0-6.1,1.7-12.1,4.8-17.4c14.8,7.1,24,13,27.7,16.8c-1.6,0.4-4,0.9-7.6,1.3c-4.7,0.4-8.2,4.6-7.7,9.3c0.4,4.4,4.1,7.8,8.5,7.8
    c0.2,0,0.5,0,0.8,0c5.2-0.5,21.2-1.9,24.3-13.3C417,92.5,293.8,57.8,269,51.2C231.1,41,194.7,34.1,166.5,31.6
    c-34.7-3-51.5,0.9-54.7,12.8c-1.5,5.7-5.6,20.8,63.6,48.1c4.4,1.7,9.3-0.4,11.1-4.8s-0.4-9.3-4.8-11.1
    c-33.4-13.2-47.3-22.8-51.7-27.4c10.5-3.1,46.5-2.2,104.5,11L12.8,281.5c-8.1,8.1-12.5,18.8-12.5,30.2c0,11.4,4.4,22.1,12.5,30.2
    l156.9,156.9c8,8.1,18.8,12.5,30.2,12.5c11.4,0,22.1-4.4,30.2-12.5L483.4,245c19.7-19.7,28.1-39.4,28.1-65.8V42.7
    C511.5,19.1,492.4,0,468.9,0z"/>
<path class="Sales1-DollarSign" d="M279.4,224.4c-3.3-3.3-8.7-3.3-12.1,0l-4.6,4.6c-6.8-4.5-14.8-7.1-23.5-7.1
    c-23.5,0-42.7,19.1-42.7,42.7c0,12.7,5.2,22.8,9.8,30.1c4.3,6.9,7.2,16.6,7.2,21.1c0,14.1-11.5,25.6-25.6,25.6s-25.6-11.5-25.6-25.6
    c0-5.2,1.5-10.2,4.5-14.4c2.7-3.9,1.7-9.2-2.2-11.9c-3.9-2.7-9.2-1.7-11.9,2.2c-4.9,7.1-7.4,15.4-7.4,24.1c0,8.7,2.6,16.7,7.1,23.5
    l-4.6,4.6c-3.3,3.3-3.3,8.7,0,12.1c1.7,1.7,3.8,2.5,6,2.5c2.2,0,4.4-0.8,6-2.5l4.6-4.6c6.8,4.5,14.8,7.1,23.5,7.1
    c23.5,0,42.7-19.1,42.7-42.7c0-8.3-4.1-21-9.8-30.1c-5.1-8.1-7.2-14.5-7.2-21.1c0-14.1,11.5-25.6,25.6-25.6c6.8,0,13,2.7,17.6,7.1
    c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.1,0.4,0.2,0.5,0.3c4.4,4.6,7.1,10.8,7.1,17.6s-2.7,13.3-7.5,18.1c-3.3,3.3-3.3,8.7,0,12.1
    c3.3,3.3,8.7,3.3,12.1,0c8.1-8.1,12.5-18.8,12.5-30.2c0-8.7-2.6-16.7-7.1-23.5l4.6-4.6C282.7,233.1,282.7,227.7,279.4,224.4z"/>
</symbol>

</svg>

<div class="wrapper">

  <a href="" class="Link Data">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Data" />

    </svg>

  </a>

  <a href="" rel="author" class="Link Trading">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Trading" />

    </svg>
  </a>

  <a href="" rel="author" class="Link Solutions">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Solutions" />

    </svg>
  </a>

  <a href="" class="Link Contracts">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Contracts" />

    </svg>
  </a>

  <a href="" class="Link Finance">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Finance" />

    </svg>
  </a>

  <a href="" class="Link Sales">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Sales" />

    </svg>
  </a>

</div>

1 Ответ

0 голосов
/ 11 июня 2018

Это решение работает только для первого значка и не может изменить его индивидуально path, оно просто меняет все используемые внутренние пути с помощью use.

.Data .svg--icon:hover use {
  color: #3a3a3a;
  fill: #009639;
}

Надеюсь, это поможет:>

html {
  box-sizing: border-box;
  background: #f3f3f3;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

.clip {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.svg--source {
  
}

.svg--icon {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.Link {
  width: 5rem;
  height: 5rem;
  float: left;
  margin: .5rem 1rem .5rem 0;
  color: #353c4a;
  border: .125rem solid #f3f3f3;
  box-shadow: 0 0 8px 0 rgba(50, 50, 50, 0.15);
  border-radius: 50%;
  transition: 250ms;
}
.Link:last-child {
  margin-right: 0;
}
.Link:focus {
  outline-color: inherit;
}

/* Icon Colours */

/* ------ Data ------ */
.Data1-Cog{color:#eda700}
.Data2-Monitor{fill:#3a3a3a}
.Data3-Pie{color:#3ca0ef}
.Data4-Table{color:#3a3a3a}
.Data5-TableData1{color:#9b2242}
.Data6-TableData2{color:#009639}
.Data7-TableData3{color:#009639}

.Data:hover, .Data:focus {
  color: #3a3a3a;
  fill: #009639;
  box-shadow: 0 0 24px 0 #3ca0ef; 
}

.Data #svg--Data path {
  color:pink;
  fill:pink;
}
/* ------------------ */

/* ------ Trading ------ */
.Trading1-Line{color:#9b2242}
.Trading2-Bars{color:#009639}

.Trading:hover, .Trading:focus {
  color: #dd4b39;
  box-shadow: 0 0 24px 0 #dd4b39;
}
/* ------------------ */

/* ------ Solutions ------ */
.Solutions1-Flower{color:#3ca0ef}
.Solutions2-Stem{color:#009639}
.Solutions3-LeftLeaf{color:#009639}
.Solutions4-RightLeaf{color:#009639}
.Solutions5-Ground1{color:#9b2242}
.Solutions6-Ground2{color:#9b2242}
.Solutions7-Ground3{color:#9b2242}
.Solutions8-Ground4{color:#9b2242}

.Solutions:hover, .Solutions:focus {
  color: #3b5998;
  box-shadow: 0 0 24px 0 #3b5998;
}
/* ------------------ */

/* ------ Contracts ------ */
.Contracts1-PageLeft{color:#3a3a3a}
.Contracts2-PageRight{color:#3a3a3a}
.Contracts3-Writing1{color:#000000}
.Contracts4-Writing2{color:#000000}
.Contracts5-Writing3{color:#000000}
.Contracts6-Writing4{color:#000000}
.Contracts7-Writing5{color:#000000}
.Contracts8-Writing6{color:#000000}
.Contracts9-Writing7{color:#000000}
.Contracts10-Writing8{color:#000000}
.Contracts11-Writing9{color:#000000}
.Contracts12-Writing10{color:#000000}
.Contracts13-Signature{color:#9b2242}
.Contracts14-Stamp{color:#eda700}
.Contracts15-RibbonLeft{color:#723dd2}
.Contracts16-RibbonRight{color:#723dd2}

.Contracts:hover, .Contracts:focus {
  color: #4183c4;
  box-shadow: 0 0 24px 0 #4183c4;
}
/* ------------------ */

/* ------ Finance ------ */
.Finance1-Stack1{color:#3a3a3a}
.Finance2-Stack2{color:#3a3a3a}
.Finance3-Stack3{color:#3a3a3a}
.Finance4-Stack4{color:#3a3a3a}
.Finance5-Stack5{color:#3a3a3a}
.Finance6-Stack6{color:#3a3a3a}
.Finance7-Stack7{color:#3a3a3a}
.Finance8-CoinOutside{color:#eda700}
.Finance9-CoinInside{color:#fde03a}
.Finance10-CoinDollarSign{color:#009639}

.Finance:hover, .Finance:focus {
  color: #bd081c;
  box-shadow: 0 0 24px 0 #bd081c;
}
/* ------------------ */

/* ------ Sales ------ */
.Sales1-DollarSign{color:#009639}
.Sales2-FrontTag{color:#3a3a3a}
.Sales3-BackTag{color:#eda700}

.Sales:hover, .Sales:focus {
  color: #cd201f;
  box-shadow: 0 0 24px 0 #cd201f;
}
/* ------------------ */


.Data .svg--icon:hover use {
  color: #3a3a3a;
  fill: #009639;
}
<html>
<body>
<svg class="svg--source" width="0" height="0" aria-hidden="true">

<symbol id="svg--Data" viewbox="0 -100 500 750">
<path class="Data7-TableData3" d="M401.1,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S396.4,307.2,401.1,307.2z"/>
<path class="Data6-TableData2" d="M349.9,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S345.2,307.2,349.9,307.2z"/>
<path class="Data5-TableData1" d="M298.7,307.2h17.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    S294,307.2,298.7,307.2z"/>
<path class="Data4-Table" d="M452.3,221.9H204.8c-4.7,0-8.5,3.8-8.5,8.5v102.4c0,4.7,3.8,8.5,8.5,8.5h247.5c4.7,0,8.5-3.8,8.5-8.5
    V230.4C460.8,225.7,457,221.9,452.3,221.9z M256,324.3h-42.7v-51.2H256V324.3z M256,256h-42.7v-17.1H256V256z M443.7,324.3H273.1
    v-51.2h170.7L443.7,324.3L443.7,324.3z M443.7,256H273.1v-17.1h170.7L443.7,256L443.7,256z"/>
<path class="Data3-Pie" d="M169.8,271.7L169.8,271.7c-4.5-26.9-26.6-47.3-53.8-49.6s-52.4,14-61.5,39.7c-9,25.7,0.5,54.3,23.1,69.4
    l0.1,0.1c0.1,0,0.2,0.1,0.2,0.1c19.8,13.3,45.6,13.5,65.6,0.5S173.9,295.2,169.8,271.7L169.8,271.7L169.8,271.7z M119.5,239.8
    c14.2,3,26,12.9,31.2,26.5l-31.2,5.2C119.5,271.5,119.5,239.8,119.5,239.8z M70.1,269.2c4.5-15,16.9-26.3,32.3-29.4V279l-21.7,32.6
    C69.6,300.5,65.6,284.2,70.1,269.2z M110.9,324.3c-5.5,0-11-1.1-16.1-3.2l21.1-31.7l37.5-6.3C152.6,306,133.9,324.2,110.9,324.3z"/>
<path class="Data2-Monitor" d="M469.3,76.8h-62c-1.3-1.7-2.5-3.5-3.8-5.2c-2.6-3.3-7.3-4.2-11-2.1l-23.9,13.8c-2.6-2.9-5.4-5.6-8.2-8.2
    l13.8-23.9c2.1-3.7,1.2-8.3-2.1-11c-14.1-11.2-29.7-20.2-46.4-26.8c-3.9-1.6-8.4,0-10.5,3.6l-13.8,23.9c-3.7-1.1-7.5-2.1-11.2-3
    V10.4c0-4.2-3.1-7.8-7.2-8.4c-17.8-2.6-36-2.6-53.8,0c-4.2,0.6-7.2,4.2-7.2,8.4v27.5c-3.7,0.8-7.5,1.8-11.2,3L196.8,17
    c-2.1-3.7-6.6-5.2-10.5-3.6c-16.7,6.6-32.4,15.7-46.4,26.8c-3.3,2.6-4.2,7.3-2.1,11l13.8,23.9c-2.9,2.6-5.6,5.4-8.2,8.2l-23.9-13.8
    c-3.7-2.1-8.3-1.2-10.9,2.1c-1.3,1.7-2.6,3.5-3.8,5.2h-62C19.1,76.8,0,95.9,0,119.5v281.6c0,23.6,19.1,42.6,42.7,42.7h136.5v17.1
    h-59.7c-4.7,0-8.5,3.8-8.5,8.5v34.1c0,4.7,3.8,8.5,8.5,8.5h273.1c4.7,0,8.5-3.8,8.5-8.5v-34.1c0-4.7-3.8-8.5-8.5-8.5h-59.7v-17.1
    h136.5c23.6,0,42.6-19.1,42.7-42.7V119.5C512,95.9,492.9,76.8,469.3,76.8z M117.4,88l23.4,13.6c3.6,2.1,8.2,1.3,10.8-1.9
    c4.9-5.9,10.4-11.3,16.3-16.3c3.2-2.7,4-7.2,1.9-10.8l-13.6-23.4c9.2-6.7,19.1-12.4,29.5-17.1l13.5,23.4c2.1,3.6,6.4,5.1,10.3,3.8
    c7.2-2.6,14.6-4.6,22.2-5.8c4.1-0.7,7.1-4.3,7.1-8.4v-27c11.4-1.1,22.8-1.1,34.1,0v27c0,4.2,3,7.7,7.1,8.4c7.5,1.3,15,3.2,22.2,5.8
    c3.9,1.4,8.2-0.2,10.3-3.8l13.5-23.4c10.4,4.7,20.3,10.4,29.5,17.1l-13.6,23.4c-2.1,3.6-1.3,8.2,1.9,10.8
    c5.9,4.9,11.3,10.4,16.3,16.3c2.7,3.2,7.2,4,10.8,1.9L394.6,88c6.7,9.2,12.4,19.1,17.1,29.5l-23.4,13.5c-3.6,2.1-5.1,6.4-3.8,10.3
    c2.6,7.2,4.6,14.6,5.8,22.2c0.7,4.1,4.3,7.1,8.4,7.1h27c0.3,2.8,0.3,5.7,0.4,8.5H375c-4.4-62.5-56.4-110.9-119-110.9
    s-114.6,48.4-119,110.9H85.8c0.1-2.8,0.1-5.8,0.4-8.5h27.1c4.2,0,7.7-3,8.4-7.1c1.3-7.5,3.2-15,5.8-22.2c1.4-3.9-0.2-8.2-3.8-10.3
    l-23.4-13.5C105.1,107.2,110.8,97.3,117.4,88z M358,179.2H154c4.4-53.1,48.7-93.9,102-93.9C309.2,85.3,353.6,126.1,358,179.2z
     M384,477.9v17.1H128v-17.1H384z M196.3,460.8v-17.1h119.5v17.1H196.3z M494.9,401.1c0,14.1-11.5,25.6-25.6,25.6H42.7
    c-14.1,0-25.6-11.5-25.6-25.6v-25.6h477.9L494.9,401.1L494.9,401.1z M494.9,358.4H17.1V119.5c0-14.1,11.5-25.6,25.6-25.6h50.7
    c-4.5,7.8-8.4,15.8-11.7,24.1c-1.6,3.9,0,8.4,3.6,10.5l23.9,13.8c-1.1,3.7-2.1,7.5-3,11.2H78.7c-4.2,0-7.8,3.1-8.4,7.2
    c-0.9,6.1-1.4,12.2-1.7,18.4h-8.8c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h392.5c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-8.8
    c-0.2-6.1-0.8-12.3-1.7-18.4c-0.6-4.2-4.2-7.2-8.4-7.2h-27.5c-0.8-3.7-1.8-7.5-3-11.2l23.9-13.8c3.7-2.1,5.2-6.6,3.6-10.5
    c-3.3-8.3-7.2-16.4-11.7-24.1h50.7c14.1,0,25.6,11.5,25.6,25.6L494.9,358.4L494.9,358.4z"/>
<path class="Data1-Cog" d="M93.4,93.9c-4.5,7.8-8.4,15.8-11.7,24.1c-1.6,3.9,0,8.4,3.6,10.5l23.9,13.8c-1.1,3.7-2.1,7.5-3,11.2H78.7
    c-4.2,0-7.8,3.1-8.4,7.2c-0.9,6.1-1.4,12.2-1.7,18.4h-8.8c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h392.5
    c4.7,0,8.5-3.8,8.5-8.5c0-4.7-3.8-8.5-8.5-8.5h-8.8c-0.2-6.1-0.8-12.3-1.7-18.4c-0.6-4.2-4.2-7.2-8.4-7.2h-27.5
    c-0.8-3.7-1.8-7.5-3-11.2l23.9-13.8c3.7-2.1,5.2-6.6,3.6-10.5c-3.3-8.3-7.2-16.4-11.7-24.1l0,0c-5-8.5,0,0-5-8.5l-6.3-8.5
    c-1.3-1.7-2.5-3.5-3.8-5.2c-2.6-3.3-7.3-4.2-11-2.1l-23.9,13.8c-2.6-2.9-5.4-5.6-8.2-8.2l13.8-23.9c2.1-3.7,1.2-8.3-2.1-11
    c-14.1-11.2-29.7-20.2-46.4-26.8c-3.9-1.6-8.4,0-10.5,3.6l-13.8,23.9c-3.7-1.1-7.5-2.1-11.2-3V10.4c0-4.2-3.1-7.8-7.2-8.4
    c-17.8-2.6-36-2.6-53.8,0c-4.2,0.6-7.2,4.2-7.2,8.4v27.5c-3.7,0.8-7.5,1.8-11.2,3L196.8,17c-2.1-3.7-6.6-5.2-10.5-3.6
    c-16.7,6.6-32.4,15.7-46.4,26.8c-3.3,2.6-4.2,7.3-2.1,10.9l13.8,23.9c-2.9,2.6-5.6,5.4-8.2,8.2l-23.9-13.8c-3.7-2.1-8.3-1.2-11,2.1
    c-1.3,1.7-2.6,3.5-3.8,5.2 M154,179.2c4.4-53,48.7-93.9,102-93.9s97.6,40.8,102,93.9H154z M375,179.2
    c-4.4-62.5-56.4-110.9-119-110.9s-114.6,48.4-119,110.9H85.8c0.1-2.8,0.1-5.8,0.4-8.5h27.1c4.2,0,7.7-3,8.4-7.1
    c1.3-7.5,3.2-15,5.8-22.2c1.4-3.9-0.2-8.2-3.8-10.3l-23.4-13.5c4.7-10.4,10.4-20.3,17.1-29.5l23.4,13.6c3.6,2.1,8.2,1.3,10.8-1.9
    c4.9-5.9,10.4-11.3,16.3-16.3c3.2-2.7,4-7.2,1.9-10.8l-13.6-23.4c9.2-6.7,19.1-12.4,29.5-17.1l13.5,23.4c2.1,3.6,6.4,5.1,10.3,3.8
    c7.2-2.6,14.6-4.6,22.2-5.8c4.1-0.7,7.1-4.3,7.1-8.4v-27c11.3-1.1,22.8-1.1,34.1,0v27c0,4.2,3,7.7,7.1,8.4c7.5,1.3,15,3.2,22.2,5.8
    c3.9,1.4,8.2-0.2,10.3-3.8l13.5-23.4c10.4,4.7,20.3,10.4,29.5,17.1l-13.6,23.4c-2.1,3.6-1.3,8.2,1.9,10.8
    c5.9,4.9,11.3,10.4,16.3,16.3c2.7,3.2,7.2,4,10.8,1.9L394.6,88c6.7,9.2,12.4,19.1,17.1,29.5l-23.4,13.5c-3.6,2.1-5.1,6.4-3.8,10.3
    c2.6,7.2,4.6,14.6,5.8,22.2c0.7,4.1,4.3,7.1,8.4,7.1h27c0.3,2.8,0.3,5.7,0.4,8.5H375z"/>
</symbol>

<symbol id="svg--Trading" viewbox="0 -100 500 750">
            <path class="Trading2-Bars" d="M503.5,494.9h-42.7V230.4c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5v264.5h-17.1V349.9
                c0-4.7-3.8-8.5-8.5-8.5h-50.5c-4.7,0-8.5,3.8-8.5,8.5v145.1h-17.8V298.7c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5
                v196.3h-17.1V332.8c0-4.7-3.8-8.5-8.5-8.5h-51.2c-4.7,0-8.5,3.8-8.5,8.5v162.1h-17.1v-93.9c0-4.7-3.8-8.5-8.5-8.5H59.7
                c-4.7,0-8.5,3.8-8.5,8.5v93.9H8.5c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h51.2c4.7,0,8.5-3.8,8.5-8.5v-93.9h34.1v93.9
                c0,4.7,3.8,8.5,8.5,8.5h34.1c4.7,0,8.5-3.8,8.5-8.5V341.3h34.1v162.1c0,4.7,3.8,8.5,8.5,8.5h34.1c4.7,0,8.5-3.8,8.5-8.5V307.2
                h34.1v196.3c0,4.7,3.8,8.5,8.5,8.5h34.8c4.7,0,8.5-3.8,8.5-8.5V358.4h33.4v145.1c0,4.7,3.8,8.5,8.5,8.5h34.1
                c4.7,0,8.5-3.8,8.5-8.5V238.9h34.1v264.5c0,4.7,3.8,8.5,8.5,8.5h51.2c4.7,0,8.5-3.8,8.5-8.5S508.2,494.9,503.5,494.9z"/>
            <path class="Trading1-Line" d="M34.1,324.3c18.8,0,34.1-15.3,34.1-34.1c0-4-0.8-7.8-2.1-11.4l167.6-167.6c6,5.2,13.7,8.4,22.2,8.4
                c6.3,0,12.2-1.8,17.3-4.9l38.8,38.8c-3,5.1-4.9,10.9-4.9,17.3c0,18.8,15.3,34.1,34.1,34.1c18.8,0,34.1-15.3,34.1-34.1
                c0-6.3-1.8-12.2-4.8-17.2l90-90c5.1,3,10.9,4.8,17.2,4.8c18.8,0,34.1-15.3,34.1-34.1C512,15.3,496.7,0,477.9,0
                s-34.1,15.3-34.1,34.1c0,6.3,1.8,12.2,4.8,17.2l-90,90c-5.1-3-10.9-4.8-17.2-4.8c-6.3,0-12.1,1.8-17.2,4.8l-38.8-38.8
                c3-5.1,4.8-10.9,4.8-17.2c0-18.8-15.3-34.1-34.1-34.1c-18.8,0-34.1,15.3-34.1,34.1c0,4,0.8,7.8,2.1,11.4L56.3,264.4
                c-6-5.2-13.7-8.4-22.2-8.4C15.3,256,0,271.3,0,290.1S15.3,324.3,34.1,324.3z M477.9,17.1c9.4,0,17.1,7.7,17.1,17.1
                c0,9.4-7.7,17.1-17.1,17.1c-4.7,0-8.9-1.9-12-4.9c0,0,0-0.1-0.1-0.1s-0.1,0-0.1-0.1c-3-3.1-4.9-7.3-4.9-12
                C460.8,24.7,468.5,17.1,477.9,17.1z M341.3,153.6c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C324.3,161.3,331.9,153.6,341.3,153.6z M256,68.3c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C238.9,75.9,246.6,68.3,256,68.3z M34.1,273.1c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1
                C17.1,280.7,24.7,273.1,34.1,273.1z"/>
</symbol>

<symbol id="svg--Solutions" viewbox="0 -100 500 730">
<path class="Solutions8-Ground4" d="M503.5,494.9H366.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h136.5c4.7,0,8.5-3.8,8.5-8.5
    S508.2,494.9,503.5,494.9z"/>
<path class="Solutions7-Ground3" d="M332.8,494.9h-17.1c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h17.1c4.7,0,8.5-3.8,8.5-8.5
    S337.5,494.9,332.8,494.9z"/>
<path class="Solutions6-Ground2" d="M247.5,494.9h-85.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h119.5c4.7,0,8.5-3.8,8.5-8.5
    c0-4.7-3.8-8.5-8.5-8.5h-17.1"/>
<path class="Solutions5-Ground1" d="M128,494.9H8.5c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5H128c4.7,0,8.5-3.8,8.5-8.5
    S132.7,494.9,128,494.9z"/>
<path class="Solutions4-RightLeaf" d="M334.2,426.7c7.5,0,46.1-1.4,72.9-28.1c29.6-29.6,28.2-72.8,28.1-74.3v-42.7
    c0-4.7-3.8-8.5-8.5-8.5l-42.3,0l-1.8,0c-7.5,0-46.1,1.4-72.9,28.1c-29.6,29.6-28.2,72.8-28.1,74.3v42.6c0,1.2,0.2,2.3,0.7,3.4
    c0,0.1,0.1,0.2,0.2,0.3c0.4,0.9,0.9,1.7,1.6,2.4c0.7,0.7,1.5,1.1,2.3,1.5c0.2,0.1,0.3,0.2,0.4,0.3c1,0.4,2.2,0.7,3.3,0.7
    c0,0,0,0,0.1,0l42.2,0L334.2,426.7z M398.6,309.7c-3.3-3.3-8.7-3.3-12.1,0l-87.8,87.8l0-22.4c0-0.4-1.3-37.5,23.1-61.9
    c22-22,54.5-23.1,60.8-23.1l35.6,0l0,34.5c0,0.4,1.1,37.7-23.1,61.9c-22,22-54.5,23.1-60.8,23.1l-23.5,0l87.8-87.8
    C401.9,318.5,401.9,313.1,398.6,309.7z"/>
<path class="Solutions3-LeftLeaf" d="M104.9,432.7c26.8,26.8,65.4,28.1,72.8,28.1l44.2,0c0.5,0,0.8-0.2,1.3-0.2c0.7-0.1,1.4-0.1,2-0.4
    c1-0.4,2-1.1,2.8-1.9h0c0.2-0.2,0.3-0.5,0.5-0.7c0.5-0.6,1-1.2,1.3-2c0.5-1.1,0.7-2.2,0.7-3.4l0-42.2c0.1-1.8,1.4-45-28.2-74.6
    c-26.8-26.8-65.4-28.1-72.8-28.1l-44.1,0c-4.7,0-8.5,3.8-8.5,8.5l0,42.3C76.7,359.9,75.3,403.1,104.9,432.7z M93.9,358.4v-34.1
    l35.5,0c6.3,0,38.8,1.1,60.8,23.1c24.2,24.2,23.2,61.5,23.2,62.2v22l-87.8-87.8c-3.3-3.3-8.7-3.3-12.1,0c-3.3,3.3-3.3,8.7,0,12.1
    l87.9,87.9l-23.6,0c-6.3,0-38.8-1.1-60.7-23.1C92.7,396.4,93.8,359.1,93.9,358.4z"/>
<path class="Solutions2-Stem" d="M247.5,238.9v256l17.1,0v-256"/>
<path class="Solutions1-Flower" d="M264.5,238.9h8.5c9.4,0,17.1-7.7,17.1-17.1v-24.2c30.1-13.2,51.2-43.2,51.2-78.2V76.8
    c0-4.7-3.8-8.5-8.5-8.5h-8.5V17.1c0-9.4-7.7-17.1-17.1-17.1h-17.1c-9.4,0-17.1,7.7-17.1,17.1v51.2h-34.1V17.1
    c0-9.4-7.7-17.1-17.1-17.1h-17.1c-9.4,0-17.1,7.7-17.1,17.1v51.2h-8.5c-4.7,0-8.5,3.8-8.5,8.5v42.7c0,34.9,21.1,65,51.2,78.2v24.2
    c0,9.4,7.7,17.1,17.1,17.1h8.5 M290.1,17.1h17.1v51.2h-17.1L290.1,17.1L290.1,17.1z M204.8,17.1h17.1v51.2h-17.1V17.1z M187.7,119.5
    V85.3h136.5v34.1c0,37.6-30.6,68.3-68.3,68.3C218.4,187.7,187.7,157.1,187.7,119.5z M238.9,221.9v-18.8c5.5,1.1,11.2,1.7,17.1,1.7
    s11.6-0.6,17.1-1.7v18.8H238.9z"/>
<symbol>

<symbol id="svg--Contracts" viewbox="0 -100 500 750">
<path class="Contracts16-RibbonRight" d="M449,438c-2.4-4.1-7.6-5.5-11.7-3.1c-4.1,2.4-5.5,7.6-3.1,11.7l18.5,31.9l-5.3,0.3
    c-2.7,0.2-5.1,1.6-6.6,3.8l-2.9,4.4l-18.3-31.7c-2.4-4.1-7.6-5.5-11.7-3.1c-4.1,2.4-5.5,7.6-3.1,11.7l25.2,43.6
    c1.5,2.6,4.2,4.2,7.1,4.3h0.3c2.9,0,5.5-1.4,7.1-3.8l8.2-12.4l14.8-0.9c3-0.2,5.6-1.9,7-4.5s1.3-5.8-0.1-8.3L449,438z"/>
<path class="Contracts15-RibbonLeft" d="M377,452.1c-4.1-2.4-9.3-1-11.7,3.1L347,487l-2.9-4.4c-1.5-2.2-3.9-3.7-6.6-3.8l-5.3-0.3
    l18.7-32.3c2.4-4.1,1-9.3-3.1-11.7c-4.1-2.4-9.3-1-11.7,3.1l-25.6,44.3c-1.5,2.6-1.5,5.7-0.1,8.3s4,4.3,7,4.5l14.8,0.9l8.2,12.4
    c1.6,2.4,4.3,3.8,7.1,3.8h0.3c2.9-0.1,5.6-1.7,7.1-4.3l25.3-43.8C382.5,459.7,381.1,454.4,377,452.1z"/>
<path class="Contracts14-Stamp" d="M443.6,392.3c0-28.2-23-51.2-51.2-51.2s-51.2,23-51.2,51.2s23,51.2,51.2,51.2
    C420.7,443.5,443.6,420.6,443.6,392.3z M392.4,426.5c-18.8,0-34.1-15.3-34.1-34.1s15.3-34.1,34.1-34.1c18.8,0,34.1,15.3,34.1,34.1
    S411.3,426.5,392.4,426.5z"/>
<path class="Contracts13-Signature" d="M162.9,396.2c2.1,4.2,7.2,5.9,11.4,3.8c4.2-2.1,5.9-7.2,3.8-11.5c-8.4-16.9-10.3-32.1-5.1-40.6
    c2.8-4.5,7.7-6.8,14.5-6.8c4.1,0,5.6,1.4,6.5,2.8c6.4,9.2,0.3,37.1-6,54c-1.4,3.8,0,8,3.4,10.2c3.4,2.2,7.8,1.7,10.6-1.1
    c3.6-3.6,7.6-7.3,11-10.2v4.2c0,3.4,2.1,6.6,5.3,7.9c3.2,1.3,6.9,0.6,9.3-1.8c3.9-3.9,8.4-7.7,12.2-10.5c-0.1,0.2-0.2,0.4-0.3,0.6
    c-1.3,2.6-1.2,5.8,0.4,8.3c1.6,2.5,4.3,4,7.3,4h34.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-22.2c0.7-4.1,0.5-8.2-1.5-11.5
    c-2.2-3.5-6-5.5-10.4-5.5c-5.3,0-11.5,3.2-17.1,7.2c-0.4-3.7-2.6-6.8-6-8.2c-2.3-0.9-5.2-2.2-12.3,2.1c2.8-14.7,3.6-31.6-3.7-42.2
    c-3.2-4.6-9.4-10.1-20.6-10.1c-12.8,0-23.1,5.3-29,14.9C150.1,352.8,151.7,373.6,162.9,396.2z"/>
<path class="Contracts12-Writing10" d="M392.4,281.4c0-4.7-3.8-8.5-8.5-8.5h-85.3c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h85.3
    C388.6,289.9,392.4,286.1,392.4,281.4z"/>
<path class="Contracts11-Writing9" d="M162,289.9h102.4c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,289.9,162,289.9z"/>
<path class="Contracts10-Writing8" d="M358.3,230.2c0,4.7,3.8,8.5,8.5,8.5H418c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-51.2
    C362.1,221.7,358.3,225.5,358.3,230.2z"/>
<path class="Contracts9-Writing7" d="M247.4,221.7c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h85.3c4.7,0,8.5-3.8,8.5-8.5
    s-3.8-8.5-8.5-8.5H247.4z"/>
<path class="Contracts8-Writing6" d="M162,238.7h51.2c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,238.7,162,238.7z"/>
<path class="Contracts7-Writing5" d="M307.1,179c0,4.7,3.8,8.5,8.5,8.5H401c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-85.3
    C310.9,170.5,307.1,174.3,307.1,179z"/>
<path class="Contracts6-Writing4" d="M162,187.5h119.5c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,187.5,162,187.5z"/>
<path class="Contracts5-Writing3" d="M349.8,136.3c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5h-17.1c-4.7,0-8.5,3.8-8.5,8.5
    s3.8,8.5,8.5,8.5H349.8z"/>
<path class="Contracts4-Writing2" d="M298.6,119.3h-68.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5h68.3c4.7,0,8.5-3.8,8.5-8.5
    C307.1,123.1,303.3,119.3,298.6,119.3z"/>
<path class="Contracts3-Writing1" d="M162,136.3h34.1c4.7,0,8.5-3.8,8.5-8.5s-3.8-8.5-8.5-8.5H162c-4.7,0-8.5,3.8-8.5,8.5
    S157.3,136.3,162,136.3z"/>
<path class="Contracts2-PageRight" d="M418,0H93.8C51.5,0,17.1,34.3,17,76.5v0.1v0.1v0.1v0.1c0.1,27.2,14.8,52.6,38.4,66.2
    c4.1,2.4,9.3,1,11.7-3.1c2.4-4.1,1-9.3-3.1-11.7C45.5,117.7,34.1,97.9,34,76.7c0.1-32.9,26.8-59.6,59.7-59.6H418
    c32.9,0,59.7,26.8,59.7,59.7v358.4c0,4.3-1.2,8.7-3.5,12.5c-2.4,4.1-1,9.3,3,11.7c1.4,0.8,2.9,1.2,4.3,1.2c2.9,0,5.8-1.5,7.4-4.2
    c3.8-6.5,5.8-13.8,5.8-21.2V76.8C494.8,34.4,460.4,0,418,0z"/>
<path class="Contracts1-PageLeft" d="M290,460.6H127.9c-14.1,0-25.6-11.5-25.6-25.6V42.5c0-4.7-3.8-8.5-8.5-8.5
    c-23.5,0-42.7,19.1-42.7,42.7c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5c0-11.1,7.1-20.6,17.1-24.1V435c0,23.5,19.1,42.7,42.7,42.7H290
    c4.7,0,8.5-3.8,8.5-8.5S294.8,460.6,290,460.6z"/>
</symbol>

<symbol id="svg--Finance" viewbox="0 -100 500 750">
<path class="Finance10-CoinDollarSign" d="M170.7,290.1c9.4,0,17.1,7.7,17.1,17.1c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5
    c0-15.9-10.9-29.1-25.6-32.9v-1.2c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v1.2c-14.7,3.8-25.6,17.1-25.6,32.9
    c0,18.8,15.3,34.1,34.1,34.1c9.4,0,17.1,7.7,17.1,17.1c0,9.4-7.7,17.1-17.1,17.1c-9.4,0-17.1-7.7-17.1-17.1c0-4.7-3.8-8.5-8.5-8.5
    s-8.5,3.8-8.5,8.5c0,15.9,10.9,29.1,25.6,32.9v1.2c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5v-1.2c14.7-3.8,25.6-17.1,25.6-32.9
    c0-18.8-15.3-34.1-34.1-34.1c-9.4,0-17.1-7.7-17.1-17.1S161.3,290.1,170.7,290.1z"/>
<path class="Finance9-CoinInside" d="M170.7,196.3c-75.3,0-136.5,61.3-136.5,136.5s61.3,136.5,136.5,136.5s136.5-61.3,136.5-136.5
    S245.9,196.3,170.7,196.3z M170.7,452.3c-65.9,0-119.5-53.6-119.5-119.5s53.6-119.5,119.5-119.5s119.5,53.6,119.5,119.5
    S236.5,452.3,170.7,452.3z"/>
<path class="Finance8-CoinOutside" d="M341.3,332.8c0-94.1-76.6-170.7-170.7-170.7S0,238.7,0,332.8s76.6,170.7,170.7,170.7
    S341.3,426.9,341.3,332.8z M170.7,486.4c-84.7,0-153.6-68.9-153.6-153.6S86,179.2,170.7,179.2s153.6,68.9,153.6,153.6
    S255.4,486.4,170.7,486.4z"/>
<path class="Finance7-Stack7" d="M486.4,452.3c-4.7,0-8.5,3.8-8.5,8.5v25.6H281.6c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h204.8
    c4.7,0,8.5-3.8,8.5-8.5v-34.1C494.9,456.1,491.1,452.3,486.4,452.3z"/>
<path class="Finance6-Stack6" d="M503.5,384c-4.7,0-8.5,3.8-8.5,8.5v25.6H349.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h153.6
    c4.7,0,8.5-3.8,8.5-8.5v-34.1C512,387.8,508.2,384,503.5,384z"/>
<path class="Finance5-Stack5" d="M477.9,349.9H366.9c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h119.5c4.7,0,8.5-3.8,8.5-8.5v-34.1
    c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5V349.9z"/>
<path class="Finance4-Stack4" d="M366.9,298.7h102.4c4.7,0,8.5-3.8,8.5-8.5V256c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v25.6h-93.9
    c-4.7,0-8.5,3.8-8.5,8.5S362.2,298.7,366.9,298.7z"/>
<path class="Finance3-Stack3" d="M460.8,213.3h-128c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5h136.5c4.7,0,8.5-3.8,8.5-8.5v-34.1
    c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5L460.8,213.3L460.8,213.3z"/>
<path class="Finance2-Stack2" d="M460.8,153.6v-34.1c0-4.7-3.8-8.5-8.5-8.5s-8.5,3.8-8.5,8.5v25.6H264.5c-4.7,0-8.5,3.8-8.5,8.5
    s3.8,8.5,8.5,8.5h187.7C457,162.1,460.8,158.3,460.8,153.6z"/>
<path class="Finance1-Stack1" d="M128,145.1c4.7,0,8.5-3.8,8.5-8.5V25.6h307.2v51.2H162.1c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5
    h290.1c4.7,0,8.5-3.8,8.5-8.5V17.1c0-4.7-3.8-8.5-8.5-8.5H128c-4.7,0-8.5,3.8-8.5,8.5v119.5C119.5,141.2,123.3,145.1,128,145.1z"/>
</symbol>

<symbol id="svg--Sales" viewbox="0 -100 600 700">
<path class="Sales3-BackTag" d="M443.1,312.1c-4.1-2.4-9.3-1-11.7,3L333.6,482c-7.1,12.2-22.7,16.4-34.6,9.6l-19.1-12.3
    c-4-2.6-9.2-1.4-11.8,2.5c-2.6,4-1.4,9.2,2.5,11.8l19.4,12.6c6.7,3.9,14,5.7,21.3,5.7c14.8,0,29.1-7.6,37-21.3l97.8-166.8
    C448.5,319.7,447.1,314.5,443.1,312.1z"/>
<path class="Sales2-FrontTag" d="M468.9,0H332.3c-26.4,0-46.1,8.4-65.8,28.1c-3.3,3.3-3.3,8.7,0,12.1c3.3,3.3,8.7,3.3,12.1,0
    c16.6-16.6,31.7-23.1,53.7-23.1h136.5c14.1,0,25.6,11.5,25.6,25.6v136.5c0,22-6.5,37.1-23.1,53.7L217.9,486.7
    c-9.7,9.7-26.5,9.7-36.2,0L24.9,329.8c-4.8-4.8-7.5-11.3-7.5-18.1c0-6.8,2.7-13.3,7.5-18.1L253.9,64.9c3.5,0.9,7.1,1.8,10.7,2.8
    c34.7,9.3,62.1,18.9,82.5,27.5c-4,7.4-6.3,15.8-6.3,24.3c0,28.2,23,51.2,51.2,51.2s51.2-23,51.2-51.2s-23-51.2-51.2-51.2
    c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5c18.8,0,34.1,15.3,34.1,34.1c0,18.8-15.3,34.1-34.1,34.1s-34.1-15.3-34.1-34.1
    c0-6.1,1.7-12.1,4.8-17.4c14.8,7.1,24,13,27.7,16.8c-1.6,0.4-4,0.9-7.6,1.3c-4.7,0.4-8.2,4.6-7.7,9.3c0.4,4.4,4.1,7.8,8.5,7.8
    c0.2,0,0.5,0,0.8,0c5.2-0.5,21.2-1.9,24.3-13.3C417,92.5,293.8,57.8,269,51.2C231.1,41,194.7,34.1,166.5,31.6
    c-34.7-3-51.5,0.9-54.7,12.8c-1.5,5.7-5.6,20.8,63.6,48.1c4.4,1.7,9.3-0.4,11.1-4.8s-0.4-9.3-4.8-11.1
    c-33.4-13.2-47.3-22.8-51.7-27.4c10.5-3.1,46.5-2.2,104.5,11L12.8,281.5c-8.1,8.1-12.5,18.8-12.5,30.2c0,11.4,4.4,22.1,12.5,30.2
    l156.9,156.9c8,8.1,18.8,12.5,30.2,12.5c11.4,0,22.1-4.4,30.2-12.5L483.4,245c19.7-19.7,28.1-39.4,28.1-65.8V42.7
    C511.5,19.1,492.4,0,468.9,0z"/>
<path class="Sales1-DollarSign" d="M279.4,224.4c-3.3-3.3-8.7-3.3-12.1,0l-4.6,4.6c-6.8-4.5-14.8-7.1-23.5-7.1
    c-23.5,0-42.7,19.1-42.7,42.7c0,12.7,5.2,22.8,9.8,30.1c4.3,6.9,7.2,16.6,7.2,21.1c0,14.1-11.5,25.6-25.6,25.6s-25.6-11.5-25.6-25.6
    c0-5.2,1.5-10.2,4.5-14.4c2.7-3.9,1.7-9.2-2.2-11.9c-3.9-2.7-9.2-1.7-11.9,2.2c-4.9,7.1-7.4,15.4-7.4,24.1c0,8.7,2.6,16.7,7.1,23.5
    l-4.6,4.6c-3.3,3.3-3.3,8.7,0,12.1c1.7,1.7,3.8,2.5,6,2.5c2.2,0,4.4-0.8,6-2.5l4.6-4.6c6.8,4.5,14.8,7.1,23.5,7.1
    c23.5,0,42.7-19.1,42.7-42.7c0-8.3-4.1-21-9.8-30.1c-5.1-8.1-7.2-14.5-7.2-21.1c0-14.1,11.5-25.6,25.6-25.6c6.8,0,13,2.7,17.6,7.1
    c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.1,0.4,0.2,0.5,0.3c4.4,4.6,7.1,10.8,7.1,17.6s-2.7,13.3-7.5,18.1c-3.3,3.3-3.3,8.7,0,12.1
    c3.3,3.3,8.7,3.3,12.1,0c8.1-8.1,12.5-18.8,12.5-30.2c0-8.7-2.6-16.7-7.1-23.5l4.6-4.6C282.7,233.1,282.7,227.7,279.4,224.4z"/>
</symbol>

</svg>

<div class="wrapper">

  <a href="" class="Link Data">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Data" />

    </svg>

  </a>

  <a href="" rel="author" class="Link Trading">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Trading" />

    </svg>
  </a>

  <a href="" rel="author" class="Link Solutions">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Solutions" />

    </svg>
  </a>

  <a href="" class="Link Contracts">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Contracts" />

    </svg>
  </a>

  <a href="" class="Link Finance">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Finance" />

    </svg>
  </a>

  <a href="" class="Link Sales">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--Sales" />

    </svg>
  </a>

</div>
</body>
</html>
...