|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/svg-scalable-vector-graphics-fundamentals-for-beginners/
课程评论：没有评论
**Coursera 课程总结：SVG 入门** 本课程旨在为有兴趣探索可伸缩矢量图形（SVG）的 Web 开发者提供基础知识。如果您具备 JavaScript、CSS 和 XML 的经验，那么本课程将非常适合您。 **课程内容概览：** 1. **基本形状：** 涵盖了使用 SVG 构建图形的基本元素，包括线条 (lines)、圆形 (circles)、椭圆形 (ellipses)、矩形 (rectangles)、圆角矩形 (rounded rectangles)、多边形 (polygons) 和折线 (polylines)。同时，还将深入探讨描边 (stroke) 属性，如描边颜色 (stroke)、描边宽度 (stroke-width)、描边不透明度 (stroke-opacity)、描边虚线 (stroke-dasharray)、描边虚线偏移 (stroke-dashoffset)、描边线帽 (stroke-linecap) 和描边线角 (stroke-linejoin)。 2. **变换 (Transformation)：** 学习如何移动 (move)、旋转 (rotate)、缩放 (scale) 和倾斜 (skew) 坐标系统，以影响绘制在其上的形状。 3. **路径 (Paths)：** 介绍路径命令，包括 `moveto`、`lineto`、`closepath`，以及二次贝塞尔曲线 (quadratic Bezier curves) 的 `Q` 子命令和标记元素 (marker element)。 4. **图案与渐变 (Pattern and Gradients)：** 探讨如何创建线性渐变 (linear gradient) 和径向渐变 (radial gradient) 来实现色彩过渡，或创建填充图案 (fill pattern)。 5. **文本 (Text)：** 学习如何在绘图中添加文本，包括直线文本和路径文本。 6. **SVG 与 CSS 的结合：** 讲解如何使用内部 (internal) 和外部 (external) CSS 样式表为 SVG 元素设置样式，以及如何使用 CSS 实现基本动画和同时动画多个 CSS 属性。 7. **SVG 动画与脚本 (Animating and Scripting SVG)：** 掌握 SVG 内置的动画功能，包括动画基础、时间控制、重复动作以及沿路径的运动。 **学完本课程，您将能够：** * 了解如何将 SVG 作为静态图像使用。 * 掌握在 CSS 中使用 SVG。 * 学会将 SVG 作为 HTML 文档中的内联元素来使用。 * 能够将 SVG 作为动画或可视化的一部分，通过脚本进行控制。
In this course you will learn:1-basic shapes: you will learn how to construct drawings using the basic shapes available in SVG including lines, circles, ellipses, rectangles, rounded rectangles, polygons, polylines and stroke characteristics.We will also discuss stroke characteristics including: Stroke, stroke-width, stroke-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin.2-Transformation: you will learn how to move, rotate, scale, and skew the coordinate system to affect the shapes drawn on it.3-Paths: which include moveto, Lineto, closepath, the Q subcommand quadratic Bezier curves and the marker element.4-Pattern and Gradients we will be discussing how to create a color gradient using linear gradient and radial gradient, or a fill pattern.5-Text add text to a drawing, both in a straight line and following a path.6-Working with SVG and CSS which includes how to use internal and external CSS style sheet, basic animation using CSS and animating multiple CSS properties at one time.7-Animating and scripting SVG, you will learn how to useSVG's built-in animation capabilities by learning animation basics, time and repeated action and motion along path.This course is for you if you are a web developer who is interested in exploring Scalable Vector Graphics., and if you have experience with JavaScript, CSS, and XML.At the end of this course you will be able to:Know how to work with SVG as static images,in CSS,inline as elements in an HTML document,and as a scripted part of animations or visualizations
