The globe icon (svg icon) should be more clearer when against a background color with less opacity.
Right now, it is looking unclear:
However, ideally, the svg icon should look this way:
Related
I need to make an SVG that is to be used as a background-image with "cover", so the tile in the mosaic could be rescaled.
I'd like to have the icon at a fixed size and the posibility to always fill with a background color, because, to make matters more complicated, my image is going to be inside a container that is inside the tile
this is my example
my icon should go inside that red outlined box, fixed size and the background in gray
could i get that done?
I have Gray SVG icons next to each Menu item (inherited from another project) and displaied as background.
I need to show them black or white but I don't how to achieve this.
As backgrounds I can't use fill css property. I tried with filter:brightness(100) to make them white but I loose anti-aliasing (and analogue with filter:brightness(0) to make them black).
Mask has still serious compatibility issues (e.g. Firefox does not allow external svg).
I tried also to import them as data-uri with LESS feature, but it was unuseful, so.... any suggestion?
I have a map which pulls in GeoJSON polygons and points.
I represent these using the standard Leaflet methods to create SVG and html markers respectively.
To get an idea: http://i.imgur.com/GSJSZIc.jpg
SVG = blue, markers = green.
Leaflet creates 'panes', div.leaflet-overlay-pane for the SVG, and div.leaflet-marker-pane for markers. The leaflet-marker-pane (bordered in red) covers half the viewport and has a higher z-index then the leaflet-overlay-pane, thereby making the SVG polys under it unclickable.
If I set the zindex of the overlay pane to be less than the marker pane, all the markers are unclickable as the overlay pane covers the whole view port.
I've read some things in the Leaflet Github issues about createPane(), but so far haven't seen it working. Should/will this be something which fixes this problem? ie, puy all markers and SVG polys in the same pane/div.
For the time being I've set the marker pane to be 1px x 1px. This seems to work fine, leading me to ask, why would the marker pane ever be set to half the viewport size?
you have to add your svg into leaflet-marker-pane, for that just use option 'pane' when you add your SVG to the map
L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)
I'm trying to use d3's brush control. All works good except the rect.background of the brush is not expanding to fill the whole SVG, thus not allowing me to use the brush on the most right and bottom areas of SVG (which are not covered with background).
This jsFiddle illustrates the problem (scroll to the right and try using brush there) I've outlined the .background rect with the border.
What is the reason of this? And how to make the brush control to work all over the SVG?
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?