Set scope on svg image?

Question

css

Please let me know if anyone has had this issue and if there is a way to fix it.

Answer 1

Perhaps someone will come in handy. The solution is that we need to add the 'g' tag, wrapping it with the necessary piece of code for interaction. It is also necessary to add a class with the necessary properties to the 'css'. There is a way without pasting all the 'svg' code, by making a link using the 'use' tag:

<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;
}
 -->