solid colors

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

solid colors

David Dailey

Hi all,

 

One of the nice things about CSS is that one can group objects together in a semantic hierarchy using <g> and, then, orthogonally associate different members of items across <g>-boundaries using different classes. So, for example, the elements of an arm might consist of a watch, a sleeve, and a hand, (all grouped together for purposes of spatial/semantic animation) while the skin can be colored by the same gradient that is also applied to a foot (living in a different group). Having orthogonal ways of inheriting properties is a good thing (though not quite as strong, perhaps,  as what one might hope connectors to be able to provide, in which semantic, and not merely stylistic links between things could be established independent of position in a DOM tree).

 

CSS animation doesn’t work very well across browsers yet (particularly when the SVG is viewed in <img> tags on social media) so rather than using CSS animation to animate color transitions, I thought it might be nice to provide a CSS referent to a paint-server that is just a <color> (animated by SMIL) rather than a gradient.  Is there a way of doing that? It seems like something that has probably been around since early SVG 1.1 and yet I never had occasion to look. I see that such a thing (solid color) is under consideration in

https://www.w3.org/TR/SVG2/pservers.html. But that is a lot more sophisticated (allowing a fill to be a video for example) than what I’m wondering about.

 

Regards, David

 

Footnote:

Most of the experiments I have done with using CSS instead of SVG to do my animation fail in one way or another. About 1/5 of the things one would expect to be able to do (based on experimentation with SVG for a goodly long while) fail in IE/Edge, Safari, Chrome and Firefox. Another half fail in at least one of Chrome, Firefox and Safari. Another large number fails in Firefox when the SVG is viewed in the context of HTML image. I understand that this CSS business is only a suggestion, but it took a decade until “Real SVG animation” started to work consistently across browsers (much of that consistency is now disintegrating), and having another decade to watch as browsers work out the bugs in CSS (which isn’t intended to be as powerful anyhow) will be a continuing source of frustration and another good reason for mathematicians and artists to continue to use animated GIF as their imagery web-standard of choice. Dang! It really isn’t as good as SVG as most of you probably know, but at least it works and that is why my decade plus of proselytizing for SVG has fallen on many deaf ears in those communities. I still use SVG, though, for experiments in math, tessellation, datavis, and even art – it’s just that enthusiasm gradually gives way to frustration. Sorry for complaining; it seems like something that might not be widely known, since WG test cases are usually highly simplified – it’s when one combines CSS animation with things like <pattern> or <gradientTransform> that things seem most likely to fall apart.

Reply | Threaded
Open this post in threaded view
|

Re: solid colors

Robert Longson
Isn't that just a gradient with one stop?

SVG tiny 1.2 had a solidColor element but nobody's implemented it because you can do the same thing with a 1 stop gradient.

Robert.
Reply | Threaded
Open this post in threaded view
|

RE: solid colors

David Dailey

Hi Robert,

 

Yep! Interestingly, I started doing that yesterday before you replied, but thought it terribly inelegant. I wasn’t sure if it would work (not being sure what would happen if a gradient only had one stop), but it does.

 

SVG2’s solidColor will be nice – one can currently fill a region with a video  or whatever by using clipPaths, but it screws up the semantics.

 

Text filled with <pattern> containing <image>[1]
( See http://srufaculty.sru.edu/david.dailey/svg/text/belize.svg )

 

Image carved by clipPath containing text[1]
(see http://srufaculty.sru.edu/david.dailey/svg/text/belize2.svg )

 

The first is “accessible” as text; the second isn’t.

 

Thanks

David

[1] http://cs.sru.edu/%7Eddailey/svg/GeometricAccessibility.html

 

 

From: Robert Longson [mailto:[hidden email]]
Sent: Friday, July 29, 2016 8:03 AM
To: [hidden email]
Cc: ddailey
Subject: Re: solid colors

 

Isn't that just a gradient with one stop?

SVG tiny 1.2 had a solidColor element but nobody's implemented it because you can do the same thing with a 1 stop gradient.

Robert.