I have a number of transparent overlapping ellipses (as shown below).
I highlight each ellipse on mouseover, but it is impossible to highlight many ellipses because other ellipses have been drawn over them.
From my limited knowledge of svg, there are three solutions:
Find some way to only detect mouseovers on the edges of each ellipse.
Draw the ellipses using bezier curves.
Reorder the drawing of ellipses. I am not sure how to do this, or if it is even possible to solve it this way given all these shapes.
Any help is much appreciated!
Target areas in svg are only whatever is painted on-screen. So, in theory, your ellipses should be hoverable only on their strokes. If this is not the case then you might be setting your fill with something else than none (perhaps rgba(0,0,0,0) ?).
You might also also be setting the hover on the g element instead of the ellipse.
You can see an example here: http://jsfiddle.net/r65E9/
ellipse {
stroke: #fff;
stroke-width: 1;
fill: none;
}
ellipse:hover {
stroke: #f66;
}
Related
I want the margin to be be an irregular shape that is fixed so that as I scroll up and down, the spacing of the words will automatically readjust to fit around the shape.
to start I tried making a square using this styling in CSS to make it wrap and stay fixed:
float: left;
shape-outside: square;
position: absolute;
however it seems it cannot float to wrap the text and have the position stay fixed to stop it scrolling out of view, at the same time.
without "position: absolute;" text wraps but shape and text scroll out of viewing range together. Apply it and the text no longer wraps and is behind square, which stays in its position.
if this had worked I would have just created a stack of different sized boxes that were filled transparent to create an irregular left hand margin.
I'm not sure any of this is even possible but if it is, I'm sure there's a much more effective way to do it... any solutions?
I have a given polygon layer, I call setStyle(style) on it, style is {"color":"FFFFFF", fillColor":"FFFFFF"}. After the call the feature has its default color that I gave it during creation (even when this wasn't the style that the layer had before calling setStyle()).
I'm not really sure what code I could share here to demonstrate the problem, its really just the single function call. Does anyone know why this might be happening? Things I should check for to diagnose whats going on?
edit:
A screenshot of chrome devtools showing whats going on. The dark polygon on the left is the one which is supposed to be set white right now, but it is instead colored gray (its original color at creation).
TL;DR: You're using color: "FFFFFF", but you should be using color: "#FFFFFF", or color: "white".
The "FFFFFF" string is not a valid CSS colour definition anymore.
Once upon a time, browsers used to use fallback techniques when it came to CSS colour definitions, and that caused much confusion with the color: chucknorris CSS rule. Nowadays, this behaviour seems to be deprecated in most browsers, which will fall back to a colour of their choice.
Leaflet is doing its job of passing the colour to the SVG paths (or to the canvas draw calls), e.g. code like this...
L.circleMarker([0,0], {
radius: 100,
weight: 10,
color: "FFFFFF",
fillColor: "FFFFFF",
fillOpacity: 1
}).addTo(map);
...will produce a SVG element on the DOM which looks like this...
<path class="leaflet-interactive" stroke="FFFFFF" stroke-opacity="1" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" fill="FFFFFF" fill-opacity="1" fill-rule="evenodd" d="M304,405a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0 "></path>
...and the browser won't understand those colours, and will most probably fall back to no stroke, and black fill, like this:
This is not exclusive to SVG elements; try this, which shall fall back to transparent background and black text:
<div style="background: 00ffff; color: ff0000">I should be red text on cyan background</div>
By sheer chance, the browser is falling back to a colour you were defining already, which is causing confusion.
So, in essence this is a GIGO problem, and you should make sure to define your CSS colours the right way.
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
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.
How would I create a path/rect with a two-color stroke? E.g. if the stroke-width is 2px, I want the outer 1px to be black and the inner 1px to be blue. Should I use gradients or patterns, or will I need to resort to some sort of hack?
As far as I know there is no support for defining the position of the stroke with regards to the path/rect (inside, middle, outaide)
As in this this proposal: http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Stroke_position
I think you have to make two rects/paths and stroke them individually.
You could make Z's 2 piece solution a set so that it behaves and can be treated like a single Element