Установить область видимости по изображению svg?

Question

[Артем]

Подскажите кто сталкивался с такой проблемой , и возможно ли её решить каким нибудь способом.

Comments

[Максим]

нарисуйте эту область в векторном редакторе и все проблемы
просто обведите контуром этот 3D объект .. и заливка должна быть transparent а родитель то есть та сущность html на которой происходит mousemove должен обернуть эту svg-шку

[Артем]

Brasileiro, Вы предлагаете вырезать область при помощи 'clip-path: polygon();'?

[Максим]

Артем, не надо ни чего вырезать - просто обведите и всё и делайте mosemove на эту область

Answer 1

[Артем]

Возможно кому нибудь пригодится . Решение такое - это то что нам необходимо добавить тег '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;
}
 -->