1.SVGの概要
SVGは画像ファイル形式であり、スケーラブルなベクターグラフィックスを意味します。XMLに基づいており、W3Cアライアンスによって開発されました。厳密に言えば、エキサイティングで高解像度のWebグラフィックページを設計できるオープンスタンダードのベクターグラフィック言語である必要があります。ユーザーはコードを直接使用して画像を表現したり、任意のワード処理ツールでSVG画像を開いたり、コードの一部を変更して画像をインタラクティブにしたり、いつでもHTMLに挿入してブラウザで表示したりできます。
2.ベクトルとビットマップ
三、カンカンの事件を見てください
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200">
<!--脸-->
<circle cx="100" cy="100" r="90" fill="yellow" />
<!--眼睛-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black"/>
<!--嘴巴-->
<path d="M 50 140 A 60 60 0 0 0 150 140"
stroke="black" stroke-width="3" fill="none" />
</svg>
4、SVGの使用法
（1）ブラウザを直接開く;（2）HTMLでタグを使用する;（3）HTMLでSVGタグを直接使用する;（4）CSSの背景として
0、塗りつぶし、ストローク、変換
1、長方形
<rect x="100" y="100" width="100" fill='#aef' stroke="#fea" stroke-width="10" height="100" rx="100"></rect>
2.サークル
<circle cx="100" cy="100" r=50 fill="green" stroke="blue" stroke-width="10"></circle>
3.楕円
<!-- cx/cy:绘制椭圆的位置 rx/ry:椭圆的半径 -->
<ellipse cx="150" cy="250" fill="red" rx="50" ry="20"></ellipse>
4.ライン
<!--
x1 y1 起点
x2 y2 终点
必须填充线条颜色 stroke:线条颜色,必须填充.
-->
<line x1="50" y1="150" x2="200" y2="150" stroke="green" stroke-width="3"></line>
5.ポリゴン
<!--
full-rule 属性为如何确定一个形状的内部(即可以被填充的区域) 提供了两个可选值
evenodd不会填充
nonzero默认值 会填充
-->
<polygon points="275 80 190 345 414 185 130 185 360 345" stroke="red" fill-rule="evenodd"></polygon>
！[ここに画像の説明を挿入]（https://img-blog.csdnimg.cn/20201208123927518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNz3G4ubmVk0LFF_color,color,color
5、SVG座標系
1.キャンバス
2. Windows（ViewPort）
ウィンドウのサイズを制御するための幅、高さ
3.視野（ViewBox）
世界は無限であり、視野は世界を観察するための長方形の領域です
<!-- svg默认宽高 300*150
viewBox的宽高不能是0,是0的话画布上的图形 都是不可见
-->
<svg width="200" height="150" viewBox="0 0 0 0">
<Rect x="10" y="5" width="20" height="15"></Rect>
</svg>
4、preserveAspectRatio
2つの部分に分かれています：
配置:( viewBox）とビューポート（viewPort）
x軸の配置：XMinの視野とウィンドウ-左の配置; XMidの中央の配置; XMax：右の配置
y軸の配置：YMinの視野とビュー-上端アラインメント; YMid中心点アラインメント; YMax下端アラインメント
アスペクト比を保存する方法を
満たす：アスペクト比ズームウィンドウを視野
スライスに適応させる：プロポーションの方向が拡大されて塗りつぶされる間、アスペクト比を維持する
6、色、グラデーション、塗りつぶし
RGBカラー
HSL
HSLは、円筒座標系でのRGBカラーモデルのポイントの表現です。これらの2つの表現は、カルテシアン座標系に基づく幾何学的構造RGBよりも直感的になるように努めています。
透明性
線形勾配
<svg width="300" height="300">
<!--
id="" 渐变定义的唯一名称
定义渐变开始和结束位置
x1="0%" y1="0%" x2="100%" y2="0%"
渐变的颜色范围,可以由两种或两种以上的颜色组成,一个颜色通过一个stop标签来规定
-->
<defs id="">
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: rgb(255,255,0);"></stop>
<stop offset="100%" style="stop-color: rgb(255,0,0);"></stop>
</linearGradient>
</defs>
<ellipse cx="200" cy="200" rx="85" ry="55" style="fill:url(#orange_red)"></ellipse>
</svg>
放射状勾配
radiusGradient
セブン、SVGパス、テキスト
1.gラベル
<svg width="100%" height="100%">
<!-- g标签：组合元素 设元素的公用属性 transform -->
<g transform="translate(250,250)" fill="none" stroke="blue">
<circle r="50" ></circle>
<circle r="100" ></circle>
<circle r="150" ></circle>
<circle r="200" ></circle>
<circle r="250" ></circle>
</g>
</svg>
2.パスタグ
パラメータはスペースまたはコンマで区切ることができますが、1つの例外があります。つまり、次の値は負の数です。
<!--路径:移动类
M = moveTo 将画笔移动到指定的坐标
直线类：
L = lineTo 绘制直线指定坐标
H 画水平直线到指定坐标
V 画垂直直线到指定坐标
大写表示，坐标系中的绝对坐标，小写表示相对坐标，也就是相对当前画笔所在点-->
<svg width="100%" height="100%">
<path d="
M30,100 L270 300
L270,300 H270
"
stroke="black" fill="none" stroke-width="10"
></path>
<!-- <rect x="30" y="100" width="5" height="5" fill="red"></rect> -->
</svg>
3.ベジエ曲線
<!-- 绘制三次贝塞尔曲线
c:三次贝塞尔曲线(x1,y1,x2,y2,x,y) x1,y1控点1 x2,y2控点2 x,y终点
s:平滑的贝塞尔曲线(自动对称一个控制点)
与第一条贝塞尔曲线相连 第一个控点为前一条曲线 第二个空点的对称点
绘制二次贝塞尔曲线
Q:二次白塞尔曲线(x1,y1,x,y) x1,y1控制点 x,y结束点
T:一次贝塞尔曲线(x,y) 结束点
与前一条贝塞尔曲线 相连的
-->
4.滑らかな曲線
5.アークコマンド
写真を見て話してください
ケース分析
<svg width="100%" height="100%">
<!--
A/a(rx,ry,xr,laf,sf,x,y)
①rx:x半径 ry:y半径
②椭圆x轴与水平的夹角 0
③large-arc-flag(1:大角度弧线 0小角度),sweep-flag:(1:顺时针 0:逆时针)
0,0 :小角度 逆时针到终点---0,1 :小角度 顺时针到终点
1,0 :大角逆时针---1,1 :大角顺时针
④x:终点---y:终点
-->
<path d="
M125,75
a100,50 0 1,1 100,50
Z
"
stroke="black" fill="none" stroke-width="2"
></path>
<rect x="100" y="200" width="5" height="5" fill="red"></rect>
</svg>
6.SVGテキスト
（1）基点（x、y）に対するテキストアンカーの位置：
開始テキストは基点の右上にあります-中央のテキストは基点の真上にあります-終了テキストは基点の左上にあります
（2）長さ調整はテキストの収縮を調整しますまたは、textLength属性と組み合わせて使用される展開方法
①単一テキストのサイズの間隔は変更されず、間隔を縮小または拡大するだけです②spacingAndGlyphsはテキストと間隔を拡大または縮小します
<svg id="" width="100%" height="100%">
<text x="20" y="35" fill="blue">
追梦
</text>
<!--textlength:文本相对基点（x，y）的位置 -->
<text x="70" y="35" fill="blue" textlength="50">
多伦
</text>
<!-- lengthAdjust：调整文本的收缩或扩张方式 -->
<text x="140" y="35" fill="blue" textlength="50" lengthAdjust="spacingAndGlyphs">
疯狗
</text>
<rect x="20" y="35" width="5" height="5" fill="red"></rect>
</svg>
<text x="10" y="15" rotate="45">123
<tspan x="30" y="40" fill="blue">追梦</tspan>
<tspan x="30" y="40" dx="20" dy="20"fill="blue">疯狗</tspan>
<tspan x="30" y="40" dx="40" dy="40"fill="blue">梦缘</tspan>
</text>
6.ブラシパターン
pattern属性は、入力フィールドの検証に使用されるパターンを指定します。パターンは規則的な表現を指します
<form action="/example/html5/demo_form.asp" method="get">
国家代码：
<input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的国家代码" />
<input type="submit" />
</form>
<div id="wrap">
<svg width="100%" height="100%">
<!--
pattern 标签 图案填充标签，
patternUnits ：objectBoundingBox
objectBoundingBox:默认值 x、y w、h都是站外框的值的百分比。比如pattern宽高枝都是为1时,相当于
pattern图的百分之百
userSpaceOnUse:x,y,w,h表示的值都是当前用户坐标系的值。这些值是没有缩放的
都是绝对值,将width="80" height="60"。相当于 0.2,0.2
-->
<defs>
<pattern id="grid" x="100" y="100" patternUnits="userSpaceOnUse" width="80" height="60">
<circle cx="10" y="10" r="5" fill="red"></circle>
<!-- 绘制三角形 -->
<polygon points="30 10 60 50 0 50" fill="green"></polygon>
</pattern>
</defs>
<rect x="100" y="100" width="400" height="300" fill="url(#grid)" stroke="blue"></rect>
</svg>
</div>
概要：デフォルトでは、デフォルト値が使用されますが、patternUnits = "userSpaceOnUse"を追加した後にのみ、通常どおりに使用できます