(欢快的音乐) 欢迎回到KnowledgeCity分数 在层叠样式表上。 我是您老师的Cliff Brozo 今天的课 我们将研究格式化可缩放矢量图形。 让我们看看我们要做什么。 我们要探索的第一件事 CSS自身战斗时会发生什么。 我们将看看我们的CSS如何 格式化不同的对象并进行战斗 因为名字都一样。 那我们来看一下 并探索可扩展的矢量图形。 我们将探索视图框是什么 以及如何让我们研究这张图片 我们正在创建。 我们不仅看一个圆圈 但是一些多边形，矩形和路径 然后我们将嵌入我们的CSS 直接转换为可缩放的矢量图形文件。 当我们创建KnowledgeCity旋转圈时， 我们创建了可缩放的矢量图形图像， 然后我们通过设置字体大小和字体来对其进行格式化， 权重，将文本变成大写， 放一些字母间距 保持字母比平常多一点 并用颜色填充这些字母。 一切都在SVG文件中。 CSS文件的工作方式相同 而我们正在努力实现 在不同对象上使用相同的格式。 我们最后想到的是 当一个改变时，另一个也改变了。 所以我们需要把CSS 在屏幕的左侧， 进入SVG文件。 这使它与CSS文件中的内容分开。 我们要做的一件事 可能会很有趣。 首先，我们必须了解 在屏幕的左下角 矢量图形将给我们 清晰的清晰图像，无论我们做多大。 与栅格图形不同，其他文件类型 随着我们使它们变大，它们会变形。 可缩放矢量图形 允许三种类型的图形对象， 形状，例如路径和轮廓， 那就是直线和曲线 一些位图图像和文本。 现在，幸运的是所有主要的网络浏览器 具有可扩展的矢量图形支持。 所以我们这里状况很好。 我决定做一些有趣的事情， 是产生三种常见的道路标志。 停车标志，单向标志和巷道出口标志。 让我们来看看。 停车标志真的是一个多边形 多边形有多个点 这些点被定义为起始位置， 多远和多远。 然后从这一点开始，我们绕着停车标志走动。 举例来说，55是左上方的50像素 从顶部向下五个像素。 从那时起，我们移至100，5 那是100像素，顶部是5像素。 然后我们从上方移至125，从上方移至30， 125以上，顶部80， 100以上，顶部105 50以上，顶部105 25以上，顶部80， 25以上，顶部30 这将完成我们的多边形。 所以如果我有一个八面的物体， 我要做的就是找出要点 所有八个标志。 现在，这里有两个多边形的原因 是因为其中之一会变成红色 另一个将是白色。 红色的是第一个 我已经宣布为polyA 在我的CSS中，我定义了polyA为红色。 多边形B是白色边框 在红色多边形内 笔触为白色，笔触为红色。 笔画是实际的线条。 所以当我画这个的时候 您会注意到开始部分 50、5实际上是52、10 所以这一点就在这里 只是向左一点一点 和向下五个像素。 每个数字都只是一点点 还有一点点下降。 让我们看看其他迹象。 一种方式是将矩形和多边形组合在一起。 我给了弯曲边缘的单向标志的黑色部分 那是矩形。 这里的rx系数类似于边界半径。 所以25像素是我的边界半径 这就是为什么我得到一个圆角。 但是画我的白色箭头确实是一个多边形。 在这种情况下，多边形C是我的白色箭头， 充满白色 多边形C位于第七行 我从25下降到175开始 一路下跌到305，下降了25。 305倒5倒。 所以我从头到尾一直画一条线 然后是360和45的斜线。 另一条斜线305、85 然后回去305、70 回到175和70。 这就是绘制多边形的方式。 文字适合适当的位置， 我用白色填充文本 但是我给它的坐标是38和70 这是要开始的地方 我给它的字体大小是36 最有趣的是创建一个道路标志。 现在我要离开一秒钟 并请您考虑哪一个是真实的 哪一个是使用CSS和SVG创建的。 好吧，它们看起来一样。 他们肯定看起来一样。 一个比另一个更清晰 如果您猜到原来的莫里斯敦(Morristown Mahwah)标志 在新泽西州的287号， 是左边的那个，你是对的。 右边的一个是使用CSS创建的。 现在，也许需要多加注意和适当的字体 我本来可以完全复制它 但我没有巷道字体 美国州际公路系统使用的 所以我尝试使字体尽可能接近。 如果仔细看，您会发现莫里斯敦的山楂 与我的版本中的山楂略有不同。 287号州际公路本来非常困难 可缩放的矢量图形来创建 因为那是奇怪的形状。 它不是矩形，也不是圆形。 我将不得不创造一条道路 或为我绘制此符号的椭圆形。 幸运的是，它可以作为完整的SVG文件在网络上使用 他们只需要将其导入我的文档即可。
