Fill an SVG using "fill"

Navigation
1

When I have, for example, a hexagon made in SVG, which has only the edge drawn ... And when I do a: hover that hexagon is filled with the color of the edge ... How can I use the attribute (if can you call it that) "fill"?

Imagine a hexagon with the blue border and the transparent fill, but when I pass a mouse (: hover) I want it to be filled with the same color as the border ...

I currently use that: hover using two images on the same hexagon, one empty and one filled. I know that this method is not efficient, so I would like to understand how to use the "fill" to solve it (if possible) ...

Greetings!

    
asked by GD13 06.04.2018 в 16:55
source

1 answer

1

Simply add the fill="none" attribute to HTML to not have content within the element. You can add the border with the attributes stroke-width to put the width you want the edge to have and stroke for the color.

Finally, from CSS you can modify the property fill . 

svg:hover .circulo{
  fill: blue;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="115" height="115">
  <circle class="circulo" stroke-width="3px" stroke="blue" cx="60" cy="60" r="50" fill="none"/>
</svg>

NOTE : In this case I used a circle to simplify the code but the behavior would be exactly the same with a hexagon.

    
answered by 07.04.2018 / 12:32
source
Assign variable in CellClassRules AgGrid Angular2 Write in a text file the result of a command in Ruby