直接上代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css">

    <script src="main.js"></script>

</head>

<body style="background-color:black">

    <svg class="svg_fc_title" viewBox="0 0 220 313" width="220" height="313">

        <path d="M1 255.3L54.3 202M176 43.3L219.3 0M95 312.3l33.3-33.3" opacity=".7" fill="none" stroke="#ff5c38" stroke-linecap="square"></path>

        <path d="M178.2 188H107v5.5h-5v-50c0-3.1 0-7.5.1-13.4H178v4.6h-36.9v13.1h32.4v4.6h-32.4v13.1h32.4v4.6h-32.4v13.2h37.2l-.1 4.7zm-40.6 15.3h43.5v4.9h-40.9c3 2.8 5.9 5.3 8.9 7.6s6.1 4.3 9.3 6.2c3.3 1.9 6.8 3.6 10.6 5.3 3.8 1.6 8.1 3.2 13 4.8l-2.9 5.5c-4.9-1.8-9.3-3.7-13.2-5.6s-7.5-4-10.8-6.2c-3.3-2.2-6.3-4.6-9.2-7.3-2.8-2.6-5.6-5.6-8.3-8.9v33.8h-5.2V210c-2.7 3.7-5.5 7.1-8.4 10.1-2.9 3-6.1 5.6-9.6 8-3.5 2.4-7.3 4.4-11.5 6.1-4.2 1.7-9 3.2-14.3 4.5l-.7-2.6c4.6-1.8 8.8-3.7 12.5-5.6s7.2-4 10.4-6.2 6.2-4.6 9.1-7.3c2.9-2.7 5.7-5.6 8.3-8.7H89.4v-4.9h43.1v-10.2h5.2l-.1 10.1zm-30.7-20h28.9v-13.2h-28.9v13.2zm0-17.1h28.9v-13.1h-28.9v13.1zm.2-31.1c0 .1 0 .2-.1.2s-.1.1-.1.2v12.7h28.9v-13.1h-28.7zm33.3-5.6c-1.1-2.4-2.1-4.7-3.1-6.8-1.1-2.3-2.2-4.7-3.4-7l2.7-1.6c1.9 1.9 3.5 4 4.8 6.1 1.3 2.1 2.5 4.3 3.5 6.6l-4.5 2.7z" opacity=".4" fill="#fff"></path>

        <path d="M76.8 60.8H25V19.2h51.8v41.6zm-1.3 56.4H55v26.1c0 2.2-.2 4.3-.7 6.2s-1.4 3.3-2.9 4.3c-1.4 1-3.4 1.5-6 1.6-2.6.1-5.9-.6-9.9-1.8v-1.9c3 .1 5.4 0 7.3-.3s3.3-.9 4.3-1.6c1-.7 1.7-1.8 2-3 .3-1.2.5-2.6.5-4.2v-25.3H26.7V91.7h48.8v25.5zm-43.3-5h37.9V96.7H32.2v15.5zm-1.6-56.3h40.8V42.1H30.6v13.8zm0-18.6h40.8V24.2H30.6v13.1zM84 79.2H19.2v-5h30.7c-.4-1.6-.9-3.2-1.4-4.7-.5-1.5-1-3.3-1.5-5.2l3.5-1c1.4 2.1 2.4 4 3 5.7.7 1.7 1.2 3.4 1.8 5.2H84v5zm40.8 24.2c-3.2 6.2-6.4 11.8-9.6 16.8s-6.6 9.7-10.2 13.9c-3.6 4.3-7.6 8.2-11.9 11.8-4.3 3.6-9.2 7-14.6 10.2l-1.4-2.2c5.1-4.2 9.7-8.2 13.6-12 3.9-3.8 7.5-7.9 10.9-12.2 3.4-4.4 6.5-8.9 9.4-13.7 2.9-4.9 5.9-10.4 9-16.6-.2 0 4.8 4 4.8 4zM121.9 58c-2.4 4.4-4.9 8.8-7.6 13.1-2.4 3.9-5.1 7.7-7.9 11.4-2.8 3.5-5.8 6.8-9 9.9-3.3 3.1-6.9 6-11 8.8L84.6 99c3.5-3.5 6.7-7 9.7-10.4 2.9-3.4 5.7-7 8.3-10.6 2.6-3.7 5.1-7.5 7.4-11.4 2.4-4.1 4.7-8.3 6.9-12.6l5 4zm-4.5-38.6c-4.1 7.8-8.6 14.9-13.6 21.2S92.6 52.4 85.1 57l-1.6-2.2c6-5.7 11.2-11.6 15.8-17.8s9-13.3 13.4-21.4c-.1 0 4.7 3.8 4.7 3.8zM40.2 127.7c-2.7 3.8-5.4 7.3-8.2 10.5-2.8 3.1-6.5 6-11 8.6l-1.6-1.3c2.9-3.5 5.7-7 8.5-10.5 2.6-3.3 5.2-6.9 7.8-10.8l4.5 3.5zM75 143.4c-2.1-2.7-4.3-5.3-6.4-8-2.2-2.7-4.4-5.4-6.7-8l2.4-2.6c3.1 2.1 5.7 4.3 7.8 6.6 2.3 2.5 4.6 5.1 6.9 7.8l-4 4.2z" fill="#fff"></path>

        <!--[if lte IE 8 ]><image class="img" src="https://puui.qpic.cn/vupload/0/20190121_1548072017548_15eb7fdz0vf.png/0" xlink:href=""></image><![endif]-->

      </svg>

