Can the opacity / translucence of an SVG group be adjusted together?

I have an SVG "g" object that has several components. I'd like to render the whole thing partly transparent (e.g. alpha = 0.5) I'd also like to to be darker if possible. I know individual fill colors can be adjusted, but how about all of them together, possibly in some parameters to the "g" (grouping) structure.

Solved

Changing the opacity of the (either by the opacity="..." attribute, or the opacity CSS rule) will cause the contents of the group to first be composited and then the result to be lowered in opacity. Note that this is distinctly different from lowering the opacity on all the elements inside the group (which you can also do via CSS):

Demo: http://jsfiddle.net/HZr7v/12/

enter image description here

Uses this SVG:

…with this CSS:

circle { fill:red }
rect { fill:blue }

#g2 * { opacity:0.5 }         /* Change the opacity of each shape    */
#g3   { opacity:0.5 }         /* Change the opacity of the group     */
#g4   { filter:url(#Darker) } /* Darkens and drops opacity for group */

Note in particular the difference in appearance where the circle and square overlap.

The feColorMatrix filter looks daunting. All it does is set the RGB values to each be 30% of the original RGB (i.e. darker), and the alpha to be 80% of the original alpha. Change the values as you see fit.

Oh, and if you want to desaturate also you can throw this into the filter (before or after the darken step):

You could set opacity on the itself and that would work. If you want it darker you'll need to apply a filter to the something along these lines perhaps

Comments

Post a Comment

Popular posts from this blog

When i am using UIImagePNGRepresentation or UIImageJPEGRepresentation for converting UIImage into NSdata, the image size is too much increased

When i am using UIImagePNGRepresentation or UIImageJPEGRepresentation for converting UIImage into NSdata, the image size is too much increased. Steps to Reproduce: 1)Open Xcode and select new project as single view based application 2)Open ViewController.xib and add two buttons named as i)Test Online Image ii)Test Local image 3)Add two IBActions i) -(IBAction)ClickLocalImageTest:(id)sender; ii) -(IBAction)ClickOnLineImageTest:(id)sender; 4)Connect "Test Online Image" to " -(IBAction)ClickOnLineImageTest:(id)sender " and "Test Local image" to " -(IBAction)ClickLocalImageTest:(id)sender ;" 5)impalement " -(IBAction)ClickLocalImageTest:(id)sender " method like as following - (IBAction)ClickLocalImageTest:(id)sender { NSLog(@"*************Test Local Image****************\n"); NSString *path=[[NSBundle mainBundle] pathForResource:@"hero_ipad_retina" ofType:@"jpg"]; NSLog(...
Read more

Frontend live-preview in Wordpress

I am looking for a live-preview functionality like the one here on the Stack exchanges sites. I am using a ticket system plugin called JS support ticket on a Wordpress site. It creates some textareas for the user to write in for posting messages. The plugin uses the built-in Wordpress editor for this, so the user writes and can add bold-face, italic etc. from the wysiwyg editor-menu just as the admin can do inside the admin panel. I am using the plugin MathJax at the same time for math writing. Writing for example $$a^2+b^2=c^2$$ creates a nicely formatted equation. It is the latex-syntax, and it can be tricky to get right at first try. Therefore I would like to have a live-preview right underneath the textarea. So the user can see the final layout of his message before posting. Exactly as done here on Stack exchange sites. This seems easier for me to achieve than creating an actual edit-button for the user. So, all in all I need a field underneath the editor, wh...
Read more

uable to assign TempData value to a variable in a View in mvc 4

Basically I am learning about difference between ViewBag, ViewData, TempData in practical.I am in confusion with the theory of these concepts so I want to see how things happen in practical. I learned that TempData is used to send data from controller to controller i.e from one action method to another action method, and it is short lived.Even then I can pass TempData value to a View as well. As I read that it's value gets null after subsequent request. But In my sample code snippet though there exist a value in TempData after a redirection, I'm unable to assign it to a variable. public ActionResult Index() { var featuredProduct = new Product { Name = "Special cupcakes", Des = "Delectable vanilla and chocolate cupcakes", Creationdate= DateTime.Now, Expirydate= DateTime.Today.AddDays(7) }; ViewData["FeaturedProduct"] = featuredProduct; ViewBag.product = featuredProduct; TempData["FeaturedProduct"] = featuredPro...
Read more