CODEWITHSUNDEEP
cssfirefoxsvg
Lyubomyr Shaydariv
Lyubomyr Shaydariv

Reputation: 21125

Firefox: Applying border/outline CSS properties to SVG elements

Firefox seems to fully ignore border and outline CSS properties defined for SVG elements. The SVG group elements , <g>, in my case, are used to group composite elements into a single logical element to simplify user interaction in my app. The following code works really good in Chrome:

<svg>
    <g>
        <rect x="10" y="10" width="50" height="50" fill="yellow"></rect>
        <rect x="20" y="20" width="30" height="30" fill="yellowgreen"></rect>
    </g>
</svg>

g:hover {
    outline: dashed 4px red;
}

http://jsfiddle.net/QQRPj/

In Chrome, once you move the mouse pointer over the group of two rectangles, the group gets a red dashed rectangle around it. However, I can't make it work in Firefox, despite it seems to support more simple CSS properties like cursor, display, and SVG-related properties like it's described at MDN.

Is there any opportunity to make outline and border CSS properties work in Firefox, so a CSS change could be the only effective patch instead of patching SVG-related code?

Upvotes: 2

Views: 1911

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

The SVG specification has a list of all CSS properties that are valid for SVG border and outline are not in that list and therefore do not apply to SVG. You should raise a blink bug

If you want a border or outline in SVG you'll have to put a <rect> round the object and calculate that <rect> position using getBBox if necessary. In the above case you could put the hover on the outer <svg> element as that is a replaced element and does get border and outline properties because of that.

Upvotes: 2

Related Questions