</body>

</html>

　　

web中使用svg失量图形及ie8以下浏览器的处理方式的更多相关文章

  1. vue中，svg图标添加click事件，部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  2. web中浏览PDF文件

    1.在web中浏览pdf文件. 2.支持大多数主流浏览器,包括IE8 3.参考网址: https://pdfobject.com/ http://mozilla.github.io/pdf.js/ & ...

  3. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  4. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  5. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  6. HT for Web中3D流动效果的实现与应用

    流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...

  7. Web中的图标

    随着时代的变迁与技术的不断的更新,在当今这个时代,Web中的图标(Icons)不再仅仅是局限于<img>.除了<img>直接调用Icons文件之外,还有Sprites(俗称雪碧 ...

  8. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  9. 在web中绘制图像 -- canvas篇

    汗,不小心点击发布了.其实正在编辑中...... HTML Canvas是现代浏览器中非常棒的绘图技术,Canvas可以绘制图形,操作图片,制作游戏,创建动画等:Canvas是很容易使用的,下面我们来 ...

随机推荐

  1. 【NOI2012】骑行川藏

    获得成就:第一次在信竞做神仙数学题 先放个前言,$OI$ 出大型数学题还是比较麻烦的,因为主要是考你数学推导 / 手算式子,你算出来之后把公式套个板子,就得到结论——$OI$ 的大型数学题的代码都是板 ...

  2. Lucas定理详解

    这篇博客是从另一位园友那里存的,但是当时忘了写原文的地址,如果有找到原文地址的请评论联系! Lucas定理解决的问题是组合数取模.数学上来说,就是求 \(\binom n m\mod p\).(p为素 ...

  3. LightOJ1106 Gone Fishing

    Gone Fishing John is going on a fishing trip. He has h hours available, and there are n lakes in the ...

  4. 使用Eclipse+axis2一步一步发布webservice

    1.下载axis2相关软件http://axis.apache.org/axis2/java/core/download.html 2.Java环境配置:JAVA_HOME.JRE_HONE.PATH ...

  5. linux下面MySQL变量修改及生效

    今天在访问mysql项目的时候突然报500错误,没有找到连接,因此想到mysql的连接时间. mysql> show global variables; 主要就是连接时间是28800(8小时), ...

  6. ZOJ - 3816 Generalized Palindromic Number dfs

    Generalized Palindromic Number Time Limit: 2 Seconds                                     Memory Limi ...

  7. android 禁止ViewPager滑动

    最近项目中,有个需求就是要禁止ViewPager滑动事件,我们看下360手机助手的界面,风格就类似这样的 大家如果使用过360手机助手就会发现中间内容是不可以滑动的,现在写一个demo,讲下怎么禁止V ...

  8. .NET Core 3.0之创建基于Consul的Configuration扩展组件

    写在前面 经过前面三篇关于.NET Core Configuration的文章之后,本篇文章主要讨论如何扩展一个Configuration组件出来.如果前面三篇文章没有看到,可以点击如下地址访问 .N ...

  9. Ryuji doesn't want to study （树状数组）

    [传送门]:https://nanti.jisuanke.com/t/31460 [题意]给定一个数组a[N],有两种操作, 操作1,给定 l , r,  查询a[l]×L+a[l+1]×(L−1)+ ...

  10. AIO

    IBM® 市场 (英文) 提交   我的 IBM 站点导航   学习 开发 社区 学习 Java technology 内容   概览 简单介绍 Asynchronous I/O 开始简单的异步 I/ ...