html直接显示%3c%=%%3e,index.html

SVG 转义 CSS 代码

function subcheck(o)

{

if(!o.code.value){

return false;

}

}

演示:
SVG标签
源代码

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

如何获取能在网页上直接显示的svg源代码?   1.打开网址 www.iconfont.cn   2.上传svg文件   3.下载图标   4.复制SVG

转义CSS代码

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

转义CSS压缩代码

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

压缩后代码量: -35.16%

开始转换:

是否压缩

var color = new Color("#colorbox",{

color: "", //初始颜色

element: "#colorstr", //作用元素

showAlpha: false,

});

color.initView();

转换

SVG源码
Css代码
Css Data

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("压缩后代码量: -"+pernum+"").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();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值