直接上代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <link rel="stylesheet" type="text/css" media="screen" href="main.css">
  9.     <script src="main.js"></script>
  10. </head>
  11. <body style="background-color:black">
  12.     <svg class="svg_fc_title" viewBox="0 0 220 313" width="220" height="313">
  13.         <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>
  14.         <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>
  15.         <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>
  16.         <!--[if lte IE 8 ]><image class="img" src="https://puui.qpic.cn/vupload/0/20190121_1548072017548_15eb7fdz0vf.png/0" xlink:href=""></image><![endif]-->
  17.       </svg>
  18. </body>
  19. </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. robotframework安装和配置【转IBM：https://www.ibm.com/developerworks/cn/opensource/os-cn-robot-framework/index.html】

    内容   概览 Robot Framework 介绍 Robot Framework 的安装和配置 RIDE 编辑器介绍 创建测试项目 简单的测试用例的编写 总结 相关主题 评论   Robot Fr ...

  2. 线程池的使用。好文。mark【http://blog.csdn.net/rwecho/article/details/21157289】

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...

  3. POJ3132 Sum of Different Primes

    Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3473   Accepted: 2154 Description A pos ...

  4. jquery实现表单验证，所以的验证通过后方可提交

    <html>     <head>         <meta http-equiv="content-type" content="tex ...

  5. Linux 的信号和线程

    什么是线程 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成,每一个程序都至少 ...

  6. DTD概述

    1. 什么是XML文件 可扩展标记语言,标准通用标记语言的子集,是用于标记电子文件使其具有结构性的标记语言. 2. 什么是dtd文件 DTD(文档类型定义)的作用是定义XML文档的合法构建模块.它使用 ...

  7. slf4j 搭配 log4j2 处理日志

    目录 关于 log4j 关于 slf4j 案例使用 关于 log4j Log4j + Slf4j 的使用组合最为常见,但是我们知道 Log4j 目前已经停止更新了.Apache推出了新的 Log4j2 ...

  8. org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32

    org.apache.catalina.connector.ClientAbortException: java.io.IOException: APR error:-32 Most likely, ...

  9. Java8 ChronoUnits枚举

    原文:http://www.yiibai.com/java8/java8_chronounits.html java.time.temporal.ChronoUnit 枚举在 Java8 中添加,以取 ...

  10. python内存泄露诊断过程记录pyrasite

    工具:pyrasite;包含三个命令行 pyrasite / pyrasite-shell / pyrasite-memory-viewer 安装:gdb meliae urwid 说明:Pyrasi ...