Using Stylish to modify an svg image. (Problem with Chrome)
I know css can be used to modify an svg image. If the svg image is coded within the html code of a web page, selectors in the css for the page can be used to point at elements to be affected. Yet if the image is from a separate svg file, I do not know how to write selectors for elements in the image through the css for the referring page. Yet I can write the css for the svg file directly. On Sylish I use the svg file address as the URL affected by the code. That works for me in Stylish for Firefox. However, this appears to fail in Stylish for Chrome. There I just see warnings about unknown properties stroke and fill. I must say I did not test with Chrome per se, I tested with Dragon, I simply refuse to install Chrome.
Comments
You can ignore these particular warnings issued by a submodule of Stylish, CSSLint, its developer didn't want to unconditionally allow svg-related properties due to the reasons he finds important. The next version of Stylish, now in development, doesn't show these warnings.
A bigger problem is that you're not warned about this
wtf hideheader {color: magenta}even though neither of those are really tag names. You'd like to know when you've written a useless selector, wouldn't you?You can ignore all of the warnings. (But not the errors.) When your mother said "Wear clean underwear, in case you're hit by a bus and taken to the hospital," that was a warning. When your epitaph says, "He didn't see the bus," that's an error.
When you have doubts, open Developer Tools (ctrl+shift+i), select the Elements tab, click the Styles tab in the right panel, and add the property, temporarily, to elements.style. This is as close to CSS "truth" as you can get. All of the editors' error checkers are unreliable in one way or another, both in Chrome and in Firefox. In fact what he said was Remember the story of stone soup? Strip down one of the pull requests to, say, just the fill and stroke properties (CSSLint is already clueless about tag names, so SVG tags aren't a problem), add a flag to enable the heterogenous rules, and resubmit it. A couple of use-cases in the description might help you make your/their case.
@JasonBarnabe: The objective is a working stylesheet, not a stylesheet that looks good in the editor. If CSSLint is warning that it doesn't understand something, that's a good thing - you know to investigate yourself. If you suppress those warnings, that's a bad thing - you're duped into believing that the stylesheet is fully functional, when in fact the linter tried to tell you that it can't promise any such thing. If you added code to suppress those warnings you should back it out again.
https://www.google.com/search?q=comodo+certificate+fraud
No, you can't do that in Chrome. Stylish adds STYLE elements to a document in a script that runs in that same document, and Chrome doesn't run extension scripts in SVG documents. An SVG that's the src of an IMG element isn't represented in the HTML DOM, so it isn't possible for the HTML document's script to add the STYLE either.
You can though "replace" the SVG IMG with a background-image, adding your CSS to the same SVG and including the modified image in-line as a data: URL. Compare, for example, which style and apply the same SVG image in two different ways.
https://github.com/JasonBarnabe/stylish-chrome/issues/5
I may do a version of my style usable for Chrome only if requested. It is something I prefer to avoid because I re-color a logo that is not mine. I think the owner should feel complimented. Yet I worry when I enter the gray realm of fair use of copyright art work.