Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use SVG to realize the prompt box function". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to use SVG to realize the prompt box function"!

NO.1

preface

Tooltips are often called prompt boxes (or information prompt boxes), which can provide users with corresponding prompt information with strong interactivity and freedom. Today we're not going to talk about how to achieve powerful interaction behaviors, but how to best restore them visually and apply them to different scenarios.

NO.2

background

The above picture is a screenshot of the UI effect encountered in the usual work scene. The Tooltips box shown above basically covers common UI styles. To summarize briefly:

Bordered prompt box

Prompt box for solid color (or solid color with transparency)

Tip box with inner shadow (or outer shadow)

Tip box with border + gradient

Tip box with border + transparency background

Tip box Tip box for triangle fillet and shadow

There may also be hint box UI styles that I haven't encountered. Faced with so many UI styles, it is challenging for front-end implementation, especially when multiple effects are combined. For example, with border + inner and outer shadow + gradient (or transparency)+ rounded triangle, etc. Basically a combination of the various UI styles mentioned above.

NO.3

clip-path scheme

Usually the implementation of the above figure is to use CSS to draw a sharp corner to splice it up, which is a good solution.

Let's briefly introduce the clip-path scheme:

Divide the prompt into two parts, one square and one triangle, and then combine the two together to form a prompt.

Assuming that the size of the prompt box is w x h and the border thickness is h2, the following coordinate points are required to draw the notched:

d1 Coordinates (0, 0)

d2 coordinates ((50% - b), 0) or ((w / 2 - b), 0) where b is half the length of the diagonal side of the triangle, as described later

d3 coordinates ((50% - b - h2), h2) or ((w / 2 - b - h2), h2)

d4 coordinates ((50% + b + h2), h2) or ((w / 2 + b + h2), h2)

d5 coordinates ((50% + b), 0) or ((w / 2 + b), 0)

d6 Coordinates (100%, 0) or (w, 0)

d7 Coordinates (100%, 100%) or (w, h)

d8 coordinates (0, 100%) or (0, h)

Coordinates are placed into the polygon() function of clip-path, and the final clipped graph looks like the following

clip-path: polygon( 0 0, calc(50% - 4px) 0, calc(50% - 7px) 2px, calc(50% + 7px) 2px, calc(50% + 4px) 0, 100% 0, 100% 100%, 0 100%, 0 0);

The other is the triangle part, if our triangle is a 10px x 10px rotated 45deg. According to some trigonometric formulas and known square sides, the length of the diagonal of a square can be calculated:

NO.4

The clip-path scheme encountered a problem

This effect looks good as a whole, but a closer look will reveal that there may be gaps and overlaps at the seams.

This kind of pixel misalignment problem is also common after using vw scheme, and the first Tooltips need to be graded from left to right because of the background. At this time, the sharp gradient needs to be matched with the gradient below.

Because we had encountered this kind of ToolTip style problem before, after informing the visual students, the considerate visual students modified a version of the solid color prompt box without transparency, but the visual effect was greatly reduced.

In fact, we have many defects in the original CSClip-path scheme. It shows high implementation cost and general effect when it appears with shadow, background transparency or gradient and border at the same time.

NO.5

SVG scheme

In the discussion, we thought of the natural match between SVG path and the style of this prompt box (it is recommended to understand the relevant documents of path first). After consulting the relevant documents and materials, we roughly got the following advantages realized by using SVG:

Easily meet shadows, background transparency or gradients, border effects, and even more complex and varied scenes

SVG path implementation is simple and the code is minimal

extensibility, maintainability

Using the Demo tool, we will get the path data roughly as follows:

M 0,0 L -15,-15 H -79 Q -84,-15 -84,-20 V -85 Q -84,-90-79,-90

H 61 Q 66,-90 66,-85 V -20 Q 66,-15 61,-15 H 15 z

The following commands are commonly used when drawing paths using SVG:

Command Name Parameters Mmoveto(x y)+Zclosepath (none)Llineto (x y)+Hhorizontal lineto x+Vvertical lineto y+Ccurveto (Cubic Bezier curve to)(x1 y1 x2 y2 x y)+Ssmooth curveto (Smooth Cubic Bezier Curve to)(x2 y2 x y)+Qquadratic Bézier curveto (Quadratic Bezier curve to)(x1 y1 x y)+Tsmooth quadratic Bézier curveto (smooth quadratic Bezier curve to)(x y)+ Aelliptic arc (rx ry x-axis-rotation large-arc-flag sweet-flag x y)+RCatmull-Rom curve *(Catmull-Rom curve) x1y1 (x y)+

Bezier curve

In SVGpath command I personally think the most essential part is the Bezier curve, Bezier can draw all kinds of pleasant curves.

