How can an svg use the border property as an attribute?


#1

How is this allowed?
https://jsfiddle.net/g6oaht8f/162/

I thought an svg can only use certain properties, and border certainly wasn’t one of them.

How is this even able to do what it is doing?

I never knew of a border to be part of an svg’s repertoire.

svg {
  border-bottom: 3px solid red;
  border-right: 3px solid red;
}

Border is not listed as an svg attribute here:


#2

As far as I can see, border is not being used as an SVG attribute in your JSFiddle code. It is a CSS property being applied to the SVG element.


#3

I guess you can do that then.


#4

Terminology is important:). An attribute is html and html elements are allowed certain attributes as required by their specs. This has nothing to do with css properties;)


#5

I find outline to work much better here than border.
https://jsfiddle.net/g6oaht8f/180/

Because then the lines aren’t clickable.

Unless something else would be better to use.

svg {
  outline: 3px solid red;
}

#7

You seem to have moved away from the subject of this thread, as that code has nothing to do with either SVG or border.

If you have a different issue you need to discuss, I suggest you start a new thread.


#8

ok, I’ll do that. Thank you.


closed #9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.