master

分支 (3)

管理

管理

master

1.2.0

php版本备份

svg2css
/
index.html

<!DOCTYPE html>
<html>
<head>
<title>SVG 转义 CSS 代码</title>
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/svg2css.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script src="js/svg2css.min.js"></script>
<link rel="stylesheet" type="text/css" href="plug/spectrum/spectrum.css">
<script type="text/javascript" src="plug/spectrum/spectrum.js"></script>
<script type="text/javascript" src="plug/spectrum/spectrum_docs.js"></script>
<script>
function subcheck(o)
{
  if(!o.code.value){
    return false;
  }
}

function tabs(thisli)
{
  var divnid = $(thisli).data('divid');
  $('#'+divnid).show().siblings('.tabdiv').hide();
  $(thisli).addClass('on').siblings('li').removeClass('on');
}
</script>
</head>

<body>

<div class="margin">
  <div class="tab">
    <ul class="aclear">
      <li class="on" onmouseenter="tabs(this)" data-divid="tab_demo">演示</li>
      <li onmouseenter="tabs(this)" data-divid="tab_use">开始转换</li>
      <li><a href="tobase64.html" target="_blank">文件转base64</a></li>
    </ul>
  </div>

  <div id="tab_demo" class="tabdiv tabshow">
    <div class="part aclear">
      <div class="h0">演示：</div>

      <div class="pleft pleft1">
        <div class="h1">SVG标签</div>
        <svg t="1567081803624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="240" height="240"><path d="M822.888322 211.06521c-39.036245-39.722612-85.269714-71.26541-137.216891-93.645805-54.219415-23.359372-112.968854-36.07764-174.875584-37.752617-117.893842 0-227.80535 45.937248-309.524016 129.329687-39.134985 39.92491-69.79273 86.255916-91.180903 137.809334C88.204236 399.544115 77.065817 455.241026 77.065817 512.216748c0 94.629598 30.461468 184.827912 87.930893 260.826848l69.196674 73.048762c38.053655 31.541594 80.734872 56.185797 126.968342 73.136664 47.907243 17.648072 98.180647 26.51907 149.634121 26.51907 51.7509 0 102.320526-9.068479 150.425249-26.810475 46.430951-17.154369 89.309649-42.09359 127.462045-73.933814l69.097934-73.340166c56.778241-75.805068 86.844747-165.503658 86.844746-259.448094 0-114.247665-43.274864-221.205386-121.737499-301.150333z m-65.456574 548.868769c-65.946664 65.849128-153.482595 102.127861-246.635901 102.127861-93.152102 0-180.786773-36.278733-246.634697-102.127861-65.847924-65.847924-102.123045-153.482595-102.123045-246.633493 0-93.153306 36.275121-180.689237 102.123045-246.635902 65.847924-65.84672 153.482595-102.121841 246.634697-102.12184 47.122135 0 92.76316 9.26596 135.740599 27.404123 41.599887 17.544515 78.857597 42.681217 110.895302 74.717717 65.847924 65.946664 102.123045 153.482595 102.123045 246.635902-0.001204 93.150898-36.276325 180.785569-102.123045 246.633493z" fill="" p-id="2138"></path><path d="M673.545606 350.16901c-23.757946 0-42.977439 19.318233-42.977438 42.977438v61.016861c0 23.759151 19.318233 42.978643 42.977438 42.978642 23.757946 0 42.977439-19.318233 42.977439-42.978642v-61.016861c0-23.659206-19.318233-42.977439-42.977439-42.977438zM378.212538 484.822258c8.283371-8.184631 12.915749-19.026828 12.915749-30.658949v-61.016861c0-23.659206-19.321845-42.977439-42.982255-42.977438-23.75313 0-43.076179 19.318233-43.076179 42.977438v61.016861c0 23.66041 19.323049 42.978643 43.076179 42.978642 11.237159 0 21.985433-4.337361 30.066506-12.319693z m297.401804 115.430144c-11.632122-9.959553-31.83902-7.493447-41.896109 4.138675-35.287715 39.134985-71.957798 55.795651-122.923591 55.795651-53.232009 0-85.362434-14.589522-122.724905-55.59817-10.352107-12.021063-30.461468-14.388429-42.09359-4.434897-12.812192 11.038474-14.783391 29.867821-4.237415 42.192331 50.075923 56.482019 97.395539 78.462635 169.05591 78.462635 69.497713 0 123.219812-24.939221 169.155856-78.561376 10.255774-11.830807 8.279759-31.055116-4.336156-41.994849z m0 0" fill="" p-id="2139"></path></svg>
      </div>

      <div class="pright pright1">
        <div class="h1">源代码</div>
        <div class="h2">
          <textarea class="xtext" style="height:202px;">&lt;svg t=&quot;1567081803624&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;2137&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;path d=&quot;M822.888322 211.06521c-39.036245-39.722612-85.269714-71.26541-137.216891-93.645805-54.219415-23.359372-112.968854-36.07764-174.875584-37.752617-117.893842 0-227.80535 45.937248-309.524016 129.329687-39.134985 39.92491-69.79273 86.255916-91.180903 137.809334C88.204236 399.544115 77.065817 455.241026 77.065817 512.216748c0 94.629598 30.461468 184.827912 87.930893 260.826848l69.196674 73.048762c38.053655 31.541594 80.734872 56.185797 126.968342 73.136664 47.907243 17.648072 98.180647 26.51907 149.634121 26.51907 51.7509 0 102.320526-9.068479 150.425249-26.810475 46.430951-17.154369 89.309649-42.09359 127.462045-73.933814l69.097934-73.340166c56.778241-75.805068 86.844747-165.503658 86.844746-259.448094 0-114.247665-43.274864-221.205386-121.737499-301.150333z m-65.456574 548.868769c-65.946664 65.849128-153.482595 102.127861-246.635901 102.127861-93.152102 0-180.786773-36.278733-246.634697-102.127861-65.847924-65.847924-102.123045-153.482595-102.123045-246.633493 0-93.153306 36.275121-180.689237 102.123045-246.635902 65.847924-65.84672 153.482595-102.121841 246.634697-102.12184 47.122135 0 92.76316 9.26596 135.740599 27.404123 41.599887 17.544515 78.857597 42.681217 110.895302 74.717717 65.847924 65.946664 102.123045 153.482595 102.123045 246.635902-0.001204 93.150898-36.276325 180.785569-102.123045 246.633493z&quot; fill=&quot;&quot; p-id=&quot;2138&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M673.545606 350.16901c-23.757946 0-42.977439 19.318233-42.977438 42.977438v61.016861c0 23.759151 19.318233 42.978643 42.977438 42.978642 23.757946 0 42.977439-19.318233 42.977439-42.978642v-61.016861c0-23.659206-19.318233-42.977439-42.977439-42.977438zM378.212538 484.822258c8.283371-8.184631 12.915749-19.026828 12.915749-30.658949v-61.016861c0-23.659206-19.321845-42.977439-42.982255-42.977438-23.75313 0-43.076179 19.318233-43.076179 42.977438v61.016861c0 23.66041 19.323049 42.978643 43.076179 42.978642 11.237159 0 21.985433-4.337361 30.066506-12.319693z m297.401804 115.430144c-11.632122-9.959553-31.83902-7.493447-41.896109 4.138675-35.287715 39.134985-71.957798 55.795651-122.923591 55.795651-53.232009 0-85.362434-14.589522-122.724905-55.59817-10.352107-12.021063-30.461468-14.388429-42.09359-4.434897-12.812192 11.038474-14.783391 29.867821-4.237415 42.192331 50.075923 56.482019 97.395539 78.462635 169.05591 78.462635 69.497713 0 123.219812-24.939221 169.155856-78.561376 10.255774-11.830807 8.279759-31.055116-4.336156-41.994849z m0 0&quot; fill=&quot;&quot; p-id=&quot;2139&quot;&gt;&lt;/path&gt;&lt;/svg&gt;</textarea>
          <span class="howtoget">如何获取能在网页上直接显示的svg源代码? &nbsp; 1.打开网址 <a href="https://www.iconfont.cn/" target="_blank">www.iconfont.cn</a> &nbsp; 2.上传svg文件 &nbsp; 3.下载图标 &nbsp; 4.复制SVG</span>
        </div>
      </div>
    </div>

    <div class="part aclear">
      <div class="pleft">
        <div class="h1">转义CSS代码</div>
        <div class="h2">
          data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M822.888322 211.06521c-39.036245-39.722612-85.269714-71.26541-137.216891-93.645805-54.219415-23.359372-112.968854-36.07764-174.875584-37.752617-117.893842 0-227.80535 45.937248-309.524016 129.329687-39.134985 39.92491-69.79273 86.255916-91.180903 137.809334C88.204236 399.544115 77.065817 455.241026 77.065817 512.216748c0 94.629598 30.461468 184.827912 87.930893 260.826848l69.196674 73.048762c38.053655 31.541594 80.734872 56.185797 126.968342 73.136664 47.907243 17.648072 98.180647 26.51907 149.634121 26.51907 51.7509 0 102.320526-9.068479 150.425249-26.810475 46.430951-17.154369 89.309649-42.09359 127.462045-73.933814l69.097934-73.340166c56.778241-75.805068 86.844747-165.503658 86.844746-259.448094 0-114.247665-43.274864-221.205386-121.737499-301.150333z m-65.456574 548.868769c-65.946664 65.849128-153.482595 102.127861-246.635901 102.127861-93.152102 0-180.786773-36.278733-246.634697-102.127861-65.847924-65.847924-102.123045-153.482595-102.123045-246.633493 0-93.153306 36.275121-180.689237 102.123045-246.635902 65.847924-65.84672 153.482595-102.121841 246.634697-102.12184 47.122135 0 92.76316 9.26596 135.740599 27.404123 41.599887 17.544515 78.857597 42.681217 110.895302 74.717717 65.847924 65.946664 102.123045 153.482595 102.123045 246.635902-0.001204 93.150898-36.276325 180.785569-102.123045 246.633493z'/%3E%3Cpath d='M673.545606 350.16901c-23.757946 0-42.977439 19.318233-42.977438 42.977438v61.016861c0 23.759151 19.318233 42.978643 42.977438 42.978642 23.757946 0 42.977439-19.318233 42.977439-42.978642v-61.016861c0-23.659206-19.318233-42.977439-42.977439-42.977438zM378.212538 484.822258c8.283371-8.184631 12.915749-19.026828 12.915749-30.658949v-61.016861c0-23.659206-19.321845-42.977439-42.982255-42.977438-23.75313 0-43.076179 19.318233-43.076179 42.977438v61.016861c0 23.66041 19.323049 42.978643 43.076179 42.978642 11.237159 0 21.985433-4.337361 30.066506-12.319693z m297.401804 115.430144c-11.632122-9.959553-31.83902-7.493447-41.896109 4.138675-35.287715 39.134985-71.957798 55.795651-122.923591 55.795651-53.232009 0-85.362434-14.589522-122.724905-55.59817-10.352107-12.021063-30.461468-14.388429-42.09359-4.434897-12.812192 11.038474-14.783391 29.867821-4.237415 42.192331 50.075923 56.482019 97.395539 78.462635 169.05591 78.462635 69.497713 0 123.219812-24.939221 169.155856-78.561376 10.255774-11.830807 8.279759-31.055116-4.336156-41.994849z m0 0'/%3E%3C/svg%3E
        </div>
      </div>

      <div class="pright">
        <div class="h1">转义CSS压缩代码</div>
        <div class="h2">
          data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M822.89 211.07c-39.04-39.72-85.27-71.27-137.22-93.65-54.22-23.36-112.97-36.08-174.88-37.75-117.89 0-227.81 45.94-309.52 129.33-39.13 39.92-69.79 86.26-91.18 137.81C88.20 399.54 77.07 455.24 77.07 512.22c0 94.63 30.46 184.83 87.93 260.83l69.20 73.05c38.05 31.54 80.73 56.19 126.97 73.14 47.91 17.65 98.18 26.52 149.63 26.52 51.75 0 102.32-9.07 150.43-26.81 46.43-17.15 89.31-42.09 127.46-73.93l69.10-73.34c56.78-75.81 86.84-165.50 86.84-259.45 0-114.25-43.27-221.21-121.74-301.15z m-65.46 548.87c-65.95 65.85-153.48 102.13-246.64 102.13-93.15 0-180.79-36.28-246.63-102.13-65.85-65.85-102.12-153.48-102.12-246.63 0-93.15 36.28-180.69 102.12-246.64 65.85-65.85 153.48-102.12 246.63-102.12 47.12 0 92.76 9.27 135.74 27.40 41.60 17.54 78.86 42.68 110.90 74.72 65.85 65.95 102.12 153.48 102.12 246.64-0.00 93.15-36.28 180.79-102.12 246.63z' fill=''/%3E%3Cpath d='M673.55 350.17c-23.76 0-42.98 19.32-42.98 42.98v61.02c0 23.76 19.32 42.98 42.98 42.98 23.76 0 42.98-19.32 42.98-42.98v-61.02c0-23.66-19.32-42.98-42.98-42.98zM378.21 484.82c8.28-8.18 12.92-19.03 12.92-30.66v-61.02c0-23.66-19.32-42.98-42.98-42.98-23.75 0-43.08 19.32-43.08 42.98v61.02c0 23.66 19.32 42.98 43.08 42.98 11.24 0 21.99-4.34 30.07-12.32z m297.40 115.43c-11.63-9.96-31.84-7.49-41.90 4.14-35.29 39.13-71.96 55.80-122.92 55.80-53.23 0-85.36-14.59-122.72-55.60-10.35-12.02-30.46-14.39-42.09-4.43-12.81 11.04-14.78 29.87-4.24 42.19 50.08 56.48 97.40 78.46 169.06 78.46 69.50 0 123.22-24.94 169.16-78.56 10.26-11.83 8.28-31.06-4.34-41.99z m0 0' fill=''/%3E%3C/svg%3E
        </div><br>
        <div class="pernum">压缩后代码量: <span>-35.16%</span></div>
      </div>
    </div>
  </div>

  <!---------------------------->

  <div id="tab_use" class="tabdiv">
    <div class="part">
      <div class="h0">开始转换：</div>
      <p><label><input type="checkbox" id="cutdown" checked="checked" /> 是否压缩</label></p><br>

      <p>
        <input class="xinput" type="text" name="colorstr" id="colorstr" placeholder="填充颜色" readonly="readonly" />
        <input id="colorbox" value="" />
      </p><br>
      <script>
        var color = new Color("#colorbox", {
          color: "",             //初始颜色
          element: "#colorstr",  //作用元素
          showAlpha: false,
        });
        color.initView();
      </script>

      <textarea class="xtext" id="code" placeholder="svg源代码或css代码"></textarea>
      <button class="xbutton" type="button" onclick="svg2css_code();tfoucs();">转换</button>
    </div>

    <div class="part">
      <div class="svg"></div><br>
      <div class="pernum pernum2" style="display:none;"></div><br>

      <div class="aclear" style="text-align:center;">
        <div class="p3">
          <div class="h1">SVG源码</div>
          <div class="h2"><textarea id="result1" class="xtext"></textarea></div>
        </div>
        <div class="p3">
          <div class="h1">Css代码</div>
          <div class="h2"><textarea id="result2" class="xtext"></textarea></div>
        </div>
        <div class="p3">
          <div class="h1">Css Data</div>
          <div class="h2"><textarea id="result3" class="xtext"></textarea></div>
        </div>
      </div>
    </div>
  </div>

  <br><br><br><br><br>
</div>

<script type="text/javascript">
function svg2css_code()
{
  code = $("#code").val();
  if(code!=""){
    if($("#cutdown").prop("checked")===true){
      cutdown = true;
    }else{
      cutdown = false;
    }
    color = $("#colorstr").val();

    SC = new Svg2css({
      color: color,
    });
    csscode = SC.code(code,cutdown,"css");
    svgcode = SC.code(code,cutdown,"svg");
    if(cutdown===true){
      pernum = SC.pernum(code);
      $(".pernum2").html("压缩后代码量: <span>-"+pernum+"</span>").show();
    }else{
      $(".pernum2").html("").hide();
    }
    if(csscode){
      $(".svg").css({"background-image":'url("'+csscode+'")'})
      $("#result1").val(svgcode);
      $("#result2").val('.svg {background-image:url("'+csscode+'");}');
      $("#result3").val(csscode);
    }else{
      alert("源码不合法");
    }
  }
}

function tfoucs()
{
  document.getElementById("result1").focus();
}
</script>

</body>
</html>