SVG语法标签属性解释手册

最新推荐文章于 2023-09-24 09:50:30 发布
最新推荐文章于 2023-09-24 09:50:30 发布
阅读量2.5k 收藏 3
点赞数
分类专栏： SVG专题 文章标签： 图形 算法 integer image tiff xml

1. SVG元素模块

Animation.Module animate animateColor animateTransform animateMotion set mpath
剪裁模块clipPath
颜色轮廓模块color-profile
条件处理模块switch
光标模块cursor
扩展性模块foreignObject
过滤器模块filter feFlood feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight feSpotLight feFuncR feFuncG feFuncB feFuncA
Font.Modulefontfont-face glyph missing-glyph hkern vkern font-face-src font-face-uri font-face-format font-face-name definition-src
梯度模块linearGradientradialGradientstop
Hyperlink.Modulea
图像模块

 

image
标记模块marker
遮罩模块mask
阵列模块pattern
脚本模块script
造型模块path rect circle line polyline polygon ellipse
结构模块svg g defs desc title metadata symbol use
样式模块style
文本模块text tspan tref textPath altGlyph altGlyphDef altGlyphItem glyphRef
视图模块view


2.SVG解释的元素

2.1 超链接模块

元素

属性

描述

aCore.attrib, Conditional.attrib, Style.attrib, transform, target, GraphicalEvents.attrib, Presentation.attrib, External.attrib, XLinkReplace.attrib 联结一组图元, 以链接属性（本地或非本地 URI）。该链接在可视化过程中处于非活动状态，但每次转换到 CGM 时都保存该链接。
2.2 图像模块

元素

属性

内容模型

image

Core.attrib, XLinkEmbed.attrib, Conditional.attrib, Style.attrib, External.attrib, GraphicalEvents.attrib, preserveAspectRatio, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Profile.attrib, Viewport.attrib, transform, x, y, width, height

描述通过外部文件链接（相对路径或绝对路径）或通过 base64 编码（这种情况下，可以读取的格式有：BMP、JPEG、TIFF 或 PNG）定义的矢量图像或位图图像。
支持外部位图图像链接，但不支持矢量图像链接。
2.3 标记模块

元素

属性

内容模型

marker

Core.attrib, External.attrib, Style.attrib,Presentation.attrib, viewBox,preserveAspectRatio,refX, refY,markerUnits, markerWidth, markerHeight, orient

通过标记属性定义一组重用作标记的图元。
不考虑 markerUnits 属性，它被视为与属性 userSpaceOnUse 相同。
不考虑 orient 属性，标记不按照路径段定向。应用标记时始终不定向。
2.4 阵列模块

元素

属性

内容模型

pattern

Core.attrib, XLink.attrib, Conditional.attrib , External.attrib, Style.attrib, Presentation.attrib, viewBox, preserveAspectRatio, patternTransform, x, y, width, height, patternUnits 定义一组重用于填充或绘制造型的图元。
不考虑 patternUnits 属性，它被视为与属性 userSpaceOnUse 相同。
仅解释用位图阵列定义的阵列。不识别用向量元素集定义的阵列。
因此，阵列元素的子级应为 <image> 类型。这样可以读取包含填充纹理的工程制图文档。
2.5 造型模块

元素

属性

内容模型

path

Core.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, d, pathLength, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Marker.attrib

定义造型的轮廓。它由圆弧、椭圆弧、直线、三次贝塞尔曲线<!--webbot bot="HTMLMarkup" startspan --><!--webbot bot="HTMLMarkup" endspan -->和二次贝塞尔曲线<!--webbot bot="HTMLMarkup" startspan --><!--webbot bot="HTMLMarkup" endspan -->组成。此轮廓可以是封闭的或开放的。更多信息可参见“SVG中Path路径指令教程”。

rect

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x, y, width, height, rx,ry,transform

定义矩形。
不解释圆角。

circle

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, r, transform

定义圆。

line

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, x1, y1, x2, y2, transform

定义直线。

ellipse

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, cx, cy, rx, ry, transform

定义椭圆。

polyline

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform

定义折线。
如果折线处于开放模式，则仅绘制轮廓，不填充折线。

 

polygon

Core.attrib, Conditional.attrib, Style.attrib, GraphicalEvents.attrib, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, points, transform

定义多边形

2.6 结构模块

元素

属性

内容模型

svg

Core.attrib, Conditional.attrib, Style.attrib, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, contentScriptType, contentStyleType, External.attrib, Presentation.attrib, GraphicalEvents.attrib, DocumentEvents.attrib

编组 SVG 图像。

g

Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform

将具有相同属性的一个或多个元素编组在一起。

defs

Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform

定义要重用的元素组。它的子级因此是参考元素。

desc

Core.attrib, Style.attrib

描述元素。

title

Core.attrib, Style.attrib

指示元素的标题。

symbol

Core.attrib, Style.attrib, External.attrib, viewBox, preserveAspectRatio, Presentation.attrib, GraphicsElementEventAttrs

定义一组要重用的元素。

use

Core.attrib, Style.attrib, Conditional.attrib, transform,x, y, width, height, XLinkEmbed.attrib, Presentation.attrib, GraphicsElementEventAttrs

参考一组预定义元素以便显示它。

2.7 文本模块

元素

属性

内容模型

textCore.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, x, y, dx,dy,rotate, textLength,lengthAdjust, GraphicalEvents.attrib,Paint.attrib, Font.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, TextContent.attrib, Text.attrib 定义文本。

文本颜色是笔画颜色定义的颜色，如果没有明确定义笔画颜色，则使用填充颜色。


三、SVG模块属性

3.1 动画属性集

集合名称

集合属性

Animation.attrib

XLink.attrib

AnimationAttribute.attrib

attributeName, attributeType

AnimationTiming.attrib

begin, dur, end, min, max, restart, repeatCount, repeatDur, fill

AnimationValue.attrib

calcMode, values, keyTimes, keySplines, from, to, by

AnimationAddtion.attrib

additive, accumulate

3.2 动画事件属性模块

集合名称

集合属性

AnimationEvents.attrib

onbegin, onend, onrepeat, onload

3.3 剪裁属性集

集合名称

集合属性

Clip.attrib

clip-path, clip-rule

3.4 条件处理属性集

集合名称

集合属性

Conditional.attrib

requiredFeatures, requiredExtensions, systemLanguage

3.5 容器属性模块

集合名称

集合属性

Container.attrib

enable-background

3.6 内核属性模块

集合名称

集合属性

Core.attrib

id, xml:base, xml:lang, xml:space

3.7 光标属性集

集合名称

集合属性

Cursor.attrib

cursor

3.8 文档事件属性模块

集合名称

集合属性

DocumentEvents.attrib

onunload, onabort, onerror, onresize, onscroll, onzoom

3.9 外部资源要求属性模块

集合名称

集合属性

External.attrib

externalResourcesRequired

3.10 梯度属性集

集合名称

集合属性

Gradient.attrib

stop-color, stop-opacity

3.11 图形元素事件属性模块

集合名称

集合属性

GraphicalEvents.attrib

onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onload

3.12 图形属性模块

集合名称

集合属性

Graphics.attrib

display, image-rendering, pointer-events, shape-rendering, text-rendering,visibility

3.13 过滤器属性集

集合名称

集合属性

Filter.attrib

filter

FilterColor.attrib

color-interpolation-filters

FilterPrimitive.attrib

x, y, width, height, result

FilterPrimitiveWithIn.attrib

FilterPrimitive.attrib, in

3.14 标记属性集

集合名称

集合属性

Marker.attrib

marker-start, marker-mid, marker-end

3.15 遮罩属性集

集合名称

集合属性

Mask.attrib

mask

3.16 不透明属性模块

集合名称

集合属性

Opacity.attrib

opacity, stroke-opacity, fill-opacity

3.17 涂料属性模块

集合名称

集合属性

Paint.attrib

color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation, color-rendering

3.18 样式属性集

集合名称

集合属性

Style.attrib

style, class

3.19 文本属性集

集合名称

集合属性

Text.attrib

writing-mode

TextContent.attrib

alignment-baseline, baseline-shift, direction, dominant-baseline, glyph-orientation-horizontal, glyph-orientation-vertical, kerning, letter-spacing, text-anchor, text-decoration, unicode-bidi, word-spacing

Font.attrib

font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight

3.20 视口属性模块

集合名称

集合属性

Viewport.attrib

clip, overflow

　　视口属性更多的文章请浏览："SVG格式图形显示的坐标系统规则"

3.21 XLink 属性模块

 

集合名称

集合属性

XLink.attrib

xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate

XLinkRequired.attrib

xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate

XLinkEmbed.attrib

xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate

XLinkReplace.attrib

xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate

四、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>])，通过 tx 和 ty 指定平移
  • scale(<sx> [<sy>])，通过 sx 和 sy 指定缩放操作
  • rotate(<rotate-angle> [<cx> <cy>])，指定绕给定点旋转 <rotate-angle> 度
  • skewX(<skew-angle>)，指定沿 x 轴的扭曲变换
  • skewY(<skew-angle>)，指定沿 y 轴的扭曲变换。
