Svg 前端实践总结

本文是学习和使用svg的一些总结，不介绍svg作图的方法。

svg标签元素参考： MDN - svg

结构化标签也可参考： SVG中的结构化、分组和引用元素

svg的icon方案，参考： 腾讯干货！超实用的高清图标SVG解决方案全总结（下）

svg与普通html元素不同，需要指定命名空间，所以使用 createElement() 、 appendChilde() 抑或JQ的 append() 方法添加到dom上的svg元素是无法正常显示的。需要用到 createElementNS(ns,'svg') ，另外有些svg标签也需要单独的命名空间，例如a标签。为了避免每次添加这么长的命名空间，使用时可以简单包装下( NS_SVG 、 NS_XLINK 分别为svg和a标签命名空间)：

SVG如果是嵌套在HTML中的话，即使用svg标签，会和其他dom元素共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象；如果使用object、embed、iframe标签来引入svg,则其中的内容会有自己document对象，此时的 *** 作需要借助 getSVGDocument() 方法：

对于object、iframe来引入的svg对象，还可以使用 contentDocumnet 属性来获取。当然，contentDocument不是专为svg设计的，同时可以获取其他内嵌xml、html对象。

*** 作的前提需要满足 同源策略(Same-origin policy) ，跨域将无法获取document对象。

平移和缩放表面看起来很简单，svg的平移缩放机制也不复杂，但是dom元素往往不固定宽度，应用场景也多变。例如有时候我们希望随浏览器响应，svg按照比例自动缩放；有时候我们希望为svg添加手动缩放功能或者手动拖拽平移功能（类似于百度地图的缩放平移机制）。

关于svg的viewBox相关知识，张鑫旭有篇文章讲的很详细： 理解SVG viewport,viewBox,preserveAspectRatio缩放 。这里谈谈在具体的应用场景中如何利用这些属性。

你是想最多只有一个展开的组对吧？

这样的话，当你触发你的点击事件展开对应分组的时候，先找到其它展开的分组，将其折叠，同时将其组名前边的减号变成加号，然后再展开你点击的分组。

    <li><span class="icon"></span><ul></ul></li>

    <li><span class="icon"></span><ul></ul></li>

    <li><span class="icon"></span><ul></ul></li>

    <li><span class="icon"></span><ul></ul></li>

</ul>

//为简化代码，使用jquery

//expand的是展开状态下的图标class

//fold的是展开状态下的图标class

<script>

    $('icon')on('click', function(){

        var el = $(this);

        if(elhasClass('expand')){

            elremoveClass('expand')addClass('fold');

            elnext()hide();//对应内容隐藏

        }else{

            $('#block > li > expand')removeClass('expand')addClass('fold');

            elremoveClass('fold')addClass('expand');

            elnext()show();//显示对应内容

        }

    });

</script>

大致就是这个思路，细节可能需要对应需求调整。

做前端设计、网页设计的，素材永远很重要。因为素材的美观程度往往直接决定了网页页面的风格、整洁度、色调等等。

我大学时候，在一家非常小型的创业公司实习。公司人员只有几个，所以在那时我基本上算是独立开发了一个旅游酒店订购平台，前端设计、后端开发、公众号开发等等都涉及，那段时间基本是我最全能的时候了。

所以当时我也收集了许多的前端素材，在这里一并分享给大家。

一、图标类

每一个Web开发者，尤其是前端开发人员一定都会需要icon图标来为项目增色。

FontAwesomeIcons

FontAwesome提供可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

IconMonster

特点：免费，高质量,。非常简洁的icon图标库。

IconFinder

这是一个比较有设计感的Icon图库，并且已经打包分类好，缺点是只有部分是免费的。个人觉得里面免费的图库也已经够用了。

附上圣诞特辑！

Iconfont-Alibaba

阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。这个相信大家都用过！

二、素材

无版权限制的素材

PEXELS

Pexels可以说是素材界的超级网红了，说到肯定哪里都有它，我自己都推荐好几次了。可以免费下载各种各样的分辨率，包括原图尺寸。

例如搜索：圣诞节（Christamas）

PNGimg

