2

I've been at this for days and cannot find any support on the issue.

So, I'm creating a main page for my personal website that features circular buttons of varying sizes. Initially I was creating the circles using the border-radius property (which worked fine), but now I'm trying to upgrade to SVG shapes. What I'm discovering is that there is always an invisible square box around any SVG element (the viewbox I think). This means that I'm able to click the button without the cursor actually being on the button (i.e. the corners of the viewbox). This would not be a problem if the buttons were in a line and all the same size, but they're not in a line and some are much bigger than others.

Is there a way to create a truly circular SVG button?

Improve this question

3 Answers 3

Reset to default
1

This issue has nothing to do with that you're using an SVG, and everything to do with that you're using HTML.

HTML by default is all boxes. There is no rounding for the most part.

You have two viable options that can be used.

  1. Use border-radius in conjunction with the SVG. Putting the correct values will not trim the SVG, it will only remove the clickable corners.
  2. Use a map. This has been around for a while, and thus is supported in all the major browsers with a uniform syntax.

I'd suggest #1, as it is much easier. #2 would require you to know more information (the radius and the center point).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Haha! First one worked! You know, I had tried this earlier too and it didn't work. I must've had a typo in my CSS. Thanks for the quick feedback too. Posted this no more than an hour ago.
0

You are correct with your assumption that the "view box", actually more of a canvas, is a rectangle. The size is given in the first SVG Tag ().

If it is very important to you to make the image only linked inside the circle you should add some javasript.

How to do this best depends on the libraries you would like to add (e.g. jquery).

In general it goes like this:

  • var x,y; are the position of the mouse cursor from the middle of the SVG (that the easiest way to use sin and cos afterwards).
  • var r; is the radius of the circle
  • var alpha = arctan(y/x); // the angle of the point towards the middle
  • var inside = Math.abs(cos(alpha)) < Math.abs(x/r) && Math.abs(sin(alpha)) < Math.abs(y/r); //inside is true if the point is within the circle
Improve this answer

1 Comment

Thanks for the quick feedback! I was aware that a javascript solution was out there, but was trying to do it in CSS alone (should have specified). Thanks for the answer and quick response nonetheless.
0

Assuming this is inline SVG, don't put your mouseover event on the SVG element, put your event on the SVG shape!

#what:hover {
  fill: blue;
}
<svg width="600px" height="600px" >
  <circle id="what" cx="200" cy="200" r="100" fill='red'/>
  </svg>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.