Возможно кому нибудь пригодится . Решение такое - это то что нам необходимо добавить тег 'g' , обернув им необходимый отрезок кода для взаимодействия. Так же необходимо добавить в 'css' класс с необходимыми свойствами. Существует способ без вставки всего 'svg' кода, сделав ссылку при помощи тега 'use' :
<svg style="width: 200px;height: 200px;" x="0px" y="0px" viewBox="0 0 512 512" fill="transparent"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g class="region-hover">
<polygon class="state-hover" style="fill:#B4D8F1;"
points="480,112 256,0 32,112 32,400 256,512 480,400 " />
<polygon class="state-hover" style="fill:#98C8ED;"
points="256,224 32,112 32,400 256,512 480,400 480,112 " />
<polygon class="state-hover" style="fill:#7AB9E8;" points="256,224 256,512 480,400 480,112 "
stroke="yellowgreen" />
</g>
</svg>
.region-hover{
fill-opacity: 0.5;
}
.region-hover:hover .state-hover {
fill-opacity: 1;
cursor: pointer;
}
<!-- method use -->
<!-- html code
<svg class="icon" viewBox="0 0 512 512">
<use class="ic-1" xlink:href="./img/cub.svg#ic" x="0" y="0" />
</svg>
-->
<!-- svg file
<symbol id="ic">
<polygon class="state-hover" points="480,112 256,0 32,112 32,400 256,512 480,400 "/>
</symbol>
-->
<!-- css
.icon {
width: 150px;
height: 175px;
}
use.ic-1 {
fill: green;
}
svg path {
fill: inherit;
}
.icon use.ic-1:hover {
fill: red;
}
-->
