Add all SVG properties

[skrat]

I think this might be useful as SVG is becoming more common. It should recognize all non-CSS2 SVG properties as specified here http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties

I tried myself but adding them to known-properties.js and building, doesn't seem to work.

[mahonnaise]

I tried myself but adding them to known-properties.js and building, doesn't seem to work.

That's because the properties object in src/rules/known-properties.js isn't actually used. Whether the property is valid or not is determined by the parser-lib.

[skrat]

All right, can it be removed then to avoid further confusion?

[mahonnaise]

Sure.

[nzakas]

@stubbornella thoughts on adding SVG properties?

[stubbornella]

I haven't seen this in the wild. @skrat - Can you give examples of svg properties used live? Preferably on large commercial type sites rather than experimental blog type sites.

[mahonnaise]

The almighty pointer-events property is from SVG.

[pointer-events:none makes clicks pass right through your object. This is neat if you want fade out effects without obstructing the clickable areas of elements below your gradient.]

SVG filters are also kinda cool. However, right now they are only supported by Gecko (outside of SVG, that is).

[skrat]

This is the killer feature of SVG over Canvas. I use it to style complex drawing application built with SVG embedded in HTML. Other use cases might include styling graphs and plots and any other app that uses SVG for the view.

Sent from my HAL9000

[joshcarr]

@stubbornella, @skrat and @nzakas The popular d3.js project (with ~8600 stars and ~1200 forks) is a big proponent of using SVG and styling with CSS. D3 is used by the NY Times, Square, GitHub and other large commercial orgs. Consider this another vote for adding these properties to the 'known' list.

[partap]

@joshcarr I came here to say that. I've never used SVG styles before, but my new project uses d3, and now csslint is bitchy. :)

[SoftwareDreamer]

csslint is in the way of d3.js, for sure.. who had the idea of really leaving them out, anyway? Anyway.. please add them.

[timmywil]

A friendly bump. Sure would be nice to have this.

[bigethan]

Using SVG styles to color some D3 charts at Trulia. Not an experimental blog :-)

[seiyria]

I'm using grunt in conjunction with csslint right now on a primarily d3.js project. Since I use a lot of SVG properties, csslint is currently not that helpful to me. +1

[sbking]

Using Snap.svg with styles in CSS rather than my JavaScript. This would really be a nice feature. +1

[bizob2828]

any reason for not accepting this pull request? I'm in the same predicament as others, using svg properties to style d3 graphs

[nschonni]

This isn't a pull request, see https://github.com/nzakas/parser-lib/issues/28 and https://github.com/nzakas/parser-lib/issues/97 for the discussion on why those PRs haven't been included.

[ghost]

The linter is flagging the property fill, which is common in CSS when using inline-SVG iconography.

[himedlooff]

:+1: SVG's are now promoted as best practice especially for icons.

[qm3ster]

In the meantime, how do I make it ignore specifically the property 'fill'?

[kschaefe]

It just complained about fill: transparent in my CSS. It doesn't know what transparent is.

[CBuntrock]

Will this be done? having many errors of unknown property since I use more svg now

[josezulu]

CBuntrock: I had the same issues until I realised my csslint version was outdated. Updated it and check again.

[jmisur]

for anyone who struggles with this, add this rule to your gulpfile and set "known-properties": false in .csslintrc. It reports all properties which were not found in svgProperties just like known-properties rule would.

// CSSLint doesn't support SVG properties, so we create our custom rule based on
// https://github.com/CSSLint/csslint/blob/master/src/rules/known-properties.js
csslint.addRule({
    // rule information
    id: "svg",
    name: "SVG properties",
    desc: "Adds support for SVG properties",
    url: "",
    browsers: "All",

    // initialization
    init: function(parser, reporter) {
        "use strict";
        const rule = this;
        const svgProperties = ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'shape-rendering', 'text-anchor'];

        parser.addListener("property", function(event) {
            if (event.invalid) {
                const propertyName = event.property.toString().toLowerCase();
                if (svgProperties.indexOf(propertyName) < 0) {
                    reporter.report(event.invalid.message, event.line, event.col, rule);
                }
            }
        });
    }
});

[wkeese]

I think you can close this ticket; all the properties have been added, see https://github.com/CSSLint/parser-lib/blob/master/src/css/Properties.js.