SVG 小册子

SVG元素可以像其他HTML元素一样在JavaScript中操作。在这个例子中，我们使用了一段简短的代码来显示时钟上的实际时间。我们在JavaScript中使用 getElementById 访问时针

在许多情况下，内联SVG在HTML中感觉像是一些噪声。如果我们添加一个图标，那么图标本身感觉更像是样式，而不是DOM结构的一部分。好消息是，我们可以将SVG图像完全转移到CSS中。 例如，在HTML中

为了继续我们的森林例子，我们可以添加一个类似的动画下雪效果。 我们使用简单的雪花扩展了之前的森林示例，并使用各种CSS类将一堆雪花添加到场景中，设置速度和外观的一些变化。然后，我们在CSS中添加动画，

我们可以使用CSS设置更传统的动画。在这里，我们使用关键帧 transform 属性设置动画。我们可以在鼠标悬停时触发此效果。 在这里，我们重复使用前面的铃铛示例，然后在整个铃铛本身和铃舌上的 hov

路径的另一个有趣用法是创建动画路径。这种方法不仅仅适用于SVG。我们在这里使用的是 offset-path CSS属性，它也适用于任何其他HTML元素。如果检查这个属性的值，就会发现定义路径的方式与S

绘制形状并不是路径的唯一用例。我们也可以使用它们绘制一个圆形的路径的文本。我们可以定义一个路径，并在 textPath 元素中使用它来使文本围绕圆圈。

作为终极绘画挑战，让我们画一只熊。 我们从耳朵开始。这两个圆都设置了 fill 和 stroke 属性。我们还在SVG元素上定义了一个类来设置背景颜色。注意，这里我们设置了常规的 background

在我们学习了二次贝塞尔曲线和三次贝塞尔曲线之后，让我们做另一个练习，在这里我们使用两者共同绘制。 我们从丝带的右侧开始，用二次贝塞尔曲线。 然后我们继续用三次贝塞尔曲线。 最后再做一个贝塞尔曲线，

如果你认为立方Béziers是SVG中最复杂的部分，那么我有一个坏消息要告诉你，弧线要复杂得多。不过好消息是，它们很少被使用。 SVG弧的不同参数 弧有7个参数。 最后两个参数（ 40, 40 ）是弧

让我们再举一个三次和二次贝塞尔的例子。 这个钟的底部是用直线定义的。 然后一个二次贝塞尔绘制钟斗篷。 然后用一个三次贝塞尔曲线继续绘制这条线，形成钟的顶部。 然后，我们到达底部的另一个二次贝塞尔

当我们想要弯曲一条线时，二次贝塞尔曲线是很好的，但通常它不够灵活。使用三次贝塞尔曲线，我们不仅有一个控制点，而是两个。第一个控制点设置曲线的初始方向，第二个控制点定义曲线从哪个方向到达端点。 同样，让

当我们开始使用曲线时，路径元素变得非常强大。我们不仅要设置端点，还要设置控制点。 控制点是一个看不见的坐标，线弯曲到它，但不接触它。看看这张快乐的脸！这里，不可见的控制点位于图像底部的中间（在 0,1

形状的填充可以定义为渐变。今天添加一个3D效果到我们的雪人。 升级圣诞装饰品 让我们升级我们在第一天创建的圣诞装饰品。 我们可以添加一个3D效果，通过填充渐变的主圆。在这里，我们在 defs 节中定

这个装饰品和我们第一天画的一样，只是它的侧面有一个被定义为折线的图案。默认情况下，多段线与圆形的边不匹配。如果不剪裁此图案，其外观将如下所示： 我们在这里使用剪辑路径，以确保装饰图案完全适合装饰品。c

旋转并不是我们从简单形状生成图像的唯一方法。在这个例子中，我们定义了一个树的形状，然后将其放置在不同的位置，以不同的大小来绘制森林。 首先，我们创建一个矩形和圆形的背景。 然后我们定义一个树的形状:

如何使用SVG绘制太阳图标 让我们画一个简单的太阳图标。我们从一个圆开始画太阳的核心，我们画一条线来画太阳光线。 现在，一旦我们有了一条射线，我们就可以复用同一条线元素来绘制其他射线。我们可以给予这

如何使用SVG绘制星星 星星是一个简单的形状。我们可以将其定义为一组多边形，并单独设置每个点。但是我们需要知道每个坐标。相反，我们可以只定义一个手臂，然后重复五次旋转以获得相同的形状。我们将使用 tr

一旦我们介绍了基本的形状，现在是时候进入 path 元素了。路径是最强大的SVG元素。我们可以用路径定义几乎任何东西，如果你打开任何SVG文件，你主要看到的是路径。 路径的形状由 d 属性定义。这里我

在这个例子中，我们结合了到目前为止学到的所有知识。我们在这里使用圆形、矩形、直线、折线和多边形。 我们从房屋正面开始。注意，我们不仅在wall元素上有一个类，而且在SVG上也有一个类。 然后我们在上

将样式属性移动到CSS 由于我们的SVG现在位于HTML文件中，我们可以为每个元素分配CSS类并将一些属性移动到CSS中。我们只能移动表示属性。位置属性和定义形状的属性必须保留在HTML中。但是颜色、