line is out of mask
There are lines out of clip-path while animation is running (when the svg have certain width or scaling)
The animation is transform: translate() of the group inside clip-path group.
Maybe someone have dealt with this problem, help pls (
Related
I noticed while working with three.js that the webgl canvas element's height and width is getting set to double the css style height and width that's set in the window resize function. Wondering why this is because I'm running into some bugs while using some custom build shaders with Effects Composer.
This probably has to do with the device-pixel-ratio, which i think is 2 on retina-screens. Here is the code that sets the values for the canvas-element: https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js#L353-L379
The default-value for the pixel-ratio is 1, and it should probably stay that way if you are doing pixel-shader heavy operations in full-screen. Search through your code for setPixelRatio() and remove it.
If I add this style (.style("opacity", .2) to a rectangle the gridlines appear in front of the rectangle, in this example http://bl.ocks.org/bunkat/1962173. Is there a way to bring shape to front or send gridline back?
The elements in an SVG are displayed in the order in which they are added to the DOM. That is, anything you want displayed on top of everything else should be added last. In your case, you need to add the rectangle after adding the grid lines.
Here's a jsfiddle to play with dom order and opacity:
http://jsfiddle.net/laurieskelly/9jr65/
If you back the shapes with identical shapes of the background color, the grid lines will not show through.
Simpler solution: do the shapes really need to be transparent?
I'm setting up a portfolio webpage, and I want the images to be coloured with a colour from the logo 50% solid until mouseover, which makes the colour fade out and reveal the image properly.
Here's the site so far; www.cmvisual.com
Anybody know how to do this?
It seems like you probably want to put a div with a background color and partial opacity
over the image, and then use a CSS transition (preferably) or Javascript to animate the transition.
Maybe start at half opacity, then go to 0 opacity on rollover.
What you REALLY want is CSS blend modes, but that isn't fully supported yet.
The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.
It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag
I believe the issue is in Firefox.
Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.
For Instance.
img{width:100%;
height:xxpx; /* Where 'xx' is the value of the image height in pixels */
}
Hope this Helps.
I checked the docs and all I could find was to set the stroke but I need the whole xAxis background and not only font color.
#Renaldo Balaj Well, you could add an svg element to your chart like here
https://codesandbox.io/s/highlight-zomm-line-chart-forked-o18fe
But there is an issue I am struggling with: on codesandbox on resize all is ok, but in my browser those rectangles are moving out of borders while resizing, can't make them attached to axis