Analysis of IPhone12 adaptive long graph svg
Original link: https://mp.weixin.qq.com/s/S0fpT4JbdVvdKDXG5BemWw
reference resources: https://developers.weixin.qq.com/community/develop/article/doc/0000e8f0ba8a88b7522926d9251813
One of the key codes of long graph
!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>huan</title>
</head>
<body>
<div class="rich_media_content " id="js_content" style="visibility: visible;">
<div class="rich_media_content " id="js_content" style="visibility: visible;">
<section style="overflow-anchor: none; display: block; user-select: none !important; visibility: visible;">
<section style="display: block; transform: rotate(180deg); transform-origin: center center; visibility: visible;">
<section style="display: block;height: 0 !important;margin-top: -1px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 5344" style="display: block;">
<g>
<foreignObject x="0" y="0" width="1080" height="2918">
<svg height="2918" style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzN2dJOamib7zTVibO0Tia13cOo6xWQCtjlg2cSgclq7Vict7D3bgacQULmw/640");background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg">
</svg>
</foreignObject>
<foreignObject x="0" y="2917" width="1080" height="2427">
<svg height="2427" style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzhESaInkl8RXhFf16OFfJIclc46KUK63Me0a2uZtEW6WzN4SZ1xRL7Q/640");background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg">
</svg>
</foreignObject>
</g>
</svg>
</section>
<svg style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzIOalWF7gGKoMw0utYf1ZTdTMl1SzU6ib94vKAJs84jrD5fNaCv1NBqA/640");background-size: 100% auto;background-repeat: no-repeat;max-width: none !important;-webkit-tap-highlight-color:rgba(0,0,0,0);transform:rotateZ(0);" viewBox="0 0 1080 751" width="100%">
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">
</set>
<animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never">
</animate>
<animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s">
</animate>
</svg>
<svg style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzKgWmH9MKw1vibO5NIMCTU3cjxSo9QbQiabwkVKzrRNm9x8d62A8p3XlA/640");background-size: 100% auto;background-repeat: no-repeat;transform:rotateZ(0);margin-top: -1px;" viewBox="0 0 1080 608">
</svg>
<section style="display: block;height: 0 !important;margin-top: -1px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 6788" style="display: block;">
<g>
<foreignObject x="0" y="0" width="1080" height="3403">
<svg height="3403" style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfz4kibbhThiaibAePUCWffkWs2aT54ViaxLw1uzFLZS1C1vah2ne77icoyZzQ/640");background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg">
</svg>
</foreignObject>
<foreignObject x="0" y="3402" width="1080" height="3386">
<svg height="3386" style="display: block;background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzU4iaXN99OoqO2RCUlgvELiaE230PFoLyRTp33PzO3tyvyyXCDyQSHwfA/640");background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg">
</svg>
</foreignObject>
</g>
</svg>
</section>
</section>
</section>
</div>
</div>
</body>
</html>
Elongated code analysis
principle
We notice that after clicking, the lower part disappears and a long figure appears. Let's simplify the principle
Simply put, it is to design an svg trigger, and change the width and height of the outer container by changing the width and height of the trigger
- Create container labels and svg labels
<section style="height:0;line-height:0;">
<svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"></svg>
</section>
- Set the height of the outer container to 0 and the overflow to hidden, and then spread the parent container with child elements
- Here we need to add a front-end knowledge. When the height of the parent container is not set, it can be changed according to the height of the child element
<section style="overflow:hidden;line-height:0;">
<section style="height:0;line-height:0;">
<svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"> </svg>
<svg viewBox="0 0 750 800" style="background-color:green;width:100%;display:inline-block;"> </svg>
</section>
<svg viewBox="0 0 750 500" style="background-color:red;width:100%;display:inline-block;">
</svg>
</section>
- When the width of the child element changes from 100 to 200, the width and height of the parent element will also change to achieve the stretching effect
<section style="overflow:hidden;line-height:0;">
<section style="height:0;line-height:0;">
<svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"></svg>
<svg viewBox="0 0 750 800" style="background-color:green;width:100%;display:inline-block;"></svg>
</section>
<svg viewBox="0 0 750 500" style="background-color:red;width:100%;display:inline-block;">
<animate attributeName="width" from="100%" to="320%" dur="1s" fill="freeze" begin="click" restart="never">
</animate>
<animate attributeName="opacity" begin="click" from="1" to="0" dur="0.1s" fill="freeze" restart="never">
</animate>
</svg>
</section>
In fact, the end value of svg is set to hide and remain unchanged. At the same time, after clicking, the transparency becomes 0 to achieve the effect of click disappearance
<svg style="display: block;
background-image: url("https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzIOalWF7gGKoMw0utYf1ZTdTMl1SzU6ib94vKAJs84jrD5fNaCv1NBqA/640");
background-size: 100% auto;
background-repeat: no-repeat;
max-width: none !important;
-webkit-tap-highlight-color:rgba(0,0,0,0);
transform:rotateZ(0);"
viewBox="0 0 1080 751"
width="100%">
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never">
</set>
<animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never">
</animate>
<animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s">
</animate>
</svg>
set element
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never"> </set>
effect
- Set is used to set the attribute value and can be used to implement the delay setting function, that is, an attribute value can be modified after a specific time.
Detailed explanation of parameters
- attributeName defines the attribute to be set. It can be SVG tag attributes such as width and height, or css attributes such as opacity and visibility
- attributeType defines the type of attribute to be set. It supports three fixed parameters "CSS | XML | auto", corresponding to attributeName. For the attribute on the SVG tag, set attributeType = 'XML', and the CSS attribute set the type value to CSS. auto is the default value, which automatically determines whether the attributeName attribute belongs to XML or CSS (in fact, it is treated as CSS first. If it is found that it is not recognized, it is directly treated as XML category)
- to: indicates the end value of the animation. Here, it means that the label will be hidden after the end, so that the long picture can be displayed
- begin refers to the time when the animation starts, which means that it starts 2.2 seconds after clicking
- Fill: fill indicates how animation gaps are filled. The supported parameters are: free | remove. Free is the default value, indicating that the animation ends and returns directly to the beginning. freeze indicates the position fixed at the end of the animation
- Rest: used to set whether the animation can be repeated. The settable value is' always | when not active | never
- Always is the default value, which means always, that is, the animation is executed once without triggering.
- When not active: indicates that the animation cannot be restarted while the animation is in progress.
- never: indicates that the animation cannot be triggered again.
Test code
For example, setting the set attribute of this svg element alone can achieve the effect that the animation ends 2.2 seconds after clicking, hides and remains hidden at the end
<svg viewBox="0 0 750 800" style="background-color:blue;width:100%;display:inline-block;"> <set attributeName="visibility" attributeType="CSS" to="hidden" begin="click+2.2s" fill="freeze" restart="never"> </set> </svg>
animate element
<animate attributeName="opacity" values="1;0;0" keyTimes="0;0.09;1" begin="click" dur="2.2s" fill="freeze" restart="never"> </animate>
effect
- Realize basic animation
Detailed explanation of parameters
- Like set, attributeName sets the name of the attribute, begin is the start condition, click is the start after clicking, fill is the state at the end, and restart is set to never, indicating that it will not be repeated
- value: multiple animation nodes can be set, which means that the transparency is 1 at 0 seconds and 0 at 0 seconds. The transparency changes to 0 in 09 seconds and 1 second
- Keytimes: used to limit the execution time of each stage. It is a string of 0-1 floating-point number groups. The valid value range of each value is 0-1, which means that each animation stage must be completed at that time point. The length of keytimes number group should be consistent with the length of values
- dur: the duration of animation execution. The value that can be set is a normal time value or 'infinite'. Setting 'define' is the same as not animating. In this example, set the time to 2.2 seconds
<animate attributeName="width" fill="freeze" restart="never" dur="2s" values="100%;711.58%" calcMode="spline" keySplines="0.42 0 0.58 1.0" begin="click+0.2s"> </animate>
The attribute set by the second animation is width, which means that the width changes from 100% to 711.58% after clicking. It is frozen at the end and does not repeat. The animation execution time is 2s and the start time is 0.2 seconds after clicking
-
calcMode: used to define the rhythm of animation execution, that is, how to complete the whole set of animation within a specified time. The calcMode property supports four values: discrete,linear,paced,spline.
-
discrete: discontinuous motion, i.e. directly jumping from one state to another, such as directly jumping from state to state
-
Linear: linear motion, the default value of calcMode for elements other than animateMotion elements. The rate of animation is consistent from beginning to end. The execution time of each animation stage is consistent.
-
Paced: linear motion. The execution speed of animation is the same from beginning to end. If paced is set, keyTimes is invalid.
-
spline: the execution speed can be customized, which is similar to the CSS attribute - timing function: cubic bezier(). We can define the execution effect of each animation through the keyTimes and keySplines attributes
-
-
keySplines: valid only when the value of calcMode is spline. keySplines can be set to multiple groups, and each group is marked with " separate. Each group represents the rate of execution in this animation phase