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?
Related
I use ggez and would like to resize the window. The only way I found is
graphics::set_drawable_size(&mut ctx, width, height);
However, when I use it, the white circle I drawn turns into a white ellipse, and a seemingly grey circle appears below. So is there another way of resizing window, one that doesn't distort what is drawn ?
use
graphics::set_screen_coordinates(ctx,rect)
right after declaring changing size with graphics::set_mode(ctx,windowmode) turns the ellipse back into a circle. The gray shape vanishes after reducing the window (this is a pretty obscure thing).
Is there a possibility to make a part of svg rect transparent? f.x. it has width 100px, and between 40 and 70 px it is transparent. Problem is - the central part should be really transparent and show elements below, it should be not filled with background color like mask.
Thank you in advance.
Use a clipPath to define which parts of your SVG should be transparent.
Complete example here.
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)
Here are the facts:
I have a div with rounded corners containing an SVG element with rounded corners that creates a circle.
Inside the circle (SVG) I am drawing four polygons that make out different circle quadrants.
The polygons respond to hover by changing color - so that when a user mouse is over a specific quadrant in the circle - it lights up.
The SVG and the div containing the SVG both have overflow:hidden CSS directive.
When I mouse over an area outside the circle (but inside the clipped rectangle of the polygon) - the corresponding quadrant lights up...
Why is the element responding to mouse over even though I am hovering over a clipped area?
How can I make sure this will not happen? (without creating occluding transparent elements - I want to be able to touch something in the layer below...).
EDIT:
added fiddle as requested:
http://jsfiddle.net/JVQD8/
In the fiddle - note that the surrounding div is bordered with a red line.
the polygons (in blue) are clipped by the red border (div), and when you hover over a polygon it becomes a lighter shade of blue.
The polygon highlights outside the area of the red circle border if on the polygon.
Edit:
As commented by Robert Longson, there is no problem at all in Firefox.
However, in chrome the problem is as described, and in IE the SVG polygon is not even responding to hover.
So the question about chrome remains as is - only in chrome. How do i know if this is a bug that i should report, or if this is a designed behavioral difference?
Try experimenting with the pointer-events attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
Suppose that I have an existing SVG scene. I would now like to paint a rectangle on top of this scene, and for all background pixels that are covered by this rectangle, I would like to apply some filter, e.g. desaturation. Note that I can do darkening/lightening using opacity, but in this case, I'd like a more complicated effect. Is this possible to do?
Sure, use an feColorMatrix filter type="saturate" See here