[一] SVG基础

203 阅读2分钟

动画元素

<animate>,<animateColor>,<animateMotion>,<animateTransform>,<discard> (en-US),<mpath>,<set>

容器元素

<a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>

基本形状元素

<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

描述性元素

<desc>, <metadata>, <title>

字体元素

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

滤镜元素

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow> (en-US), <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

渐变元素

<linearGradient>, <meshgradient>, <radialGradient>, <stop>

图形元素

<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

图像渲染元素

<mesh>, <use>

光源元素

<feDistantLight>, <fePointLight>, <feSpotLight>

非渲染元素

<clipPath>, <defs>, <hatch> (en-US), <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title>

绘制服务器元素

<hatch> (en-US), <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> (en-US)

可渲染元素

<a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use>

形状元素

<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>

结构元素

<defs>, <g>, <svg>, <symbol>, <use>

文本内容元素

<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

文本子内容元素

<altGlyph>, <textPath>, <tref>, <tspan>

未分类元素

<clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath> (en-US), <meshpatch>, <meshrow>, <script>, <style>, <view>

圆 circle

SVG 元素是一个SVG的基本形状,用来创建圆,基于一个圆心和一个半径。

<svg viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50"/>
</svg>

椭圆 ellipse

ellipse元素是一个SVG基本形状,用来创建一个椭圆,基于一个中心坐标以及它们的x半径和y半径。

椭圆不能指定精确的椭圆倾向(假设,举个例子,你想画一个45度角倾斜的椭圆),但是可以利用transform属性实现旋转。

<svg width="120" height="120" viewPort="0 0 120 120">
    <ellipse cx="60" cy="60" rx="50" ry="25"/>
</svg>

line

line元素是一个SVG基本形状,用来创建一条连接两个点的线。

<svg width="120" height="120" viewPort="0 0 120 120">
    <line x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="2"/>
</svg>

image.png

<svg>
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"/>
</svg>

image.png

<svg>
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black" transform="rotate(-45 20 100)"/>
</svg>

image.png

polygon

polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点。欲了解开放形状,请看

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewPort="0 0 120 120" version="1.1">

    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

</svg>

image.png

polyline

polyline元素是SVG的一个基本形状,用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状,最后一点不与第一点相连。欲了解闭合形状,请看 元素。

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewPort="0 0 120 120" version="1.1">

    <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20"/>

</svg>

image.png

rect

rect元素是SVG的一个基本形状,用来创建矩形,基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

image.png

描述性元素

<desc>, <metadata>, <title>

desc

SVG绘画中的每个容器元素或图形元素都可以提供一个desc描述性字符串,这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现,desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到,它显示了desc元素但是不会显示路径元素或者别的图形元素。desc元素提升了SVG文档的可访问性。

  <svg width="80px" height="30px" viewBox="0 0 80 30">
    <defs>
      <linearGradient id="Gradient01">
        <stop offset="20%" stop-color="#39F" />
        <stop offset="90%" stop-color="#F3F" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />
  </svg>

ps:developer.mozilla.org/zh-CN/docs/…