svg基础--基本语法与标签
descire
10-19 5909
svg系列–基础这一系列的文章会总结svg的基础知识和一些经典的案例。svg简介SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics. 这是MDN英文文档对svg的介绍。svg支持css,这一点有效的将图形和样式区分开。svg的应用： 1、绘图 2、动画 如何在网页中引用svg元素 svg元素可以
一个详细的svg使用手册
01-29
总之，“一个详细的svg使用手册”将涵盖SVG的基本概念、语法、样式控制、动画制作、滤镜应用以及在Web开发中的实践方法。通过深入学习这个手册，开发者将能够熟练掌握SVG的使用，提升网页和应用的视觉质量和用户体验...
SVG 基本语法
最新发布
zp的博客
09-24 1562
svg为可缩放矢量图形，使用 XML 格式定义图像。
【编程语言】SVG 语法入门教程（绘制矩形、圆形、椭圆、多边形等）
热门推荐
知不足而奋进，望远山而前行
02-07 1万+
SVG 是使用 XML 来描述二维图形和绘图程序的语言。在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版
SVG语法教程指南中文版
草帽
03-14 391
SVG语法教程指南中文版 2008.03.16 Vicos 来源：SVG中国(ChinaSVG.COM) 翻译：蔡发明 英文版：http://w3schools.com/svg/default.asp (对照W3C官方英文版格式,再做一次翻译修正，最末部分还待翻译完成) 1 SVG简介 　　SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一...
CSS语法手册 CSS手册
10-18
**CSS语法手册** CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档中元素展现样式的语言。在网页设计中，CSS扮演着重要的角色，它允许我们将表现（样式）与内容分离，...
HTML、CSS、JavaScript语法手册——网页设计基础
"html、css、javascript语法手册(PDF版).pdf" ...CSS（层叠样式表）则负责控制网页的布局和外观，而JavaScript是一种强大的编程语言，它...这本PDF手册将详细介绍这些技术的语法和应用，对于学习和精通Web开发至关重要。
html、css、javascript语法手册
06-27
本手册主要关注这三种语言的语法规范。 HTML，全称为HyperText Markup Language，是一种标记语言，用于描述网页的结构和内容。HTML文件由一系列元素和标签构成，这些元素描述了网页的各个部分，如标题、段落、列表...
XML轻松学习手册--XML语法之二
03-04
本文主要探讨了XML的语法，包括元素、属性、注释和CDATA四个核心概念。 首先，我们来看XML的元素语法。XML元素是XML文档的基本构建块，它由开始标签和结束标签组成，例如`<ajie></ajie>`。元素的名称和开始标签内的...
svg-tag-mode：Emacs的次要模式，用漂亮的SVG标签替换关键字
02-05
svg-tag-mode：Emacs的次要模式，用漂亮的SVG标签替换关键字
SVG.chm手册
09-05
SVG的chm找了很久，英文版的。找遍csdn没有相关文档，资料更是少的可怜
SVG基础语法及使用
PorkCanteen的博客
11-20 2121
SVG（Scalable Vector Graphics可缩放矢量图）作为一种常见的图片格式，其可以直接通过代码描绘图像并添加交互效果，可以用任何文字处理工具打开SVG图像，且随时可以插入到html中通过浏览器进行查看。本文将对SVG图像的一些基本标签语法及使用方法进行介绍。
SVG基本语法与标签介绍
skycnlr的博客
02-07 1127
本文转自 http://blog.csdn.net/dai_qingyun/article/details/52856919#t0  SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics. SVG支持css,这一点有效的将图形和样式区分开。  SVG的应用：              1、绘图
SVG 详解（三）基础语法
青岑的博客
04-19 7082
本文介绍一些 SVG 的简单语法，如矩形、圆形、路径等。 文文涉及的全部示例 =&gt; 在这里 rect-矩形 // 语法很简单，x y 左上角起点坐标，width height 矩形长宽，rx ry 圆角 // 绘图的填充等属性可以放在 style 里，也可以和 style 平级抽离为一个属性去描述，如这样：fill='red' &lt;svg width="200" height=...
SVG语法
yw1688的专栏
02-17 1121
8 Paths Contents 8.1 Introduction8.2 The ‘path’ element8.3 Path data 8.3.1 General information about path data8.3.2 The "moveto" commands8.3.3 The "closepath" command8.3.4 The "lineto" comman
SVG 常用语法
zZ~~Blog
07-18 598
SVG 常用语法 参考https://www.w3.org/TR/svg-paths/ 这里只记录当前我需要用到的几个命令，更多请参考https://www.w3.org/TR/svg-paths/ M：相当于moveto()[参数x,y] 移动到（启动一个新子路径），如果跟随多对坐标，视为隐线命令。 L : 相当于 lineto [参数x,y] 从当前点到给定的点（x,y）,给定的点成为
SVG：知识点整理（语法+知识点参考+svg元素表）
喜狼狼与灰太杨的博客
08-26 1177
概念 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。 基本xml代码： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="10
android SVG 常用语法
日积月累
07-10 502
Path指令 M = moveto(M X,Y) ：将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值