I have svg rectangles animate from bottom to top and out of the border of the svg. In some resolutions and browsers there is a pixel line building up on top. Sort of like a smear-effect.
I change colors, opacity and sizes of the svg, but the problem consists.
see code in action:
https://codepen.io/anon/pen/ydYdpX
Related
I have an SVG (https://drive.google.com/open?id=1SBA2Xsi228agUO65FmtLwjg6Zuoq59-5) which is shifted. I have tried to change parameters such as width, height, viewBox, and transform attributes. I do not have a clear understanding of this area and it is not as simple as I estimated. I need to draw only the below part and remove the padding.
I do not want to use JS for this. Everything should be in the SVG file and I use it in the tag. The SVG file should not hard code the width and height and should scale as per the tag. It appears that the SVG file draws with left padding by default. I am trying to find the line in SVG that does it.
I have a canvas whose height and width attributes are not mentioned during creation. I update the height and width of it through javascript so that it always fills the viewport height and width. When I use a jpg for the canvas background, it works fine. But when I use a svg, I find that it gets clipped to the default canvas dimension ( 300px x 150px ). But if I set the height and width of the canvas as attributes directly in the tag, then the svg fills the entire canvas properly. Why does SVG behave this way and how can I fix i?
In my app I'm create an SVG scene which include an image - the scene background, and some shapes (rect, circle) on it.
on the svg element im setting a view-box for working with logical unit and not with pixels for example.
so, on the svg element i'm setting the preserveAspectRatio attribute to be "xMidYMid slice", same on image - the background scene inside.
everything looks as expected, except the that now the position x=0, y=0 is not where it's supposed to be, the x=0, y=0 is according to where the scene was before it was "sliced", although the SVG element width and height is the same.
I need that the x=0,y=0 be where it should be, on the left corner of the scene.
Thanks for your help.
N, St.
If you don't want the origin (top left) of the SVG to move, then try:
preserveAspectRatio="xMinYMin slice"
Perhaps this was what you were after?
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