shylov
@shylov
Начинающий

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

Подскажите кто сталкивался с такой проблемой , и возможно ли её решить каким нибудь способом.
6149e7edb88b0638178985.png
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ответы на вопрос 1
shylov
@shylov Автор вопроса
Начинающий
Возможно кому нибудь пригодится . Решение такое - это то что нам необходимо добавить тег '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;
}
 -->
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы