Take a look at the final SVG interaction:

(To experience the actual effect of the body page of the official account, please scan the code at the bottom of this article to pay attention to the official account)

1 why do public accounts need to interact with SVG

Technology has to have the ground application scenario to play effectiveness. Why are many public accounts doing SVG interaction instead of H5?

There are two main reasons:

  1. The production cost of H5 is high, which requires a certain development cycle and server support.
  2. Jumping from the main page to the H5 page is an extra step, which is easy to cause user loss.

Of course, H5 needs to be developed separately for complex interactions and more.

SVG can only be used for simple interactions, but it can increase the interaction experience without distracting users too much from the content, making it desirable in many scenarios.

2 Application Scenarios

The essence of SVG interaction is still based on SVG SMIL Animation. With THE CLICK event of SVG, the interaction is very simple.

Although the effect is limited, there is still a lot of room to play with, such as the following application scenarios:

  1. [Car publicity] After clicking the car, the car will move and pass a certain location to display a feature or location name copy.
  2. 【 Psychological test 】 After clicking an option, the selection result appears.
  3. 【 Open a red envelope 】 Remove the red envelope layer by layer to show the innermost contents.
  4. [Password Unlock] Click the specified number to display the unlock content.
  5. 【 guess lantern riddles 】 click to display the content, similar to flipping cards.

Let’s start with the whole process of making this Demo.

3 Material Production

3.1 Background Picture

Design SVG backgrounds using software such as PS. The recommended width is 640px to 750px, and can be higher, but the file size will increase. This example creates a 640px x 800px JPG background:

SVG 3.2 material

You can go to alibaba Vector Gallery (www.iconfont.cn/) website to download. You can also make your own using AI. However, it is important to control the image size of SVG. The size of SVG images is the click area, so control the white space in the image.

This Demo downloaded firecracker SVG from Ali vector library, and then opened it with AI to reduce the size of the picture:

3.3 export SVG

Select Styling as Presentation Attributes so that the EXPORTED SVG does not contain

4 build SVG

4.1 Basic structure of SVG

<svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>
Copy the code

The style here is based on CSS, not detailed.

Let’s focus on the viewBox properties:

viewBox=”x, y, width, height”

X and y control the displacement of all elements in SVG (without affecting the SVG background).

Width and height are not the actual width and height of SVG, but the “resolution” within SVG. The larger the width and height, the smaller the element in SVG, and vice versa (without affecting the SVG background).

It is recommended that x and y of the viewBox be set to 0 and width and height be set to the size of the background image.

4.2 Adding Text

Use

to add text first:

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+       <text x="200" y="540" fill="#fff" style="font-size: 30px"</text> </ SVG >Copy the code

Adjust the position by adjusting X and y, fill is the color of the text, and style is the size.

4.3 Add text dynamic effects

Now make the text flash. Here you need to use

and

tags.

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+       <g>
+           <animate attributeName="opacity" begin="0s" dur="1s" values="1. 0; 1" repeatCount="indefinite"></animate>
            <text x="200" y="540" fill="#fff" style="font-size: 30px"</text> </g> </ SVG >Copy the code

AttributeName: animation-controlled property, which is set to opacity.

Begin indicates the start time of animation, which can be understood as the delay time. 0S indicates that the animation starts immediately. It can also be a semicolon delimited set of values, for example, beigin=”3s; “5s” means that the animation will start after 3s, and the animation will start again at 6s (if the animation does not finish before, it will immediately stop to start from the beginning).

Dur is the animation time. The smaller the DUR, the faster the animation.

Values: Indicates the change in the value of an attributeName. It can be a single value or multiple values separated by semicolons (“1 “). 0; 1” means “opaque -> Transparent -> Opaque”, that is, flashing effect.

RepeatCount, which means number of animation repeats, indefinite= infinite

The

tag is simply a combination of wrapped elements that animate only the elements within the

.

The effect is as follows:

4.4 Extract the firecracker code from SVG

Open the AI-generated SVG file and just take the firecracker’s vector path code:

4.5 Adding Firecrackers

Add the firecracker code, use the wrap, and then adjust the position with the adjust Translate.

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"</g> + < p style= "max-width: 100%; clear: both; min-height: 1em"transform: translate(140px, 580px);">
+               <path d="M37.1, 124.13 v3.45 a20.83, 20.83, 0, 1-3.36, 12.28, 21.27, 21.27, 0, 0, 3.54, 11.86, 3.45, 3.45, 0,0,0,3.45, 3.45 h0a3. 45,3.45, 0, 0 , 3.45 3.45 h0c0-3.88, 1.1-5.78, 2.62 8.41 A27.61, 27.61, 0,0,0,44,127.58 v - 3.45 H37.1 Z" transform="translate(-16.4 0)" fill="#c83741" />
+               <path d="M50.9, 124.13 v72.42 A3.45, 3.45, 0,0,0,54.34, 200 h0a3. 45,3.45, 0,0,0,3.45 3.45 h0V124. 13 h50. 9 z" transform="translate(-16.4 0)" fill="# 963737" />
+               <path d="M26.76, 37.91 v86.22 a3.45, 3.45, 0,0,0,3.45, 3.45 H57.8 a3.45, 3.45, 0,0,0,3.45-3.45 V37.91 Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+               <path d="M26.76, 37.91 H61.24 V51.71 H26.76 Z" transform="translate(-16.4 0)" fill="#c83741" />
+               <path d="M17.08, A365.1 36.27, 365.1, 0,0,0,40.89, a3.64 1.75, 3.64, 0,0,1,6.23, 0365365,0,0,0,23.8, 34.51, 3.14, 3.14, 0, 1-2.46, 5.09 H19. 55 a3. 14,3.14, 0,0,1,17.08, 36.27 Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+               <path d="M61.24, 58.6, 26.76, 68.95 V55.15 L61.24, 44.81 Zm0 L26.76 27.59, 96.54 V82.74 L61.24, 72.4 Zm0 L26.76 27.59, 124.13 V110.33 L61.24, 100 z " transform="translate(-16.4 0)" fill="#ffcf65" />
+               <path d="M61.24, 51.7 v - 6.9 - l - 23,6.9 Z" transform="translate(-16.4 0)" fill="#ffb450" />
+           </g>
    </svg>
Copy the code

4.6 Make wish SVG

Make wish SVG with AI, remember to use Command+Shift+O to convert text into vectors. Then export SVG as in Section 3.3.

4.7 Add a wish card

The wish card, which is displayed after the firecracker rises into the sky, actually covers the front of the firecracker, and the firecracker does not disappear. So the wish code should be written after the Firecracker code. Extract the code of wish card from SVG refer to Section 4.4, adjust the position, and add the code as follows:

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"< p style= "margin-top: 1em; margin-bottom: 1em"transform: translate(140px, 580px);"< p style= "max-width: 100%; clear: both; min-height: 1em"transform: translate(120px, 560px);"> </g> </ SVG >Copy the code

The effect is as follows: The wish card completely blocks the firecracker:

4.8 Setting the initial attributes of the wish card

Opacity is set to 0 since the initial state of the wish card is not invisible.

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"< p style= "margin-top: 1em; margin-bottom: 1em"transform: translate(140px, 580px);""> < p style=" max-width: 100%; clear: both; min-height: 1em"transform: translate(120px, 560px); opacity: 0;"</g> </ SVG >Copy the code

5 SVG Click interaction

5.1 Firecrackers into the sky

What we want to achieve is through “one click”, the firecracker goes up, and then the wish card appears. Firecracker and wish are to be paired.

Next, use the implementation Click to trigger the animation.

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> Literal code </g> + <g> + <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5 s" restart="never"></animateTransform>
                <g style="transform: translate(140px, 580px);""> < p style=" max-width: 100%; clear: both; min-height: 1em"transform: translate(120px, 560px); opacity: 0;"</g> + </g> </ SVG >Copy the code

