直接上代码：

<!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. Codevs 1299 切水果 水一发

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 简单的说,一共N个水果排成一排,切M次,每次切[L,R]区间的所有水果(可能有的 ...

  2. 在App_Data中创建数据库获取连接串简便方法！

    原文发布时间为:2008-07-25 -- 来源于本人的百度文章 [由搬家工具导入] 1、在App_Data右击添加一个SQL数据库2、双击该数据库，在左边添加表，并显示表数据进行添加数据3、把刚刚创 ...

  3. Android网络编程之HttpClient运用

    Android网络编程之HttpClient运用 在 Android开发中我们经常会用到网络连接功能与服务器进行数据的交互,为此Android的SDK提供了Apache的HttpClient来方便我们 ...

  4. Codeforces Round #512 (Div. 2, based on Technocup 2019 Elimination Round 1) E. Vasya and Good Sequences

    题目链接 官网题解写的好清楚,和昨晚Aguin说的一模一样…… 这题只和每个数1的个数有关,设每个数1的个数的数组为$b$,就是首先一段如果是好的,要满足两个条件: 1.这一段$b$数组和为偶数,因为 ...

  5. 快速掌握RabbitMQ(一)——RabbitMQ的基本概念、安装和C#驱动

    1 RabbitMQ简介 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现,官网地址:http://www.rabbitmq.com.Ra ...

  6. 洛谷 P3865 【模板】ST表

    P3865 [模板]ST表 题目背景 这是一道ST表经典题——静态区间最大值 请注意最大数据时限只有0.8s,数据强度不低,请务必保证你的每次查询复杂度为 O(1)O(1) 题目描述 给定一个长度为  ...

  7. 电音中DJ/Producer/MC/EDM/Remix/Mix的名词解释（转）

    DJ DJ是Disc Jockey的缩写,是电音圈子里的一种热门职业,一般大家在夜店或者酒吧看到的站在台上甩着膀子拧着按钮或者使劲儿搓碟的就是DJ啦. DJ的主要工作一般就是在现场用打碟机和混音台把许 ...

  8. leetcode最长递增子序列问题

    题目描写叙述: 给定一个数组,删除最少的元素,保证剩下的元素是递增有序的. 分析: 题目的意思是删除最少的元素.保证剩下的元素是递增有序的,事实上换一种方式想,就是寻找最长的递增有序序列.解法有非常多 ...

  9. 把握linux内核设计思想（十二）：内存管理之slab分配器

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流.请勿用于商业用途] 上一节最后说到对于小内存区的请求,假设採用伙伴系统来进行分配,则会在页内产生非 ...

  10. C语言使用以及其它语言经常出的错误

    1. 计算优先级 i/*pi/(*p) //默认即用“()”花括号分隔即可 2.分号结束 ; ; if(i<j);{ //code } //分号结束必须看清楚 3.声明变量 ; ; //声明变量 ...