Bezier curves are shaped entirely by their control points,n control points corresponding to Bezier curves of order n-1, and can be drawn recursively. Let's first look at how the next order and quadratic Bezier curves are drawn:

Primary curve:

On a straight line, the coordinate formula of the point on the red line segment as time t changes should be as follows:

Quadratic Bezier curve:

p0, p1 and p2 are three points that are not collinear, and are connected by line segments in turn. At this time, a point p0'on the line segment p0p1 is arbitrarily selected, as shown in the figure above: our point p0' is at 0.26 (t=0.26) of the line segment p0 p1. At this moment, the same ratio column of the line segment p1p2 is selected as point p1 '. At this time, p0' and p1'are connected to form the line segment p0'p1'. When the value p0' is selected according to the ratio column above, a point of the quadratic Bezier curve is determined.

After some deduction, the quadratic Bezier curve formula is:

N times Bessel can be considered as the iterative process of the above value, you can intuitively feel the change process of the curve of 1~4 times with time t through the following figure.

Q command in SVG

Back to our ToolTips topic, where rounded corners can be achieved by quadratic Bezier curves, SVG Q command is to achieve quadratic Bezier curves

The corresponding instruction, where x1,y1 is the point p1 we mentioned above:

Q x1 y1, x y

An example of a quadratic Bezier curve Q is as follows:

By setting the starting point and adjusting the control point p1 we can get the fillet we want, as shown in the figure below, the small dot is our p1 control point

NO.6

style settings

After implementing SVG above, the following transparency, background gradient, shadow, border settings are not a problem.

Background transparency:

path { fill: rgba(0,0,0, .3); storke: #ffffff; storke-width: 1px}

Shadow:

svg { filter：drop-shadow(2px 4px 6px black)}

As to why drop-shadow is used, see below the difference between box-shadow and drop-shadow effects.

When using box-shadow, our sharp corners are not shaded, and the bubble box is shaded, which will appear as shown in the figure below, while using drop-shadow can meet our requirements for sharp corners and bubble boxes to have shadows.

background gradient

SVG supports not only simple fills, but also linear and radial gradients and graphic textures. In order for gradients to be reusable, the gradient content needs to be defined inside the label.

The following is a demonstration of radial gradients:

After applying this gradient to our prompt box, we can see the effect as shown below. Finally, we don't have to deal with the sharp gradient convergence problem.

NO.7

Demand is not over.

After the above solution landed in the project, we may have inadvertently moved the designer. In the recent requirements visual draft, we found that the Tooltips style involved has become more and more amazing. A simple list of two styles is as follows:

The first version of the solution we have built is based on the Demo tool demo we have produced an SDK for ToolTips, where we use a single parameter arrowHeight passed in to generate sharp corners. It is impossible to cope with the two styles above, the sharp corner styles are changeable, how to expand and ease of use becomes a problem, it is impossible to develop an SDK for all the changeable sharp corner styles.

NO.8

programmes to improve

To cope with the changing bubble sharp corners, we must find a way to pull the sharp corners out of the original bubble outer path, generate a sharp corner path and form a complete closed path on the bubble.

To simplify the numerical process, I replaced the original sharp (0,0) coordinate definition with the following diagram point:

So the next sharp corner can be freely designed, as long as it is guaranteed to start from (0, 0) and finally return to (-arrowWidth,0), the following is a sharp corner path: (M 0 0 C -10 0 -8 5 -12 5 S -14 0 -24 0)

By designing different angled paths we can combine different bubble patterns:

The pointed bubble on the right above finally gives us the following path string, where Q -2 7 -9 10 Q -6 5 -7 0 is our pointed path:

M 0 0

Q -2 7 -9 10 Q -6 5 -7 0

H -110

Q -116,0 -116,-6

V -56

Q -116,-62 -110,-62

H 101

Q 107,-62 107,-56

V -6

Q 107,0 101,0

H 0 z

As you can see from the short path above, our sharp path is fully integrated into the entire SVG bubble path, so there is no need to worry about CSS clip-path problems.

NO.9

visualization tool

The solution seems to have addressed the sharp pattern in the requirements, but you might wonder how the sharp path is generated, and does it need to be derived with great mathematical ability? The following three Bezier curves have not dared to look straight, let alone four or five times...

Therefore, we must produce visual tools to achieve this path generation process, thanks to the D3.js tool library operation SVG powerful features, we developed the end of the generation tool address

For students familiar with SVG path command, this operation is not difficult. If you are not familiar with it, please refer to the reference article below. After understanding the curve command, you can draw a smooth curve.

At this point, I believe that everyone has a deeper understanding of "how to use SVG to realize the prompt box function". Let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.