CODEWITHSUNDEEP
htmlcsssvg
jhamm
jhamm

Reputation: 25022

Why can't I add a border on my svg path?

I have a svg where I am highlighting my path on hover. Here is my svg

<svg version="1.1" x="0px" y="0px" viewBox="0 0 2986 886" enable-background="new 0 0 2986 886">
  <image display="block" overflow="visible" width="2986" height="886" xlink:href="/A-1.jpg">
  </image>
  <path fill="none" stroke="#000000" strokeWidth="0.25" stroke-miterlimit="10" points="2781.5,905 2986,905 2986,865.6
    2842.7,634.6 2635.2,601.1 " id="1"></path>
   ....
</svg>

Here is my css:

svg path{
  fill:none;
  pointer-events:all;
}

svg path:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}

svg rect:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}

svg polygon:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}

When I hover, my path changes to the proper color, but I don't get a border. What am I misunderstanding?

Upvotes: 1

Views: 1747

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19111

For SVG, use the stroke property instead of border.

Edit: As the owner of the question points out in comments, stroke-opacity: 1 was needed as well as stroke and stroke-width.

Upvotes: 3

Related Questions