这个主要用作素材，是不同种类的无背景素材！直接可以免费用。注意它是全部都是无背景，非常适合那些需要PNG透明底配图的。

例如搜索：Birds

KaboomPics

KaboomPics是以生活化免费高质量素材为主的素材库。里面的都是摄影爱好者摄影后通过审核上传的。并且可以应用于任何项目，没有版权限制。

自媒体可以从中找封面图，摄影爱好者也可以从中欣赏或着学习。

Unsplash

先这样~希望这些资源对你有帮助，下次还会更新一些web开发的常用工具。

如果有帮助，欢迎关注我以示支持，也以防错过下一波干货！~

您好，我来为您解答：

需要在/img/路径下有glyphicons-halflingspng与glyphicons-halflings-whitepng这两个文件

希望我的回答对你有帮助。

您可以使用avue-crud组件的“表格属性配置”功能来实现这个需求。

在表格属性配置中，找到“搜索”选项，并将“姓名”字段的“搜索”属性设置为false。这样，姓名字段的搜索框就会默认隐藏。

在表格属性配置中，找到“按钮”选项，并新建一个按钮。按钮的名称可以设置为“展开”，事件处理函数可以设置为：

handleExpand() {

// 获取搜索项

const searchForm = this$refscrudsearchForm

// 展开/隐藏姓名搜索框

searchFormnameshow = !searchFormnameshow

}

这样，点击“展开”按钮时，就会展开/隐藏姓名搜索框。

在表格属性配置中，找到“布局”选项，并设置如下属性：

search: [

[

{

name: 'name',

col: 24,

type: 'input',

visible: false

}

]

],

button: [

[

{

type: 'expand',

icon: 'el-icon-search',

size: 'small',

event: 'handleExpand',

plain: true

}

]

]

这样，姓名搜索框就会显示在第二行第一列，“展开”按钮就会显示在第一行最后一列。

@京东设计中心 ：很多设计师跟开发都会遇到SVG 图标模糊的问题，今天我们简单教你四招，轻松搞定这个问题，有需要的同学赶紧来收 >>> 简单介绍 随着高清视网膜屏的出现，网页设计也需要考虑各种高清屏幕的显示效果，前端在写代码的时候也需要根据屏幕的不同，输出不同分辨率的icon，真的好多工作量啊~ 为了解决屏幕分辨率对图标影响的问题，SVG格式的icon出现了，简单的说它是通过矢量路径把icon变为字体，这样前端在改变icon大小和颜色的时候， *** 作起来就简单高效多啦~ 被困扰的小问题 先说明一下~我是一位GUI设计师，在设计网页的时候，开发童鞋就使用了SVG格式的icon~细心的我发现这个格式的icon最后呈现出来的效果，边缘会模糊。。。 这可能是一部分开发和视觉设计师都遇到的问题哦~用来说明一下! 对比后，效果相差还是很明显的，甚至图标还会变形呢!这对有强迫症的人来说真的是一件超级虐心的事情呢~ 解决办法 SVG格式是从AI导出的，所以无论视觉是在PS里面制作还是AI里面制作，都要将icon在AI中形成路径~ 问题出在哪里呢 我们都知道AI是矢量工具，无论你画什么路径都不会出现像素那样的锯齿，所以在用AI制作像素icon的时候，一定要重新设置首选项，并用网格进行辅助。 STEP 1：单位一定是像素，否则会影响其他选项的单位设置 STEP 2：键盘增量调整为01像素，方便调整icon位置 STEP 3：网格线间隔设置为1px，次分隔线设置为10意思是最小的网格单位是01px，如果你的icon边缘没有贴在1、2、3…这样的整数网格上而是在次分隔线上，就会模糊变形! STEP 4：从“视图”选项中选择“显示网格”。 还要啰嗦几句…… 最后检查的时候画面一定要放大到最大哦~ 简单的小分享，希望可以帮到童鞋们~谢谢啦。

以上就是关于Svg 前端实践总结全部的内容，包括:Svg 前端实践总结、jquery使加减号图标切换。前端开发新手求指教！不胜感激~、Web开发、前端设计有哪些优质资源等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！