上一节:

  SVG 参考手册

  • SVG 元素

    下表描述了 SVG 元素属性的用法。
    元素 描述 属性
    <a> 在SVG元素周围创建链接
    xlink:show
    xlink:actuate
    xlink:href
    target
    <altGlyph> 提供对用于渲染特定字符数据的字形的控制
    x
    y
    dx
    dy
    rotate
    glyphRef
    format
    xlink:href
    <altGlyphDef> 为字形定义替换集 id
    <altGlyphItem> 定义字形替换的候选集 id
    <altGlyphItem> 定义字形替换的候选集 id
    <animate> 定义元素的属性如何随时间变化
    attributeName =" 目标属性的名称"
    by = "相对偏移值"
    from = "起始值"
    to = "最终值"
    dur = "持续时间"
    repeatCount = "动画发生的时间"
    <animateMotion> 使引用的元素沿运动路径移动
    calcMode = "动画的插值模式"。可以是“离散”,“线性”,“节奏”,“样条”
    path = "运动路径"
    keyPoints = "对象在此刻应沿运动路径移动多远"
    rotation = "应用旋转变换"
    xlink:href = "对<path>元素的URI引用,该元素定义了运动路径"
    <animateMotion> 使引用的元素沿运动路径移动
    calcMode = "动画的插值模式"。可以是“离散”,“线性”,“节奏”,“样条”
    path = "运动路径"
    keyPoints = "对象在此刻应沿运动路径移动多远"
    rotation = "应用旋转变换"
    xlink:href = "对<path>元素的URI引用,该元素定义了运动路径"
    <animateTransform> 对目标元素上的转换属性进行动画处理,从而允许动画控制平移,缩放,旋转和/或倾斜
    by = "相对偏移值"
    from = "起始值"
    to = "最终值"
    type = "要随时间变化的转换类型。可以是'translate','scale','rotate','skewX','skewY'"
    <circle> 定义一个圆
    cx = "圆的 x 轴中心"
    cy = "圆的 y 轴中心"
    r = "圆的半径"。 需要。
    +展示属性:Color, FillStroke, Graphics
    <clipPath> 裁剪是关于隐藏通常会绘制的内容;定义画什么和不画什么的模具称为剪切路径
    clip-path = "参考的剪切路径与参考的剪切路径相交"
    clipPathUnits = "'userSpaceOnUse'或'objectBoundingBox'。第二个值使子元素成为使用掩码的对象边界框的一部分(默认值:'userSpaceOnUse')"
    <color-profile> 指定颜色配置文件描述(使用CSS设置文档样式时)
    local = "本地存储的颜色配置文件的唯一ID"
    name = ""
    rendering-intent = "auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
    xlink:href = "ICC配置文件资源的URI"
    <cursor> 定义与平台无关的自定义光标
    x = "光标的x轴左上角(默认为0)"
    y = "光标的y轴左上角(默认为0)"
    xlink:href = "用作光标的图像的URI"
    <defs> 引用元素的容器
    <desc> SVG 中容器元素或图形元素的纯文本描述(用户代理可以将文本显示为工具提示)
    <ellipse> 定义一个椭圆
    cx = "椭圆的x轴中心"
    cy = "椭圆的y轴中心"
    rx = "椭圆半径沿x轴的长度"。 需要。
    ry = "椭圆沿y轴的半径长度"。 需要。
    +展示属性:Color, FillStroke, Graphics
    <feBlend> 根据某种混合模式将两个对象组合在一起
    mode = "图像混合模式:normal|multiply|screen|darken|lighten"
    in = "标识给定过滤器基元的输入:SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
    in2 = "混合操作的第二个输入图像"
    <feBlend> 根据某种混合模式将两个对象组合在一起
    mode = "图像混合模式:normal|multiply|screen|darken|lighten"
    in = "标识给定过滤器基元的输入:SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
    in2 = "混合操作的第二个输入图像"
    feColorMatrix SVG滤镜;应用矩阵变换
    feComponentTransfer SVG滤镜;执行按组件的数据重映射
    feComposite SVG滤镜
    feConvolveMatrix SVG滤镜
    feDiffuseLighting SVG滤镜
    feDisplacementMap SVG滤镜
    feDistantLight SVG滤镜;定义光源
    feFlood SVG滤镜
    feFuncA SVG滤镜;feComponentTransfer的子元素
    feFuncB SVG滤镜;feComponentTransfer的子元素
    feFuncG SVG滤镜;feComponentTransfer的子元素
    feFuncR SVG滤镜;feComponentTransfer的子元素
    feFuncR SVG滤镜;feComponentTransfer的子元素
    feGaussianBlur SVG滤镜;对图像执行高斯模糊
    feImage SVG滤镜
    feMerge SVG滤镜;在彼此之上创建图像层
    feMergeNode SVG滤镜;feMerge的子元素
    feMorphology SVG滤镜;在源图形上执行“填充”或“稀化”
    feOffset SVG滤镜;相对于当前位置移动图像
    fePointLight SVG滤镜
    fePointLight SVG滤镜
    feSpecularLighting SVG滤镜
    feSpotLight SVG滤镜
    feTile SVG滤镜
    feTurbulence SVG滤镜
    filter 滤镜效果容器
    font 定义字体
    font-face 描述字体的特征
    font-face-format
    font-face-name
    font-face-src
    font-face-uri
    foreignObject
    <g> 用于将元素分组
    id = "群组名称"
    fill = "组的填充颜色"
    opacity = "群组的不透明度"
    +展示属性:All
    glyph 定义给定字形的图形
    glyphRef 定义可能使用的字形
    hkern
    <image> 定义图像
    x = "图像的x轴左上角"
    y = "图像的y轴左上角"
    width = "图像的宽度"。 需要。
    height = "图像的高度"。 需要。
    xlink:href = "图片的路径"。 需要。
    +展示属性:Color, Graphics, Images, Viewports
    <line> 定义一条线
    x1 = "线的x起点"
    y1 = "线的y起点"
    x2 = "直线的x终点"
    y2 = "线的y端点"
    xlink:href = "图片的路径"。 需要。
    +展示属性:Color, FillStroke, Graphics, Markers
    <linearGradient> 定义线性渐变;线性渐变通过使用矢量填充对象,并且可以定义为水平,垂直或角度渐变。
    id = "用于引用此模式的唯一ID。需要引用它 gradientUnits ="'userSpaceOnUse'或'objectBoundingBox'。使用视图框或对象确定矢量点的相对位置。(默认为'objectBoundingBox')"
    gradientTransform = "应用于渐变的变换"
    x1 = "渐变矢量的x起点(默认为数字或%-0%)"
    y1 = "渐变矢量的y起点。(默认值为0%)"
    x2 = "渐变矢量的x端点。(默认为100%)"
    y2 = "渐变矢量的y端点。(默认值为0%)"
    spreadMethod = "'pad'或'reflect'或'repeat'"
    xlink:href = "对另一个渐变的引用,该渐变的属性值用作默认值,并包括停止值。“递归”
    <marker> 标记可以放置在直线,折线,多边形和路径的顶点上。 这些元素可以使用默认情况下继承的标记属性 "marker-start","marker-mid" 和 "marker-end",也可以将其设置为 "none" 或已定义标记的URI。 您必须先定义标记,然后才能通过其URI对其进行引用。 任何形状都可以放在标记内。 它们绘制在附加到元素的顶部
    markerUnits = "'strokeWidth'或'userSpaceOnUse'。如果使用'strokeWidth',则一个单位等于一个笔划宽度。否则,标记将不缩放,并且使用与参考元素相同的视图单位(默认为'strokeWidth')"
    refx = "标记与顶点连接的位置(默认为0)"
    refy = "标记与顶点连接的位置(默认为0)"
    orient = "'auto'或始终显示标记的角度。'auto'将计算一个使x轴成为顶点切线的角度(默认为0)"
    markerWidth = "marker的宽度(默认为3)"
    markerHeight = "标记的高度(默认为3)"
    viewBox = "在此SVG绘图区域中的“可见”点。用空格或逗号分隔的4个值。(最小x,最小y,宽度,高度)"
    +展示属性:All
    <mask> 遮罩是不透明度值和裁剪的组合。 像剪切一样,您可以使用形状,文本或路径来定义蒙版的各个部分。 遮罩的默认状态是完全透明的,与剪切平面相反。 遮罩中的图形设置遮罩的不透明部分如何
    maskUnits ="'userSpaceOnUse'或'objectBoundingBox'。设置剪切平面是相对于完整视图端口还是对象(默认值:'objectBoundingBox')"
    maskContentUnits = "使用第二个带百分比的符号使蒙版相对于对象的图形位置。"userSpaceOnUse" 或 " objectBoundingBox"(默认值:"userSpaceOnUse")"
    x = "蒙版的剪切平面(默认值:-10%)"
    y = "蒙版的剪切平面(默认值:-10%)"
    width = "遮罩的剪切平面(默认值:120%)"
    height = "蒙版的剪切平面(默认值:120%)"
    metadata 指定元数据
    missing-glyph
    mpath
    <path> 定义路径
    d = "一组定义路径的命令"
    pathLength = "如果存在,将缩放路径,以使计算出的点的路径长度等于此值"
    transform = "转换列表"
    <pattern> 定义您希望视图显示的坐标和视图的大小。 然后,将形状添加到图案中。 当点击视图框(查看区域)的边缘时,图案会重复
    id = "用于引用此模式的唯一ID。" 需要。
    patternUnits = "'userSpaceOnUse'或'objectBoundingBox'。 第二个值使x,y,宽度,高度的单位成为使用该模式的对象边界框的分数(或%)。"
    patternContentUnits = "'userSpaceOnUse'或'objectBoundingBox'"
    patternTransform = "允许整个模式进行转换"
    x = "样式距左上角的偏移量(默认为0)"
    y = "样式距左上角的偏移量(默认为0)"
    width = "图案图块的宽度(默认100%)"
    height = "图案图块的高度(默认为100%)"
    viewBox = "在此SVG绘图区域中的"可见"点。用空格或逗号分隔的4个值。(最小x,最小y,宽度,高度)"
    xlink:href = "对另一个模式的引用,该模式的属性值用作默认值,并且任何子级都被继承。"递归"
    <polygon> 定义至少包含三个侧面的图形
    points = "多边形的点。点的总数必须是偶数"。 需要。
    fill-rule = "FillStroke演示文稿属性的一部分"
    +展示属性:Color, FillStroke, Graphics, Markers
    <polyline> 定义仅由直线组成的任何形状
    points = "折线上的点"。 需要。
    +展示属性:Color, FillStroke, Graphics, Markers
    <radialGradient> 定义径向渐变;径向渐变是通过画一个圆并在从焦点到外部半径的渐变光阑之间平滑更改值来创建的。
    gradientUnits = "'userSpaceOnUse'或'objectBoundingBox'。使用视图框或对象确定矢量点的相对位置。(默认为'objectBoundingBox')"
    gradientTransform = "应用于渐变的变换"
    cx = "渐变的中心点(默认为数字或%-50%)"
    cy = "渐变的中心点(默认值为50%)"
    r = "渐变的半径(默认值为50%)"
    fx = "渐变的焦点(默认值为0%)"
    fy = "渐变的焦点(默认值为0%)"
    spreadMethod = "'pad'或'reflect'或'repeat'"
    xlink:href = "参考另一个渐变,该渐变的属性值用作默认值,并包含其停止值。"递归"
    <rect> 定义一个矩形
    x = "矩形的x轴左上角"
    y = "矩形的y轴左上角"
    rx = "x轴半径(使元素变圆)"
    ry = "y轴半径(使元素变圆)"
    width = "矩形的宽度"。 需要。
    height = "矩形的高度"。必需。
    +展示属性:Color, FillStroke, Graphics
    script 脚本容器(例如ECMAScript)
    set 在指定的持续时间内设置属性的值
    <stop> 在指定的持续时间内设置属性的值
    offset = "此停靠点的偏移量(0到1/0%到100%)"。 需要。
    stop-color = "此停靠点的颜色"
    stop-opacity = "此停靠点的不透明度(0到1)"
    style 允许样式表直接嵌入 SVG 内容中
    <svg> 创建一个SVG文档片段
    x = "嵌入时位于左上角(默认为0)"
    y = "嵌入时位于左上角(默认为0)"
    width = "svg片段的宽度(默认为100%)"
    height = "svg片段的高度(默认为100%)"
    viewBox = "在此SVG绘图区域中的"可见"点。用空格或逗号分隔的4个值。(最小x,最小y,宽度,高度)"
    reserveAspectRatio = "'none'或'xVALYVAL'的9个组合中的任何一个,其中VAL是'min','mid'或'max'。(默认值为xMidYMid)"
    zoomAndPan = "'放大'或'禁用'。放大选项允许用户平移和缩放文件(默认放大)"
    xml = "outermost <svg>元素需要设置SVG及其名称空间:xmlns =" http://www.w3.org/2000/svg" xmlns:xlink = " http://www.w3.org/1999/ xlink" xml:space =" preserve""
    +展示属性:All
    switch
    symbol
    <text> 定义文字
    x = " x轴位置列表。第n个x轴位置被赋予文本中的第n个字符。如果位置用完后还有其他字符,它们将被放置在最后一个字符之后。默认为0"
    y = " y轴位置列表。(请参阅x)。默认值为0"
    dx = "一个长度列表,它使字符相对于绘制的最后一个字形的绝对位置移动。(请参阅x)"
    dy = "一个长度列表,它使字符相对于绘制的最后一个字形的绝对位置移动。(请参阅x)"
    rotation = "旋转列表。对第n个字符执行第n次旋转。其他字符未提供最后的旋转值"
    textLength = "目标长度,SVG查看器将通过调整间距和/或字形来尝试在其之间显示文本。(默认值:文本的正常长度)"
    lengthAdjust = "如果指定了长度,该如何调整以尝试呈现文本。这两个值是'spacing'和'spacingAndGlyphs'"
    +展示属性:Color, FillStroke, Graphics, FontSpecification, TextContentElements
    textPath
    title SVG中元素的纯文本描述-未显示为图形的一部分。 用户代理可以将文本显示为工具提示
    <tref> 引用SVG文档中的任何<text>元素并重用它 与<text>元素相同
    <tspan> 与<text>元素相同,但可以嵌套在文本标签内部和内部 与<text>元素相同,+另外: xlink:href = "对<text>元素的引用"
    <use> 使用URI引用具有唯一 id 属性的<g>,<svg>或其他图形元素并将其复制;该副本仅是对原始文档的引用,因此文档中仅存在原始文档;对原件的任何更改都会影响所有副本。
    x = "克隆元素的x轴左上角"
    y = "克隆元素的y轴左上角"
    width = "克隆元素的宽度"
    height = "克隆元素的高度"
    xlink:href = "对克隆元素的URI引用"
    +展示属性:All
    view
    vkern
上一节: