SVG——新一代Web设计及互动媒体的革新
首页 支持与服务 SVG教程 SVG语法标签属性解释手册 - 四、SVG解释的属性

SVG语法标签属性解释手册 - 四、SVG解释的属性

文章首页
SVG语法标签属性解释手册
一、SVG元素模块
二、SVG解释的元素
三、SVG模块属性
四、SVG解释的属性

4.1 内核属性模块

集合名称

集合属性

id 图形图元的标识符。

4.2 图形属性模块

集合名称

集合属性

display 显示或隐藏图形图元

仅解释值“none”。

4.3 标记属性集

集合名称

集合属性

marker-start 在图元的第一个点绘制标记。
marker-mid 在图元的每个其它点(即除第一个点和最后一个点)绘制标记。
marker-end 在图元的最后一个点绘制标记。

4.4 不透明属性模块

集合名称

集合属性

opacity 定义图元的透明度。
只有能够另存为光栅图像的格式才可以管理透明度。因此,不显示透明度。
而且,即使当另存为光栅图像时,透明度也不支持嵌套。
stroke-opacity 定义图元轮廓的透明度。
只有能够另存为光栅图像的格式才可以管理透明度。因此,不显示透明度。
而且,即使当另存为光栅图像时,透明度也不支持嵌套。
fill-opacity 定义图元填充的透明度。
只有能够另存为光栅图像的格式才可以管理透明度。因此,不显示透明度。
而且,即使当另存为光栅图像时,透明度也不支持嵌套。

4.5 涂料属性模块

集合名称

集合属性

color 定义颜色。<color> 类型符合 sRGB 空间中定义的颜色的 CSS2 规格。该属性支持 [CSS2-color-types] 中定义的几种语法(有关详细信息,请访问 w3c.org Internet 站点),还支持一个关键字列表,列表中的每个关键字与一种颜色关联。

支持的数字颜色规格语法有:#rgb 或 #rrggbb 或 rgb(R, G, B) 或 rgb(R%, G%, B%)。

下面是使用不同的语法指定相同颜色的示例:

EM { color:#f00 } /* #rgb */

EM { color:#ff0000 } /* #rrggbb */

EM { color:rgb(255,0,0) } /* integer range 0 - 255 */

EM { color:rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

fill 定义填充类型。
支持“none”、“current-color”值或颜色。
不支持梯度。
fill-rule 定义填充多边形时使用的算法。
仅支持“nonzero”算法。
不支持“evenodd”算法。
stroke 定义如何绘制元素。
支持“none”、“current-color”值或颜色。
不支持阵列和梯度。
stroke-dasharray 定义为得到点线所应用的阵列。
stroke-linecap 定义绘制轮廓时在轮廓的末尾使用的造型:round, square 等。
以向量格式保存时包括此属性。但是,不支持显示和以光栅格式保存它。
stroke-linejoin 定义绘制折线的角时使用的造型:round, miter 等。
以向量格式保存时包括此属性。但是,不支持显示和以光栅格式保存它。
stroke-width 定义笔画宽度。
以向量格式保存时包括此属性。但是,使用细宽度可以描绘非常粗的笔画。

4.6 样式属性集

集合名称

集合属性

style 将所有属性编组在一起。

4.7 文本属性集

集合名称

集合属性

letter-spacing 定义每个字符之间使用的间距。
TrueType 字体显示不支持该属性,因此也不支持大量的生成器(离散化)。
text-anchor 定义文本对齐方式。
font-family 定义字体系列的名称。
仅正确解释第 5 版支持的字体,否则使用默认字体。更多信息...
font-size 定义文本高度。
高度必须定义为长度或百分比。
font-weight 定义是使用粗体还是普通样式呈现文本。
TrueType 字体显示不支持该属性,因此也不支持大量的生成器(离散化)。

4.8 XLink 属性模块

集合名称

集合属性

xlink:href 定义链接。为链接元素或定义光栅图像解释该属性。
xlink:show 定义如何显示链接指向的资源。

4.9 变换属性

  分析和处理变换属性。应用下面的变换:

  • matrix(<a> <b> <c> <d> <e> <f>),以六个值的变换矩阵形式指定变换
  • translate(<tx> [<ty>]),通过 txty 指定平移
  • scale(<sx> [<sy>]),通过 sxsy 指定缩放操作
  • rotate(<rotate-angle> [<cx> <cy>]),指定绕给定点旋转 <rotate-angle> 度
  • skewX(<skew-angle>),指定沿 x 轴的扭曲变换
  • skewY(<skew-angle>),指定沿 y 轴的扭曲变换。

  关于SVG变换的详细文章请浏览:基于Batik的SVG应用: 关于几何变换的教程

(THE END)