タグ
直線<line>
<line>
タグラインを作成するために使用されます。
プロパティ | 意味 |
---|---|
X1 | x軸の属性スタートラインが定義されています |
Y1 | y軸の属性スタートラインが定義されています |
X2 | x軸にラインを定義するエンド属性 |
Y2 | Y軸線を画定する端属性 |
破線<polyline>
<polyline>
タグは、直線のみを含む形状を作成するために使用されます。
プロパティ | 意味 |
---|---|
points |
各エンドポイントは、横軸と縦軸の間のカンマ座標点間のスペースで区切られた、分離された指定します |
<svg width="100" height="50">
<polyline stroke="red" fill="black" stroke-width="2" points="0,0 10,10 20,10 100,50"/>
</svg>
ラウンド<circle>
プロパティ | 意味 |
---|---|
cx |
中心はx 座標軸 |
cy |
中心はy 座標軸 |
r |
半径 |
<svg width="100" height="50">
<circle cx="50" cy="25" r="25" />
</svg>
長方形<rect>
プロパティ | 意味 |
---|---|
x |
左上には、x デフォルト値は0であり、座標γ軸 |
y |
左上には、y デフォルト値は0であり、座標γ軸 |
width |
幅 |
height |
高いです |
rx |
丸みを帯びたアーク |
ry |
丸みを帯びたアーク |
<svg width="100" height="50">
<rect width="100" height="50" rx="10" ry="20"/>
</svg>
楕円<ellipse>
<ellipse>
タグは、楕円を作成するために使用することができます。オーバル円は非常に似ています。楕円は異なるていることを除いx
及びy
半径が丸くx
且つy
半径は同じです。
プロパティ | 意味 |
---|---|
cx |
中心はx 座標軸 |
cy |
中心はy 座標軸 |
rx |
水平方向の半径 |
ry |
垂直半径 |
<svg width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25"/>
</svg>
パス<path>
<path>
タグは、パスを定義するために使用されます。詳細MDN
プロパティ | 意味 |
---|---|
d |
長い文字列の値で描画順を表し、それぞれの文字は、座標続いて描画操作を表します。 |
描画支援措置は、次のとおりです。
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
- M:移動(のmoveTo)に、直ちにポイント後のX座標及びY座標空間で割っ
- Lは:点のx座標及びy座標空間で除算、座標は、対になった空間で割った複数の座標が存在しなければならない直後に、直線(のlineTo)を描画します
- H:直線(水平LINETO)を描画するレベルは、X軸座標直後に必要なレベルに移動しました
- V:Yは、必要に水平移動の座標直後、(垂直LINETO)に直線垂線を引き
- C:立方贝赛尔曲线(curveto),它需要考虑两个控制点。立方贝塞尔曲线的句法是:”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“,在这里,c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点,而不是相对于结束点的。dx和dy分别是向右和向下的距离
- S:平滑的贝塞尔曲线(smooth curveto),语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“,在这里(d)cx指定第二个控制点。
- Q: 二次方贝塞尔曲线(quadratic Belzier curve), 控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标,而dcx和dcy分别是控制点在x和y方向上的距离。
- T:二次方贝塞尔平滑曲线smooth quadratic Belzier curveto,它假定第一个控制点是从前一个控制点关于前一个点的反射,或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“,分别对应于绝对坐标和相对距离,用来创建二次方贝塞尔曲线。
- A:椭圆弧曲线路径(elliptical Arc),”A rx,ry xAxisRotate,LargeArcFlag,SweepFlag x,y“。解构它,rx和ry分别是x和y方向的半径,而LargeArcFlag的值要到是0要么是1,用来确定是要画小弧(0)还是画大弧(1)。SweepFlag也要么是0要么是1,用来确定弧是顺时针方向(1)还是逆时针方向(0)。x和y是目的地的坐标。
- Z:闭合路径(closepath)
!> 注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<svg width="100" height="50">
<path d="M 0 0
H 10
V 10
H 20
V 20
L 0 10 0 20
C 100,0 " stroke="red"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
文本<text>
属性 | 含义 |
---|---|
x |
文本起始横坐标 |
y |
文本起始纵坐标 |
<text>
元素可以通过<tspan>
元素来分组成多行来显示。每个 tspan
元素可以定义自己独特的格式和位置。
!> 文字的样式可以用class或style属性指定。
<svg width="200" height="50" xmlns:xlink="https://www.w3.org/1999/xlink">
<text x="0" y="25">
<tspan>hello svg</tspan>
<tspan x="10" y="40">多行文本</tspan>
<a xlink:href="www.baidu.com" target="_blank">
<text x="0" y="15" fill="red">链接文本</text>
</a>
</text>
<circle cx="100" cy="25" r="25" fill="#ff5e5e1a" />
<text x="100" y="25" fill="red" style="dominant-baseline:middle;text-anchor:middle;">居中</text>
</svg>
xmlns:xlink=""这一句引入了xlink命名空间,以支持链接元素属性定义。
xlink:href和html中的a链接类似,只是多了xlink的命名空间前缀,用来表示链接的目的地址。
复用<use>
use元素在SVG文档内取得目标节点,并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中,然后将其粘贴到use元素的位置,很像HTML5中的克隆模板元素。因为克隆的节点是不可见的,所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候,必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性,除非你明文设置使用CSS继承。
出于安全原因,一些浏览器可能在use元素上应用同源策略,还有可能拒绝载入xlink:href属性内的跨源URI。
属性 | 含义 |
---|---|
x |
左上角横坐标 |
y |
左上角纵坐标 |
width |
区域宽 |
height |
区域高 |
xlink:href |
引入复制节点 |
<svg width="100" height="50">
<text id="useText" x="0" y="10">hello svg</text>
<use xlink:href="#useText" x="0" y="20"/>
</svg>
多边形<polygon>
属性 | 含义 |
---|---|
points |
定义多边形每个角的x 和y 坐标, x 和y 用, 分割,坐标之间用空格分割 |
<svg width="100" height="50">
<polygon points="50,0 0,50 100,50"/>
</svg>
分组<g>
<g>
标签用于将多个形状组成一个组(group),方便复用和管理。
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
预定义<defs>
<defs>
标签用于自定义形状,它内部的代码不会显示,仅供引用。
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<pattern>
<pattern>
标签用于自定义一个形状,该形状可以被引用来平铺一个区域。
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
上面代码中,<pattern>
标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示
图片<image>
标签用于插入图片文件。
属性 | 含义 |
---|---|
xlink:href |
文件来源 |
width |
宽 |
height |
高 |
<svg width="100" height="100">
<image xlink:href="./_statics/images/logo.jpeg" width="50%" height="50%"/>
</svg>
动画<animate>
<animate>
ラベルには、アニメーションを生成するために使用されます。
プロパティ | 意味 |
---|---|
attributeName |
プロパティ名は、アニメーションが発生します |
from |
アニメーションの単一の初期値。 |
to |
単一のアニメーションの値を終了します。 |
dur |
アニメーションのシングル持続。 |
repeatCount |
サイクルモデルアニメーション。 |
アニメーションtransform
変換<animateTransform>
<animate>
タグを変更し、必要に応じてプロパティは、仕事は、その後、使用していないラベルをCSS
transform
<animateTransform>
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
</svg>
上記のコード、