SVG
关注
分享
扫一扫
文章平均质量分 51
SVG 常用技术文章收集
卡尔特斯
联系方式：dengzemiao
GitHub: https://github.com/dengzemiao
掘金：https://juejin.im/user/4450440831840909
展开
-
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选...）
GitHub 地址支持 视频、图片 上涂鸦，做标记画板功能支持 矩形、圆形、椭圆、箭头、直线、文本，支持 缩放、修改、调整字号颜色、移动位置....，画板数据支持上传保存，后续传入重新复原。...原创 2021-11-23 11:43:01 · 5781 阅读 · 24 评论 -
SVG SMIL 动画（基本动画 、变换动画）
一、简介动画标签：<animate>、<animateTransform>、<animateMotion> ...动画元素、属性定位以及动画参数设置：attributeName、attributeTypefrom、to、dur、repeatCount、fill …calcMode …二、使用方式定位动画目标Internal Resource Identifier 定位，指定需要生效动画的标签。<animate原创 2021-11-04 09:47:25 · 403 阅读 · 0 评论 -
SVG SMIL 轨迹 Path 动画（animateMotion）
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>..原创 2021-11-03 18:54:00 · 1251 阅读 · 0 评论 -
SVG 夜晚的灯塔案例（use、mask、clipPath ...）
案例效果案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title..原创 2021-11-03 14:47:05 · 394 阅读 · 0 评论 -
SVG 命名空间（xmlns、xmlns:xlink、xmlns:svg）
本文来自 SVG Namespaces Docs，有疑问请看原版，原版中英混搭。一、简介作为 XML 的一个方言，SVG 需要在一个命名空间内（is namespaced）。理解命名空间的概念，以及在你打算编辑SVG内容时，命名空间如何使用，是很重要的。SVG查看器的版本早于Firefox 1.5的发布的，都几乎没有注意命名空间的问题， but they are essential to multi-XML dialect supporting user agen原创 2021-11-03 11:57:38 · 8167 阅读 · 0 评论 -
SVG 视野概念（二）
SVG 视窗、世界、视野的概念width、height - 控制视窗（控件大小）SVG 代码 - 定义世界（显示内容）viewBox、preserveAspectRatio - 控制视野（在控件大小内的可视区域）<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet..原创 2021-11-02 15:52:34 · 206 阅读 · 0 评论 -
SVG 超链接 ＜a＞
特性：可以添加到任意的图形上xlink:href：指定连接地址xlink:title：指定连接提示target：指定打开目标案例<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" width="20" height="20" pa..原创 2021-11-02 15:18:23 · 1603 阅读 · 0 评论 -
SVG 文本（二）路径文本 ＜textPath＞
x、text-anchor、startOffset 属性：确定排列其实位置。修改 y 无效果。dx、dy 属性：切线和法线方向的偏移。textPath 渲染原理案例<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" wid..原创 2021-11-02 15:10:06 · 836 阅读 · 0 评论 -
SVG 文本（一）text、tspan 的基本使用
SVG 通过 <text> 与 <tspan> 创建文本，支持 <a> 插入超链接，可以通过 <textPath> 让文本在指定的路径上排列。<text> 与 <tspan> 基本属性：x、y：定位标准dx、dy：字形偏移style：设置样式正常案例<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> ..原创 2021-11-02 14:17:49 · 3387 阅读 · 0 评论 -
SVG JS 动态赋值
通过 text 标签进行测试<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path fill="none" ..原创 2021-11-02 14:16:26 · 849 阅读 · 0 评论 -
SVG Path（四）贝塞尔曲线命令
贝塞尔曲线示例，分别为 1、2、3、4 次贝塞尔曲线。二次贝塞尔曲线:三次贝塞尔曲线：M x0 y0 C x1 y1 x2 y2 x y(x0, y0)：起始点(x1, y1)：起始控制点(x2, y2)：结束控制点(x, y)：结束点原创 2021-11-02 11:25:44 · 1042 阅读 · 0 评论 -
SVG Path（三）弧线命令
弧线命令A(rx, ry, xr, laf, sf, x, y) - 绘制弧线参数分析：rx - (radius-x)：弧线所在椭圆的 x 半轴长ry - (radius-y)：弧线所在椭圆的 y 半轴长xr - (xAxis-rotation)：弧线所在椭圆的长轴角度laf - (large-arc-flag)：是否选择弧长较长的那一段弧sf - (sweep-flag)：是否选择逆时针方向的那一段弧x, y：弧的终点位置案例代码<..原创 2021-11-02 10:57:16 · 694 阅读 · 0 评论 -
SVG Path（二）移动与直线命令
测试命令M(x,y)+ 移动画笔，后面如果有重复参数，会当做是 L命令处理。L(x,y)+ 绘制直线到指定位置。H(x)+ 绘制水平线到指定的 x 位置。V(y)+ 绘制竖直线到指定的 y 位置。m、l、h、v 使用相对位置绘制。案例代码<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"> <path d="M 10 10 L 100 10 V 50 H 15..原创 2021-10-29 18:59:15 · 912 阅读 · 0 评论 -
SVG Path（一）基础概念
Path 由命令及其参数组组成的字符串Path 写法：常用命令汇总命令含义M/m(x,y)+移动到当前位置L/l(x,y)+从当前位置绘制 线段 到 指定位置H/h(x)+从当前位置绘制 水平线 到 指定的 x 位置V/v(y)+从当前位置绘制 竖直线 到 指定的 y 位置Z/z闭合当前路径C/c(x1,y1,x2,y2,x,y)+从当前位置绘制 三次贝塞尔曲线 到 指定位置S/s(x2,y2,x,y)+从当前位置 ..原创 2021-10-29 17:50:57 · 1371 阅读 · 0 评论 -
SVG pattern 使用（patternUnits、patternContentUnits）
<pattern> 是 SVG 的一个图案填充标签，可以在 pattern 中定义好图案，然后通过 id 引用来对某个图形进行填充<pattern> 的 width/height 属性默认是根据所填充图形的百分比来确定的。pattern 标签另外的两个属性为 patternUnits 和 patternContentUnits。两个属性值一样，但 patternUnits 默认值为 objectBoundingBox，而 patternContentUnits 默..原创 2021-10-29 17:31:31 · 1912 阅读 · 0 评论 -
SVG 线性渐变 和 径向渐变
一、线性渐变gradientUnits 取值范围：objectBoundingBox(当前坐标系)userSpaceOnUse(世界坐标系)默认就是前者 当前坐标系，看下面案例。案例代码<svg xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="lg" x1="0" y1="0" x2="1" y2="1"> <sto原创 2021-10-29 16:57:18 · 371 阅读 · 0 评论 -
SVG VSCode 插件（语法提示补全、预览插件）
VSCode 语法插件、预览插件：SVG：包含预览跟语法提示，功能最全，但是语法提示不如 SVG Snippets。Svg Preview：效果预览，需要选中 .svg 后缀的文件，右上角才会有按钮进入预览。SVG Snippets：语法补全更全面，但是没预览，还得装个预览。推荐：SVG Snippets + Svg Preview，如果不需要预览则只需要安装前者，因为也可以使用网页预览。...原创 2021-10-29 15:02:32 · 12893 阅读 · 2 评论 -
SVG RGB 与 HSL 区别与使用
RGB 与 HSL 都是 CSS3 支持的颜色表示方式。RGBHSL：示例RGB 与 HSL 透明度SVG 中如何使用：<rect fill= "rgb(255, 0, 0)" opacity="0.5" /><rect stroke="hsla(0, 50%, 60%, 0.5)" />原创 2021-10-29 14:22:28 · 372 阅读 · 0 评论 -
SVG 坐标系统概念
一、坐标系统概述SVG 主要用到的是 笛卡尔直角坐标系原点互相垂直的两条数轴角度定义通常数学角度来看是 逆时针，Y 轴朝上，但是 SVG 的坐标系是 顺时针，Y 轴朝下。二、四个坐标系用户坐标系 (User Coordinate) - 世界的坐标系自身坐标系 (CurrentCoordinate) - 每个图形元素或分组独立与生俱来前驱坐标系 (Previous Coordinate) - 父容器的坐标系自身坐标系 与 前驱坐标系 案原创 2021-10-29 13:37:00 · 342 阅读 · 0 评论 -
SVG 图形分组（三）
一、简介通过 <g> 标签来创建分组。属性继承：分组设置的属性子元素是可以继承的。transform 属性定义坐标变换。<g> 标签可以嵌套使用。二、案例通过两个 rect 元素画了一个锤子，如果需要移动或者旋转锤子，那么需要给这两个 rect 都进行处理，这个时候就可以使用 <g> 标签分组来处理了。通过 <g> 标签进行分组，并进行旋转处理：...原创 2021-10-28 15:55:43 · 633 阅读 · 0 评论 -
SVG 入门基础（一）
一、简介svg 文档浏览器支持情况：IE 9+、Chrome 33.0+、Firefox 28.0+、Safari 7.0+。SVG 属于 矢量图，位图 放大之后就是一个一个像素点组成的，位图 放大之后会出现模糊，矢量图 不会。使用方式1、浏览器直接打开。2、在 HTML 中使用 <img> 标签引用。3、直接在 HTML 中使用 SVG 标签。4、作为 CSS 背景。二、基本图形与属性基本图形，也就是比较常用的图形<rect>：矩形原创 2021-10-28 15:32:43 · 411 阅读 · 1 评论 -
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
Svgsvg 教程文档Canvascanvas 教程文档、canvas 教程文档graffitiCanvas.jsAILabel - Demokscreenshot原创 2021-10-27 10:07:54 · 1182 阅读 · 0 评论