0
点赞
收藏
分享

微信扫一扫

微信公众号发布svg排版文章

ixiaoyang8 2022-01-21 阅读 106
微信svg

svg代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div>
    <section style="line-height: 0;overflow: hidden;">
        <section style="height: 0;">
            <svg
              viewbox="0 0 1222 5196"
              style="display: block;width: 100%;background: url(https://svg-1305776833.cos.ap-nanjing.myqcloud.com/di2.jpg) center center no-repeat;background-size: 100% 100%;"></svg>
        </section>
        <svg
          viewbox="0 0 100 74"
          style="display: block;max-width: none!important;width: 100%;background: #fff url(https://svg-1305776833.cos.ap-nanjing.myqcloud.com/feng1.webp) center center no-repeat;background-size: 100% 100%;">
            <animate
              attributeName="width"
              values="100%;630%;630%"
              dur="3s"
              begin="click+1s"
              fill="freeze"
              restart="never"></animate>
              <animate
                attributeName="opacity"
                values="1;.5;0"
                dur="1s"
                begin="click"
                fill="freeze"
                restart="never"></animate>
        </svg>
    </section>
</div>
</body>
</html>

将svg代码嵌入到文章中

在正文区域输入一行文字(如 代码嵌入位置)作为代码的占位。

在Chrome浏览器空白处鼠标右键/检查,打开调试工具,定位到代码位置文字,右击鼠标选择Edit as HTML,

删除原有代码,把内容替换为我们的SVG代码。

然后随便点击下其他元素的代码,有时可能会自动撤销,如果出现这种情况,再重新粘贴一次就行。

举报

相关推荐

0 条评论