<!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 onmouseenter="tabs(this)" data-divid="tab_upnote">更新日志</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;"><svg t="1567081803624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="200" height="200"><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></textarea>
<span class="howtoget">如何获取能在网页上直接显示的svg源代码? 1.打开网址 <a href="https://www.iconfont.cn/" target="_blank">www.iconfont.cn</a> 2.上传svg文件 3.下载图标 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.826
svg转css，css转svg，svg与css互相转换并压缩
版权申诉
164 浏览量
2023-05-23
08:25:01
上传
评论
收藏 40KB ZIP 举报
svg2css-master.zip （11个子文件） 
svg2css-master js 
svg2css.min.js 4KB svg2css.js 6KB LICENSE 16KB plug spectrum spectrum.js 78KB spectrum.css 13KB spectrum_docs.js 4KB css layout.css 2KB svg2css.css 2KB
index.html 15KB .gitignore 10B tobase64.html 2KB资源评论
