web中使用svg失量图形及ie8以下浏览器的处理方式

直接上代码:

<!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>

  

猜你喜欢

转载自www.cnblogs.com/micenote/p/10398507.html