苹果svg解析自适应长图

最新推荐文章于 2022-07-08 13:54:06 发布

学不会就继续学

最新推荐文章于 2022-07-08 13:54:06 发布

阅读量605

点赞数 1

分类专栏： c++ 文章标签： css html

本文链接：https://blog.csdn.net/timoraty/article/details/119086221

版权

本文介绍了如何使用SVG和CSS实现IPhone12自适应长图的动画效果。关键在于利用SVG的set和animate元素，通过设置属性值变化和动画效果，实现长图的拉伸和隐藏。set元素用于延迟属性设置，animate元素则用于实现基本动画。文章详细讲解了这两个元素的作用、参数和测试代码，帮助理解长图动画的工作原理。

摘要由CSDN通过智能技术生成

IPhone12自适应长图svg解析

原文链接：https://mp.weixin.qq.com/s/S0fpT4JbdVvdKDXG5BemWw

参考：https://developers.weixin.qq.com/community/develop/article/doc/0000e8f0ba8a88b7522926d9251813

其中一个长图的关键代码

!<!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(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzN2dJOamib7zTVibO0Tia13cOo6xWQCtjlg2cSgclq7Vict7D3bgacQULmw/640&quot;);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(&quot;https://mmbiz.qpic.cn/mmbiz_png/s37uxK5D5wmwNs8K7ia5xt8qohrGB3zfzhESaInkl8RXhFf16OFfJIclc46KUK63Me0a2uZtEW6WzN4SZ1xRL7Q/640&quot;);background-size: 100% auto;background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg">
                	</svg>
              	</foreignObject>