最前端

我的工作,我的生活,点点滴滴...

svg图标

  1. 创建svg symbol代码,可放在页面内,亦可放在一个单独文件,如svgdefs.svg:

    <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
    	<title>home</title>
    	<path class="path1" d="M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
    <symbol id="icon-edit" viewBox="0 0 1024 1024">
    	<title>edit</title>
    	<path class="path1" d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"></path>
    </symbol>
    <symbol id="icon-tag" viewBox="0 0 1024 1024">
    	<title>tag</title>
    	<path class="path1" d="M976 0h-384c-26.4 0-63.274 15.274-81.942 33.942l-476.116 476.116c-18.668 18.668-18.668 49.214 0 67.882l412.118 412.118c18.668 18.668 49.214 18.668 67.882 0l476.118-476.118c18.666-18.666 33.94-55.54 33.94-81.94v-384c0-26.4-21.6-48-48-48zM736 384c-53.020 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z"></path>
    </symbol>
    </defs>
    </svg>
  2. 页面上可如下引用,如:

    <!-- 内嵌在html页面时,href直接填写#id即可 -->
    <svg class="icon icon-tag"><use xlink:href="#icon-tag"></use></svg>
    <!-- 从单独文件外引时,href需要加上文件路径 -->
    <svg class="icon icon-tag"><use xlink:href="img/ico/svgdefs.svg#icon-tag"></use></svg>
  3. 可以svg标签上的class添加样式,如:

    .icon {
    	display: inline-block;
    	width: 1em;
    	height: 1em;
    	fill: currentColor;
    	font-size: 14px;
    	color: #828282;
    }
  4. 注意ie8及以下是不兼容的,无法显示.

参考链接

web前端工具

测试阶段,欢迎反馈意见及建议。

web前端工具,目前包括的功能有:脚本注入(JS Inject), JSON格式化(JSON Format)目前使用扩展jsonview的代码, 外引CSS重载(CSS Reload), 功能禁用(Disable), 页面检查(Check), HTML元素检查(HTML Inspect), 二维码生成(QR Code),和 映射(Auto Response)等。

  1. 脚本注入(JS Inject)

    可在页面注入远程脚本。

    inject

  2. JSON格式化(JSON Format)

    JSON数据格式化,亦可在页面加载时格式化页面的JSON数据。

    format

  3. 外引CSS重载(CSS Reload)

    可使用F9快捷键或点击按钮重新加载外引的CSS样式文件。

    reload

  4. 功能禁用(Disable)

    可禁用浏览器的javascript,cookie,弹出页面,flash等功能。

    disable

  5. 页面检查(Check)

    可检查链接的有效性及是否有id重复等。

    check

  6. HTML元素检查(HTML Inspect)

    可自定义检查元素的各种属性,避免在Styles选项卡中滚动查找。

    inspect1

    inspect2

  7. 二维码生成(QR Code)

    可为每个页面生成对应的二维码,如避免在手机上面输入链接地址查看页面。

    qrcode

  8. 映射(Auto Response)

    可把任何请求映射到另外一个文件上,甚至本地文件(需要在chrome://extensions/页上启用“允许访问文件网址”的选项)。

    response

视网膜1物理像素边框生成器

Border Image:

Normal 1px Border:

Retina Hairline:

CSS Code: