2017年12月_W3cplus_

原创 SVG之旅：路径

通过上一节的学习，我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过、、、、、来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外，在SVG中还有一个元素，可以帮助我们在SVG中绘制任何你想要的形状。也有人说，掌握了SVG中的是学习SVG的重中之重。今天我们来了解SVG中有关于的相关知识。这篇文章将会介绍有关于的相关知识，但我们不会只用一篇文章的篇幅来介绍，后续将会收集和整理

2017-12-25 00:00:00 506 1

原创 SVG之旅：基本形状

在未学习SVG之前，在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状，也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中，提供了更为强大的图形形状的能力，可以直接通过SVG来绘制矩形、圆角矩形、圆形、多边形和曲线等。如果对Illustrator或者Sketch

2017-12-21 00:00:00 365

原创 SVG之旅：SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。S

2017-12-15 00:00:00 8168

原创 SVG之旅：SVG简介

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。为了能记录SVG的学习和探索过程，整个学习的路径以及笔记将会在W3cpl

2017-12-14 00:00:00 730

原创 Hexi Flexi Grid Layout

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近@vmcreative的Hexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Gri

2017-12-13 00:00:00 415

原创编写 SVG 的指南

简介Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径，图片和（或）文本组成，并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG，它是指在HTML中编写的嵌入式代码，以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点，包括为了交互目的访问所有图形的各个部分，支持访问 SVG 文档构成的 DOM 节点树，查询、修改 DOM 节

2017-12-12 00:00:00 1239

原创使用Firefox 网格检查器调试 CSS网格布局

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置

2017-12-05 00:00:00 656

W3cplus