慕课网

精品课程走进SVG

走进SVG

最热最新

超级小达 04:29

1、位图（BMP, PNG, JPG等）基于颜色的描述
2、矢量图（SVGm AI等）基于数据的描述

查看全部

0 采集收起来源：SVG简介
2023-12-29
火华 01:22

现在很少人看到其中价值

查看全部

0 采集收起来源：本章总结
2023-08-19
fengyunzhu 03:23

svg 需要使用 document.createElementNS 创建

查看全部

0 采集收起来源：基本操作API
2023-01-15
慕沐6592840 03:23

基本操作API
--创建图形
document.createElementNS(ns, tagName)
--添加图形
element.appendChild(childrenElement)
--设置/获取属性
element.setAttribute(name, value)
element.getAttribute(name)

查看全部

0 采集收起来源：基本操作API
2022-06-25
慕沐6592840 05:46

基本图形和属性
·基本图形
<rect>矩形
<circle>圆形
<ellipse>椭圆
<line>直线
<polyline>折线
<polygon>多边形
补充：
<path>可以绘制任意图形
·基本属性
fill
stroke
stroke-width
transform

查看全部

0 采集收起来源：SVG的图形和属性
2022-06-25
李家长已阅 07:01

坐标系的关系

查看全部

0 采集收起来源：SVG-四个坐标系
2021-11-30
九州慕1372729 01:50

求path长度可参考svg库---Raphael
Raphael 是一个用 JavaScript 实现的强大的矢量图形库

查看全部

0 采集收起来源：回顾与思考
2021-11-23
九州慕1372729 00:49

path：路径，是强大的绘图工具，可以绘制任意的几何图形
10个命令，包含：
一个移动命令M/m（x,y），
一个闭合命令Z/z；
3个直线命令：L/l(x,y), H,/h,Vv(x)；
4个贝塞尔曲线命令C/c(x1,y1 x2,y2,x,y), S/s(x2,y2,x,y),Q/q(x1,y1,x,y),T/t(x,y)；
一个弧线命令A/a(rx,ry,xr,laf,sf,x,y)

查看全部

0 采集收起来源：回顾与思考
2021-11-23
九州慕1372729 07:54

渐变
gradientUnits="userSpaceOnUse",用的是世界坐标系，不是当前的坐标系，完全是橙色，0，0到1，1延续的颜色都将是最后一个颜色

径向渐变
需要多定义一个参数r，fx，fy

例子
cx，cy表示渐变开始的地方
r表示渐变的长度
fx，fy表示焦点的位置，颜色出发的位置

查看全部

0 采集收起来源：SVG-线性渐变和径向渐变
2021-11-21
九州慕1372729 11:23

平移
x、y都进行了2倍的缩放

顺序影响效果

记：如果在viewbox中➕0.5的偏移，那么下面的坐标，如果是对齐到整数的话，那坐标是比较锐利的

查看全部

0 采集收起来源：SVG-坐标变换
2021-11-12
九州慕1372729 08:47

矩形自身带了坐标系

矩形坐标系相对于它的前驱坐标系发生了变化

----------------------------------------------------

世界坐标系是0A,
元素B它的前驱坐标系是0A,因为A是B的容器
C\D它的前驱坐标系是OB，C\D的容器是ob
ob是分组b的自身坐标系

参考坐标系：观察图像某一个情况

查看全部

0 采集收起来源：SVG-四个坐标系
2021-11-11
九州慕1372729 02:20

svg的坐标系中y的方向是与数学中的坐标系相反的方向，角度是顺时针的方向为正方向，旋转的方向是从x轴的正方向向y轴的正方向为正

查看全部

0 采集收起来源：SVG-坐标系统概述
2021-11-11
九州慕1372729 12:18

视野视窗世界傻傻搞不清楚

查看全部

0 采集收起来源：SVG-视野的概念
2021-11-08
九州慕1372729 01:06

建立灵活可拓展的代码
如：图形及对应默认属性这种形式，自己建立一个规则，需要加新图形时候就在后面➕一行，不需要重新建立函数，考虑用公共的方法，而不是每一个都建立函数

基本操作的api必须牢记

查看全部

0 采集收起来源：本章总结
2021-11-08
九州慕1372729 03:23

基本参数

查看全部

0 采集收起来源：基本操作API
2021-11-08
猫饭灬 03:22

命令汇总

查看全部

0 采集收起来源：Path概述
2021-08-13
ohe 08:52

居中

查看全部

0 采集收起来源：SVG-路径文本
2021-05-05
抢了光头强的枪

document.createElementNS(ns,tagName)创建图形 element.appendChild(childElement)添加图形 element.setAttribute(name,value)设置属性 element.getAtribute（name）获取属性

查看全部

0 采集收起来源：本章总结
2020-08-13
慕无忌6100076

<text><tspan> 两个基本文本标签

查看全部

0 采集收起来源：SVG-<text>、<tspan> 以及其属性
2020-08-06
慕沐0262595 00:11

考试，怎样做的像你刚才那种慕课网页的拖拉效果，外框变小，整体图形文字变小？

查看全部

0 采集收起来源：Path概述
2020-08-02
慕函数4503562

图形分组：<g>

查看全部

0 采集收起来源：SVG-分组的概念
2020-07-08
_劲 01:17

动画原理。

查看全部

0 采集收起来源：SVG-动画原理
2020-03-28
_劲 09:42

在路径文本中
text-anchor --控制文字的对齐方式作用text标签
startOffset --控制文字在path对齐的位置，作用于textspan标签

查看全部

0 采集收起来源：SVG-路径文本
2020-03-28