| 《SVG 精髓》(上) | 您所在的位置：网站首页 › menu标签属性 › 《SVG 精髓》(上) |
《SVG 精髓》(上)
|
栅格及矢量我是一只猫集成 HTML视口线段矩形圆和椭圆多边形填充边线交叉的多边形折线线帽和连接线基本形状总结形状元素笔画特性填充特性文档结构文档表现内联样式内部样式表外部样式表表现属性分组引用对象坐标系统变换translatescale变换序列变换总结 https://github.com/oreillymedia/svg-essentials-examples 栅格及矢量 栅格 矢量 本质 描述哪个方格应该填充什么颜色。 描述要绘制从某个点到另一个点的直线或曲线。 特点 不关心内容是什么。 是XML程序，信息被存储为纯文本，所以具有开放性、可移植性及可交互性。所有的文本都是可搜索的，可缩放而不损失图像质量。 适用场景 适合存储照片。 适合CAD等需要精确测量和放大绘图以便查看细节的程序。 我是一只猫
将SVG作为CSS背景
- 默认按固有尺寸，且在垂直及水平方向上repeat，以填满元素- 如果没有固有尺寸，SVG缩放为元素高度和宽度的100%
div.background-cat { background-image: url(‘cat.svg’); background-size: 100% 100%;}
将SVG作为对象
- 可以让那些不能直接显示SVG但是有SVG插件的老版本浏览器用户也能查看图像。- 渲染同SVG x=’1em’ y=’25%’ dy=’1em’ > 这个 text 元素没有被包含，因此会被裁掉 视口 单位 描述 em 默认字体的大小，相当于文本行高 ex 字母 x 的高度 px 像素 pt 点(1/72inch) pc 12点(1/6inch) cm 厘米 mm 毫米 in 英寸默认情况下没有单位的数值都被视为像素。在 4cm * 5cm的图纸上设置一个16px/cm的坐标系，感觉是在更改分辨率 当 viewBox 的宽高比为 1:1，但视口宽高比为 1:3 时，SVG 可以做三件事： 按较小的尺寸等比例缩放图形，以使图形完全填充视口。图片将变为原始宽高的一半按较大的尺寸等比例缩放图形并裁掉超出视口的部分。图片会变成原始宽高的1.5倍拉伸和挤压视图以使其恰好填充新的视口(也就是说，完全不保留宽高比)preserveAspectRatio 允许指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是要裁剪preserveAspectRatio=”alignment[meet |slice]” alignment : 指定轴和位置
可以通过指定CSS属性 shape-rendering 的值来控制反锯齿特性。 crispEdges: 会关闭反锯齿特性，得到清晰的图像geometricPrecision：会使边缘圆滑，得到模糊的图像
stroke-dasharray: 取值是一系列数字，代表线的长度和空隙的长度。用来绘制点线或虚线 矩形fill-opacity: 取值0.0～1.0，控制填充的不透明度。 通过指定 rx、ry 可以绘制一个圆角矩形。如果只指定了一个值，则认为它们相等。rx 的最大值是矩形宽度的一半。
可用来画任意封闭图形，指定坐标时不需要在最后指定返回起始坐标，因为图形时封闭的，会自动回到起始坐标。
实现绘制不闭合的形状 stroke-linecap: butt | round | square stroke-linejoin: miter | round | bevel如果值为miter，则相交处有可能比线本身宽，可以指定 stroke-miterlimit 来设置相交处的显示宽度与线宽的比率，默认值是 4. 当为属性指定数值时，默认会以用户坐标为准。除最后两个元素外，其他元素的属性都可以在数字后加上单位，比如mm、pt等 笔画特性 属性 值 笔画颜色 stroke 默认值为none 笔画宽度 stroke-width 默认值为1 透明度 stroke-opacity 0.0～1.0，默认值1.0（完全不透明） 虚线及间隙 stroke-dasharray 默认值none，用一系列的数字来指定虚线和间隙的长度，这些数字只能使用用户坐标 线帽 stroke-linecap 线头尾的形状。值为 butt(默认) | round | square 连接线 stroke-linejoin 圆形的棱角或者一系列连线的形状。值为 miter(默认) | round | bevel 相交处比例 stroke-miterlimit 默认值为4。相交处显示宽度与线宽的最大比例 填充特性 属性 值 填充颜色 fill 默认值为 black 填充透明度 fill-opacity 0.0～1.0，默认值1.0（完全不透明） 填充区域 fill-rule 值为nonzero(默认) | evenodd。该属性决定判断某个点是否在图形内部的方法。只有当边线交叉时或者内部有“洞”时才有效。 文档结构 文档表现 内联样式直接设置style属性的值为一系列视觉属性 内部样式表通过一个内部样式表来罗列常用的样式，而无需在每个SVG元素内植入样式。这样可以为所有某一类元素应用样式，也可以使用命名类为特定元素应用样式。内部样式表被定义你在元素内。“内联样式”几乎总是比内部或外部样式表渲染更快，因为样式表和类增加了渲染时的查询和解析时间。然而样式表更容易管理，更小的文件体积和可缓存的特性可以加快文档加载速度。 ext_style.css * { fill: none; stroke: black; } rect { stroke-dasharray: 7 3; } circle.red { fill: red; } .thick { stroke-width: 5; } .semiblue { fill: blue; fill-opacity: 0.5; } 表现属性表现属性位于优先级列表的最底部。任何来自内联样式、内部样式表或者外部样式表的样式声明都会覆盖表现属性，但表现属性会覆盖继承的样式。 圆会被填充为红色，而不是绿色。 分组会将其所有子元素作为一个组合。每个组合都可以拥有自己的来供基于文本的XML应用程序识别，或者为视障用户提供更好的可访问性。组合还可以彼此嵌套。在起始标签中指定的所有样式会应用于组合内的所有子元素。 和不同的是前者的子元素永远不会显示，即也是定义供后续使用的元素。symbol 还可以指定 viewBox 和 preserveAspectRatio ，通过给 元素添加 width 和 height 就可以让 symbol 适配视口大小。 引用对象为定义在元素内的组合或者任意独立图形元素(比如只想定义一次的复杂多边形形状)提供了类似复制黏贴的能力。并不限制只能使用同一文件内的对象，xlink:href 可以指定任意有效的文件或者 URI；这使得我们可以将一组公用元素集合在一个SVG文件内。然后在其它文件中选择性地使用它们。但是由于出于安全的原因，并非所有的SVG阅读器都支持外部引用。IE完全不支持外部文件引用。 这种方式会有三个缺点： 复用 man 和 woman 组合时，需要知道原始图像中这些图形的位置，并以此位置作为复用的基础房子的填充和笔画颜色由原始图形建立，并且不能通过元素覆盖。这意味着我们不能构造一行彩色的房子文档中会画出所有的三个元素 woman、man、house。我们不能将它们单独“存储”下来，然后只绘制一排房子或者只绘制一组人。SVG 规范推荐我们将所有想要复用的对象放置在元素内，这样SVG阅读器进入流式环境中就能更高效地处理数据。由于组合在内，它们不会立刻绘制到屏幕上，而是作为“模板”供其它地方使用。 Grouped Drawing Stick-figure drawings of a house and people House with door Male Human Female Human Male and female Stick figures 坐标系统变换 translate中的x、y值相当于 transform=’translate(x-value, y-value)’看上去是这个样子的： transform=”scale(x-value, y-value)所有 x 坐标乘以给定的 x-value,所有 y 坐标乘以给定的 y-value.缩放变换永远不会改变图形对象的网络坐标或者笔画宽度，但是它会改变对应画布上的坐标系统(网格)的大小。 网格并没有被移动，坐标系统的点(0, 0)仍然在相同的位置，但是每个用户坐标都变成原来的两倍了。从网格线上可以看到，矩形的左上角在更大的新网格中仍然在(10, 10)位置，对象并没有移动。stroke-width仍然是一个用户单位，但是这个单位已经是原来的两倍了，因此其笔画变粗了。 多个变换只需通过空格或逗号分隔，依次放入 transform 属性即可，一般情况下，变换序列的顺序会影响结果。 |
SVG 有两种判断某个点是否在多边形的规则。分别对应 fill-rule 属性的 nonzero(默认)和 evenodd,选择不同的规则会有不同的效果。
实际上是这个样子的：translate 会获取整个网络，然后把它移动到画布的新位置，而不是移动正方形，就正方形而言，它仍然绘制在左上角(0,0)。你可以理解为为了让沙发远离房子的外墙，移动了整个起居室、墙壁即所有东西到新的位置。
【本文地址】