Adding buttons to the svg

[asasass]

div is a block style element and span is an inline element.

block is given to span so it acts like a div.

[ronpat]

Oh, my
… where did you learn that span is a block element?

span is a tag (an element) that has been assigned display:inline by default; therefore we speak of a span as an inline element. (There are more)

div is a tag (an element) which has been assigned display:block by default; therefore we speak of a div as a block element. (There are more)

According to HTML standards, a block element (a div in this case) cannot be used inside of a button so you need to use an inline element (a span will do nicely).
However, an inline element (the span, in this case) will not create the circle that you coded by default. Therefore span needs to behave like a block element in your code so span will create the circle that you coded.

That is why assigning display:block to the span caused the circle to appear properly.

It is EXTREMELY important that you recognize the display characteristic of the elements you use.

[asasass]

I said:

div is a block style element and span is an inline element.

block is given to span so it acts like a div.

[ronpat]

I understand, but it would be more useful to realize that

block is given to span so it acts like a block.

After all, display:inline can be given to a div. What would you call that???

[asasass]

With using button I found this out recently.

Error : Attribute pointer-events not allowed on element button at this point.

What does that mean though?

I can remove pointer-events="none" from the html, and keep it in the css, and then that’s fine?

https://jsfiddle.net/nm1xL6zy/

When I went to validate the css, it said this was fine.

button.thePlay {
  pointer-events: none;
}

So, that means pointer-events: none; just can’t be on button in the html, but in the css it is fine?

[PaulOB]

@asasass

can’t be on button in the html, but in the css it is fine?

Is there a pointer-events attribute value for html?

I thought it was only valid for svg.

Why would you use a pointer-events attribute on a button anyway? That’s the job of css.

[asasass]

When the mouse is over the shadow, or off the svg, hover doesn’t initiate and nothing can be clicked.

Basically it disables clicking if the mouse is off the svg.

https://jsfiddle.net/5evobr2j/2/

button.thePlay {
  pointer-events: none;
}

With pointer-events removed:

When the mouse is over the shadow, or off the svg, hover initiates and clicking off the svg works.

https://jsfiddle.net/5evobr2j/1/

/*button.thePlay {
  pointer-events: none;
}*/

The flow is:

button
svg

Button creates clickable white space around the svg that can’t be removed.

[PaulOB]

I know very well what pointer-events does and I introduced it to you many demos ago.

Was there a question in the above post as I didn’t see any actual question?

[asasass]

I was answering your question.

Why would you use a pointer-events attribute on a button anyway?

[PaulOB]

@asasass

Why would you use a pointer-events attribute on a button anyway?

Language is important

I basically said why would you use the pointer-events attribute rather than use the css properly pointer-events.?

Are you going to start adding attributes to all your elements rather than css. That would be a trip back to 1999

[asasass]

I was just reading this:

There’s no reason to use pointer-events for HTML elements | bitsofcode

[asasass]

Should this pointer-events be moved into the css instead then?

<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />

or maybe that one is acceptable.

In the article above, placed on svg elements is fine.

pointer-events shouldn’t be placed on non-svg elements.

[PaulOB]

@asasass

I was just reading this:

Yes that’s basically nonsense.

@asasass

Should this pointer-events be moved into the css instead then?

No svg is a different ball game altogether. Don’t confuse the svg spec with the normal html5 elements.

Svgs are basically self contained bits of information like an image so it makes sense to have the actions contained within the svg itself. Then you can just mnve the svg around and it works the same. Of course when you are changing colors and things like that then you can use css to make life easier. Some svg attributes are not available as css either.