Key attributes:

Type: attributeName=”transform”. The value can be Translate, scale, rotate, skewX, or skewY.

Fill, the way to fill gaps in an animation. The supported parameters are freeze and remove. Remove is the default and means that the animation ends and goes straight back to where it started. Freeze indicates the state after the animation is maintained.

Restart: the value can be always, whenNotActive, or never. Always is the default value, which means that the animation is re-executed at each point; WhenNotActive indicates that animation cannot be restarted while it is in progress. Never indicates that the animation is executed only once.

Click +2 = 2 seconds after the click.

Now we have the effect of clicking on the firecracker, but the wish card is still not visible. This is where “Click + time” comes in.

5.2 Wish card display

Add in the wish card, since the firecracker ascending animation is 0.5s, so click+0.5 just after the firecracker animation ends displays the wish card.

    <svg style="display: inline-block; width: 100%; background-image:url(bg.jpg); background-size: 100%,100%; background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> Literal code </g> <g> <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5 s" restart="never"></animateTransform>
                <g style="transform: translate(140px, 580px);""> < p style=" max-width: 100%; clear: both; min-height: 1em"transform: translate(120px, 560px); opacity: 0;">
+                   <animate attributeName="opacity" begin=Click "+ 0.5" dur="0.1 s" values="0; 1" fill="freeze" restart="never"</g> </g> </ SVG >Copy the code

※ Note: Notice the hierarchy between the element begin=click and the element begin=click+0.5. First, the click element and the click+0.5 element must be in the same

; Second, the click+0.5 element is at a deeper level than the Click element, so it correctly corresponds to the same Click event.

5.3 Finish the remaining firecrackers

For the remaining two firecrackers, just follow the above steps to replace the picture of the wish card, and then adjust the position of the elements, without further elaboration.

6. Import wechat official account

6.1 Uploading Background Image Materials

We use the local path for the background picture in the above code, which needs to be uploaded to the wechat background to obtain the online address. Enter wechat public platform, click on the left side of material management -> picture -> Upload:

6.2 Import the text of wechat articles

New text message, first input a good title, author, upload a good cover image. Then enter two lines of text in the text area (wechat requires text in the text).

Open the Chrome Debug Tool and navigate to the second line:

When you’re done, you can release the preview.

6.3 Precautions

The wechat editor has many default “hidden rules” that may reject our embedded code. If rejected, our embedded code will be deleted or replaced with another tag. Here are the “unspoken rules” I’ve figured out.

  1. In the labelbackgroundIn url(), the address cannot be quoted, neither single quotation marks nor double quotation marks, otherwise it will be filtered out by wechat editor.
  2. It can’t be on the labelid
  3. There can be<style><script><a>The label.

We will continue to update with new findings.

6.4 Bizarre bugs and skills experience

  1. After clicking the element in the body page of the official account of wechat Android client and moving the animation, the element may appear a strange border. Needs to be given to the elements involved<g>Set style=”outline: None “, including<g>All of the children in<g>.

  1. The center of an SVG image

When designing SVG with AI, it is best to have the center of the element at the midpoint of the SVG, otherwise the deviation of the center will cause element rotation problems when implementing the Rotate animation. Although you can adjust the center position using the last two parameters of from and to, it is very difficult to find the exact position manually.

<animateTransform attributeName="transform" type="rotate" from=41.5 43 "0" to="360 41.5 43" dur="3s" repeatCount="indefinite">
Copy the code

6.5 References

Zhang Xinxu’s blog super Powerful SVG SMIL Animation In Detail

www.zhangxinxu.com/wordpress/2…

SVG reference

www.runoob.com/svg/svg-ref…

6.6 Complete HTML code

Check it out on github: github.com/Yuezi32/wei…

That’s all for this episode. Thanks for watching. Keep up with the latest great articles, please follow my personal public number ^_^