直接上代码：

<!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. noip2017爆炸记——题解&总结&反省（普及组+提高组）

    相关链接: noip2018总结 noip2017是我见过的有史以来最坑爹的一场考试了. 今年北京市考点有一个是我们学校,我还恰好被分到了自己学校(还是自己天天上课的那个教室),于是我同时报了普及提高 ...

  2. uva 11762 数学期望+记忆化搜索

    题目大意:给一个正整数N,每次可以在不超过N的素数中随机选择一个P,如果P是N的约数,则把N变成N/p,否则N不变,问平均情况下需要多少次随机选择,才能把N变成1? 分析:根据数学期望的线性和全期望公 ...

  3. Log4j2异步情况下怎么防止丢日志的源码分析以及队列等待和拒绝策略分析

    org.apache.logging.log4j.core.async.AsyncLoggerConfigDisruptor以下所有源码均在此类中首先我们看下log4j2异步队列的初始化 从这里面我们 ...

  4. R语言入门--画图（一）--ggplot2

    先写一些需要用到的知识点,比如包.函数 dplyr 很好用的包 经常与ggplot2连用 mutate:用于对数据框的列进行重新处理,或者用处理的结果添加新列 数据清洗: 1.na.omit()   ...

  5. AC日记——[网络流24题]方格取数问题 cogs 734

    734. [网络流24题] 方格取数问题 ★★☆   输入文件:grid.in   输出文件:grid.out   简单对比时间限制:1 s   内存限制:128 MB «问题描述: 在一个有m*n ...

  6. MySql的架构和历史

    1.1.mysql的逻辑架构 架构为如下: 存储引擎:负责数据的储存和提取,供了几十个API供服务层进行调用.各个存储引擎之间不会进行交互,只是供服务层进行调用.事务控制和锁的管理也是在存储引擎里面进 ...

  7. Wannafly练习赛14

    B(倍增) 题意:  分析: 先可以用two point预处理出以每个位置为起点的连续段<=k的下一个终点 然后对于每个询问,倍增跳就行了 时间复杂度O(nlogn) C(扫描线处理区间询问) ...

  8. 赵雅智_Swift（2）_swift常量和变量

    分号 Swift 并不强制要求你在每条语句的结尾处使用分号(;) 你打算在同一行内写多条独立的语句必需要用分号 let cat = "? ?? ? "; println(cat) ...

  9. 创建JDBC模板简化代码、JDBC应用的事务管理以及连接池的作用

    一.创建JDBC模板简化代码 一个简单的查询.要做这么一大堆事情,并且还要处理异常,我们不防来梳理一下: 1.获取connection  2.获取statement  3.获取resultset  4 ...

  10. 玩转Bash脚本：循环结构之while循环（转）

    转自:http://blog.csdn.net/guodongxiaren/article/details/43341769   总第8篇 本系列(玩转Bash脚本)更多文章,请访问:http://b ...