认识 色彩矩阵采用矩阵乘法来对图案从新进行色彩计算，它可以重新计算 R、G、B、A 四个值的比重。 比如说你不想去掉蓝光，又或者希望得到一张黑白图，又或者改变明暗度等等，都可以使用色彩矩阵来实现。 <fecolormatrix…
：2021-08-18：专栏 svg ：svg 滤镜 色彩矩阵 feColorMatrix color matrix
概述 svg 使用 xml 语言编写，早版本的 svg 文件需要编写 DTD，类似： svg 后续版本并没有这种说明，因为这样的代码无法正常嵌入到其他 xml 文档中，xml 有很多种，不同 xml 文件可能会复用同一元素名导致解析出错，比如 xhtml 和 svg…
：2021-08-11：专栏 svg ：svg 格式 xml 引入方式 坐标 viewBox 内嵌
剪裁 svg 中的剪裁更像是过滤的效果，筛选出需要的部分，把不需要的部分移除。 剪裁之前，需要定义一个剪裁区域，在 <defs> 元素中使用 <clipPath> 元素描述。<clipPath> 元素也需要有一个 id，方便其他元素引用。在 <clipPath…
：2021-08-11：专栏 svg ：svg 剪裁 clipPath 遮罩 mask 透明度
参考 图像 类似于 HTML 中 的 <img> 元素，svg 中可以使用 <image> 元素插入图片，支持 PNG、JPG 和 SVG 等类型的图片。 嵌入的图片被定义为一个普通的 svg 元素，所以你可以对其进行剪裁、遮罩、变形等。 <image/> 元素和 <rect…
：2021-08-11：专栏 svg ：svg 图片 图像 图形 资源嵌入 image
<g>、<use /> 元素 使用 <g> 元素可以把属性赋给一组 svg 元素，比如： 此时圆形和矩形区域都会填充红色。 但是它的功能远不止于此，它同时还是用来组合对象的容器，你可以把一些组合放到 <g> 元素中，然后给 <g> 元素一个 id 属性，之后可以使用 <use…
：2021-08-11：专栏 svg ：svg g use transform
简介 svg 中的滤镜功能十分丰富，它以多种方式修改原图案，已达到不同的效果，例如毛玻璃特效、高斯模糊、泛色、光照等等。 svg 中的滤镜使用 <filter> 元素定义，不同的滤镜使用不同内部元素，svg 提供以下滤镜： <feBlend…
：2021-08-11：专栏 svg ：svg 滤镜 filter 位置 尺寸 filterunits
简介 Patterns （图案）是 svg 对基础零件的一种组合方式，它可让使用者预先设计一些图形的组合排列，然后在后续根据不同环境多次使用。 图案使用 <pattern> 元素描述，它同样需要一个 id，以方便后续元素对其进行引用，除此之外，它还有以下属性： width…
：2021-08-10：专栏 svg ：svg pattern objectBoundingBox patternUnits userSpaceOnUse patternContentUnits
线性渐变 线性渐变的描述使用 <linearGradient> 节点，类似这样： 效果如下： 线性渐变的中间节点使用 <stop> 元素描述，它有三个常用属性： offset：用来描述渐变的位置的百分比，可以使用小数。这个属性不能使用 css 编写。 stop-color…
：2021-08-10：专栏 svg ：svg linearGradient radialGradient stop 线性渐变 径向渐变 末端处理 渐变单元
svg 中有两种文本模式，一种是写在图像中的文本，另一种是 svg 字体。本节只探讨前者。 文本 在 svg 中内嵌一个文本使用 <text> 元素，它的内部文本会被渲染，可以通过属性 x 和 y 来对其进行简单的定位，比如： 可以使用 text-anchor…
：2021-08-10：专栏 svg ：svg 文本 text link 超链接
基本形状 矩形 矩形 由 <rect /> 元素组成，有以下属性： x：矩形左上角的 x 位置 y：矩形左上角的 y 位置 width：矩形的宽度 height：矩形的高度 rx：圆角的 x 方位的半径（rx 和 ry 仅设置一个时，值会同时作用在 x 和 y 轴两个方向） ry…
：2021-08-08：专栏 svg ：svg 线条 line 着色 stroke 矩形 rect 圆形 circle 椭圆 ellipse 折线 polyline 直线 路径 path 贝塞尔曲线 弧形 填充 边框 色值 不透明度 描边 填充规则 css