I'm using svgo and am running into an odd issue where it's killing my fill color, but only if it's #000000; or any variation of the sort, black, #000. I've tried setting removeUselessStrokeAndFill to false but it continues to remove that color only. Editing the src .svg file with something different maintains the fill color. Is there a setting I'm missing? Thanks!
No, you're doing it right. There is actually an issue #115 on the svgo about this.
To fix this, you have to set your color to another black, the closer to the real black is #000001. So you can change all your black color references to this in your svg, wait for a fix, or event better, install gulp-replace and do something like this :
gulp.task('blackify', function () {
return gulp.src('*.svg')
.pipe(replace('#000000', '#000001'))
.pipe(gulp.dest('./'));
});
To clarify, this is actually right behaviour of SVGO, because the default fill and stroke colour of an SVG is black and thus useless if it's redeclared as the fill. That's the reason it's removed from the output. Any other fill which is not the default, will be left alone as intended.
See: http://www.w3.org/TR/SVG/painting.html#FillProperties
Related
It doesn't look like LineBasicMaterial has any way that I can assign an alpha to it. But I would really like transparent lines. How do I do that? The whole line will have the same transparency, I guess that means it's a constant alpha?
I've created a CodePen demonstrating opacity in lines. Note that you must include transparency: true in the material properties, otherwise three.js will not consider opacity in its rendering formula.
Thank you #Marquizzo for kindly pointing me to this property, it's exactly what I was looking for.
Current Hover Color
I want to change the hover color when we move mouse over the items in the vaadin-select box, by default its coming in light blue color as seen in screenshot 1 but I want to change to some other color. How to do that ?
I have tried by adding
:host(:hover) {
background-color: #9cbdd6;
}
and importing as
#CssImport(value = "./styles/vaadin-select-items.css", themeFor = "vaadin-item")
Inspecting Vaadin Select
The below answer worked perfectly for the above problem,
However There is one problem happening the hover color is coming when the dropdown is closed also means the overlay is not opened. How to stop that ?
I need only to modify the hover color on the overlay as below which is happening correctly via the mentioned code but need to stop the above.
Hover color on the overlay items
Also applying theme like this is applied on all overlay items, how to apply these styles uniquely for some components.
You're on the right track, but you'll need a strong selector. If you're willing to use !important, this will work:
:host(:hover:not([disabled])) {
background: red !important;
}
I have a weird problem, that i can't figure out.
I want to change a gameobjects base color via renderer.material.color.
But for whatever reason, this only works for some colors.
This is my code:
first, I declare the colors:
var color_movement_available = Color(0.17,0.68,0.05,1);
var color_movement_available_hover = Color(0.33,1.00,0.17,1);
then i assign them, like this
case ("movement_available") :
renderer.material.color = color_movement_available;
break;
case ("movement_available_hover") :
renderer.material.color = color_movement_available_hover;
break;
However, when I test the script, the hovering color (pinkish) will not show.
I checked in the inspector and the color is the one i aimed for and is correctly switched.
When i change it to a bright (basecolor) green, red, blue or yellow, it works as supposed.
Other colors will produce white and some wont change anything.
Has anyone an idea what's causing this effect, or better yet, how to solve it?
What i tried so far:
switching the material renderer to diffuse (from transparent/diffuse):
same results
changing the materials initial basecolor to grey (from white):
also, no change
Maybe this has something to do with the way colors are applied ...
cheers
Edit: Screenshots:
Also, apparently, colors that are close to each other, like the same color only darker/lighter appear to be the ones producing white
I'm guessing you have a mesh renderer on your object.
Try GetComponent< MeshRenderer >().material.color
There are three basic ways to move a path in Raphael.
If that path has a fill image that has PNG transparency, and you need IE8 (VML), all three are flawed.
JSBin demo
If you use a simple transform...
path1.animate({transform: 't20,100'},1000);
...then in IE8, the png transparency in the fill breaks and translucent pixels turn black. Edges become pixelated and ugly, and depending on the image you might get a scuffy black outline around the translucent edge of the image. Not good, and there doesn't seem to be any reliable way to fix this after the event.
Sometimes, inconsistently, the background image also doesn't stay relative to the element (more on that below).
If you animate the path attribute, for example like this:
path2.animate({path: Raphael.transformPath( path2.attr('path'), 't100,20') },1000);
...IE8 doesn't wreck the image background. However, the fix for making background images relative to the element not the paper does not work with this method (and various ways I've tried to bodge it using improved background image offset with an additional "M-20,-20" element don't seem to work), and I can't find any way to make that work either.
Also, just having lots of transformations on the go can break the delicate IE8 bug the background image fix depends on in VML mode, causing the background to move. This seems to be inconsistent - with the JSBin above, in IE8, sometimes they all move, sometimes only the top one moves.
If you use translate...
path3.translate(42,42);
...the results are the same as transform (presumably both use the same translate functions).
With Raphael image elements, it's possible to fix this broken alpha by applying opacity with the transform in an attr or animate call. This doesn't work with path fills. Also, turning off the fill and resetting it from the original URL string doesn't remove the broken alpha contamination. You can see this in this demo.
So, I'm looking for a way to move a Raphael path that has a background image that has PNG transparency that a) keeps the image relative to the element, consistently and b) doesn't wreck the PNG transparency in IE8 by turning partial transparency into pixelated black.
Similar problems occur with any form of transformation - such as scale, rotate etc.
I can't find any good answer to this: the closest I've found is an ugly but functional workaround for IE8 transform (wrapped in if(Raphael.type=='VML')s so you don't spoil things for real browsers):
Before doing any transform to anything that has an alpha transparency PNG / pattern fill, remove the pattern fill (path.attr({fill:'none'});), storing the fill setting like path.data('fill',path.attr('fill'));
After the transform, asynchronously (e.g. wrapped in setTimeout(function(){ })) re-apply the fill e.g. path.attr({fill: path.data('fill')});
The crucial thing seems to be: the fill must not be applied when the transform occurs, else it'll be ruined forever, even if you remove and re-apply it. Be careful with the timing on this - it mustn't be possible for the fill to re-apply before the transform completes (e.g. watch out for race conditions with animations or other async processes).
If you're animating a transform, your options seem to be to either:
Clear the fill before the animation, just accept that there will be no fill while the animation takes place, and re-set in a callback after the animation completes
Implement your own animation handler than removes and re-applies the fill before and after every frame (this, of course, risks being a performance nightmare).
I'm pretty new to Fireworks. I drew an orange rectangle and made it semi-transparent. My web page has a patterned background which I'd like to be able to see through my div, but I can't change the opacity of the div in CSS as the div contains other divs that also become transparent using this CSS when I don't want them to!
I've tried loads of things I found on Google but to no avail. Can anyone help?
If you want to know how to export the semi-transparent rectangle from Fireworks so it stays that way, just make sure your canvas color is set to none (the box with a red diagonal line through it) and then export it as a PNG-32.
I'm not sure I understood what you mean by DIVs becoming transparent when using CSS. Can you elaborate on that a bit?