image-rendering="optimizeSpeed" means you can draw the image quicker, and since we’re filtering it won’t show anyway. By clipping the filter a bit we get better performance since that means we won’t have to recalculate the filter as often when we do the hover effect (it means that we can draw the cheaper non-filtered image on those parts that are outside of the blurred rect). Note that it looks like the background image is drawn twice, but this is actually intentional. This is the “blurred rounded rect” effect and you want it drawn on top of the background image. The entire group here should be added directly after the background image in the previous step. If the clip-path is applied to the image then the filter result may get clipped - sometimes that’s desirable, sometimes not. It is applied to a group so that the filter can first be applied to the image. The clip-path refers to the clipPath element created in a previous step. Next, create a few straight lines - add these inside the g element from the previous step, just below the closing tag: Note that for better performance you should use fill-opacity instead of opacity. Then for each of the rects I’ve assigned a fill. I’ve also added the 90% opacity to the g layer. The g element groups the rects together and provides a shape-rendering property to disable anti-aliasing so that the edges stay crisp.
The gradient vector is the line between the start point (x1,y1) and the end point (x2,y2). In other words, the attributes x1,x2,y1,y2 are mapped onto the bounding box that gradient is used on as follows: (x,y)=(0,0) means the upper left corner, (x,y)=(1,1) means the bottom right corner. When you create a gradient the default is that the boundingbox of the shape that the gradient is applied to is used. In case you didn’t follow the above, here is a little more explanation - any angle can be written as the vector (x1,y1) to (x2,y2) (the angle is the angle of that vector). The offset is where the color will be mapped onto the gradient vector specified with x1, y1, x2 and y2. I’ve added the gradient stops with the colors we want, and set the offsets. 90 degree angles (sometimes called straight angles) are easily translated into a vector from point (x1, y1) to point (x2, y2), where the value 1 maps to 100% of the boundingbox of the shape that gets painted with the gradient, and the value 0 maps of course to 0% of the same. The linear gradients gradiate between the first color and the second color at a 90 degree angle.
0 kommentar(er)
