SVG基本使用（二常用屬性、繪製路徑/文本/超鏈接/圖片、結構標籤）

一、SVG常用屬性

1.fill: 修改填充顏色
2.fill-opacity: 0~1 設置填充顏色的透明度
3.stroke: 修改描邊顏色
4.stroke-width: 修改描邊寬度
5.stroke-opacity: 0~1 設置描邊透明度
6.stroke-linecap: butt(兩邊都沒有)/square（兩邊爲方塊）/round （兩邊爲圓形）設置線段兩端帽子
7.stroke-dasharray: 設置虛線
8.stroke-dashoffset: 設置虛線偏移位
整數：往左邊偏移
負數：往右邊偏移
9.stroke-linejoin: miter（直角）/bevel（切角）/round（圓角）設置折線轉角樣式

注意點：在SVG這些所有的常用屬性都可以直接在CSS中使用的。

<svg width="500" height="500">
    <rect x="100" y="0" width="50" height="50" fill="#aef"></rect>
    <rect x="100" y="0" width="50" height="50" fill="#aef"></rect>
    <rect x="100" y="55" width="50" height="50" fill="#aef" fill-opacity="0.2"></rect>
    <line x1="100" y1="110" x2="200" y2="110" stroke="#aef"></line>
    <line x1="100" y1="130" x2="200" y2="130" stroke="#aef" stroke-width="10"></line>
    <line x1="100" y1="150" x2="200" y2="150" stroke="#aef" stroke-width="10" stroke-opacity="0.5"></line>
    <line x1="100" y1="170" x2="200" y2="170" stroke="#aef" stroke-width="10" stroke-linecap="butt"></line>
    <line x1="100" y1="190" x2="200" y2="190" stroke="#aef" stroke-width="10" stroke-linecap="square"></line>
    <line x1="100" y1="230" x2="200" y2="230" stroke="#aef" stroke-width="10" stroke-dasharray="10 20"></line>
    <line x1="100" y1="250" x2="200" y2="250" stroke="#aef" stroke-width="10" stroke-dasharray="10" stroke-dashoffset="15"></line>
    <line class="line" x1="200" y1="270" x2="250" y2="270"></line>

    <polyline points="300 50 400 50 400 100" stroke="#aef" stroke-width="10" stroke-linejoin="miter"></polyline>
    <polyline points="300 160 400 160 400 260" stroke="#aef" stroke-width="10" stroke-linejoin="round"></polyline>
    <polyline points="300 270 400 270 400 370" stroke="#aef" stroke-width="10" stroke-linejoin="bevel"></polyline>
</svg>

二、繪製路徑

1.什麼是SVG路徑
SVG路徑老牛了, 可以繪製任意圖形, 只不過比較複雜而已
2.繪製直線
M = moveto 起點
L = lineto 其它點
H = horizontal lineto 當前點的Y和上一個點Y相等
V = vertical lineto 當前點的X和上一個點X相等
Z = closepath 關閉當前路徑
- 路徑指令注意點
  大寫字母是絕對定位, 小寫字母是相對定位
  絕對定位: 寫什麼位置就是什麼位置
  相對定位: 相對上一次的位置, 在上一次位置基礎上做調整

<svg width="500" height="500">
    <!--直線-->
    <path d="M 100 10 L 300 10" stroke="#adc" stroke-width="5"></path>
    <path d="M 100 200 l 300 200" stroke="#adc" stroke-width="5"></path>//相對位置。
    <!--折線-->
    <path d="M 100 20 L 300 20 L 300 60" stroke="#adc" fill="none" stroke-width="5"></path>
    <!--繪製簡單圖形-->
    <path d="M 100 80 L 200 80 L 200 100 Z" stroke="#adc" fill="none" stroke-width="5"></path>
    <path d="M 100 150 H 200 V 200 Z" stroke="#adc" fill="none" stroke-width="5"></path>
    </svg>

3、繪製圓弧
A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 從當前位置繪製弧線到指定位置
rx (radiux-x): 弧線X半徑
ry (radiux-y): 弧線Y半徑
xr (xAxis-rotation): 弧線所在橢圓旋轉角度
laf(large-arc-flag): 是否選擇弧長較長的那一段
sf (sweep-flag): 是否順時針繪製
x,y: 弧的終點位置

    <path d="M 100 20 A 100 50 0 0 0 200 80" stroke="#afc" fill="none" stroke-width="5"></path>
    <path d="M 100 140 A 100 50 0 1 0 200 200" stroke="#afc" fill="none" stroke-width="5"></path>
    <path d="M 100 260 A 100 50 0 0 1 200 320" stroke="#afc" fill="none" stroke-width="5"></path>
    <path d="M 100 380 A 100 50 0 1 1 200 440" stroke="#afc" fill="none" stroke-width="5"></path>

S = smooth curveto
S(x2, y2, x, y) 從當前位置光滑的繪製三次貝塞爾曲線到指定位置

T = smooth quadratic Bézier curveto
T(x, y) 從當前位置光滑的繪製二次貝塞爾曲線到指定位置

4、繪製貝塞爾曲線
4.1、什麼是貝塞爾曲線（理解貝塞爾曲線）
4.2、貝塞爾曲線應用場景：水滴形變效果
4.3、繪製：Q = quadratic Bézier curve
Q(x1, y1, x, y) 從當前位置繪製二次貝塞爾曲線到指定位置
x1,y1: 控制點位置
x,y: 終點位置

C = curveto
C(x1, y1, x2, y2, x, y) 從當前位置繪製三次貝塞爾曲線到指定位置
x1, y1: 控制點1位置
x2, y2: 控制點2位置
x, y: 終點位置

<path d="M 100 100 Q 150 50 200 100" stroke="#adf" fill="none"></path><!--二次-->
<path d="M 200 200 C 200 100 200 50 300 100" stroke="#adf" fill="none"></path><!--三次-->

5.繪製路徑文本
繪製路徑文本步驟
1.定義一個路徑。
2.使用dets隱藏路徑
3.使用textPath標籤告訴文字，使用哪一個路徑繪製。
注意點：若繪製路徑文本，那麼超出路徑範圍的文本不會被繪製出來

<svg width="500" height="500">
    <defs>
        <path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="#adc" fill="none"></path>
    </defs>
    <text>
        <textPath xlink:href="#myPath">知道啦!!!</textPath>
    </text>
</svg>

三、繪製文本

3.1.繪製文本標籤：text
3.2.繪製文本屬性：
x/y:繪製位置（默認以文字的左下角作爲參考點）
style:
font-size:文字大小
fill:實心文字
stroke:空心文字
text-anchor:文字水平方向的對齊方式
start：文字最左邊同參考點對齊
end：文字最右邊同參考點對齊
middle：文字中間同參考點對齊
dominant-baseline:文字垂直方向的對齊方式
middle：文字中間同參考點對齊
text-after-edge：文字底部同參考點對齊
text-before-edge：文字頂部同參考點對齊
dx：指定當前文字同前一個文字水平方向的間隙
dy：指定當前文字同前一個文字垂直方向的間隙（若後面的文字沒有設置，就會繼承前面一個文字的垂直位置）
3.3.繪製多行文本

<text fill="yellow"><!--可以統一設置樣式-->
     <tspan x="100" y="100" fill="red">gg</tspan><!--可以分別設置樣式-->
     <tspan x="100" y="150">&</tspan>
     <tspan x="100" y="200">jj</tspan>
</text>

四、繪製超鏈接

可以給任意內容添加超鏈接, 只需要用超鏈接a標籤包裹起來即可
a標籤使用的屬性：

xlink:href: 指定鏈接地址
xlink:title: 指定鏈接提示
target: 指定打開方式

<svg width="500" height="500">
    <a xlink:href="鏈接地址" xlink:title="知道啦" target="_blank">
        <!--文本添加超鏈接-->
        <text x="50" y="50">知道啦~~~~</text>
        <!--圓繪製超鏈接-->
        <circle cx="200" cy="200" r="50" fill="#7fa"></circle>
    </a>
</svg>

五、繪製圖片

使用image繪製圖片常用屬性

xlink：圖片地址
width/height：圖片大小
x/y：圖片繪製位置
注意：
html的圖片標籤爲img。svg的圖片標籤爲image
默認情況下指定的圖片有多大，就繪製多大
當使用width/height指定的尺寸和圖片實際的尺寸不同時，高度填滿，寬度等比拉伸

<svg width="500" height="500">
    <image xlink:href="圖片地址" width="200" height="200" x="100" y="100"></image>
</svg>

六、結構標籤

1.g結構元素

g是group的縮寫, 可以將多個元素放到一個g標記中, 這樣就組成了一個組,以便統一操作，比如旋轉，縮放或者添加相關樣式等
對g標記設置的所有樣式都會應用到這一組所有的元素中

<svg width="500" height="500">
<!--統一設置圓的顏色:使用g-->
    <g fill="#6df" id="myGroup">
            <circle cx="50" cy="50" r="50"></circle>
            <circle cx="50" cy="100" r="30"></circle>
            <circle cx="50" cy="150" r="15"></circle>
    </g>
</svg>

2.use

g結構元素封裝的圖形還可以通過元素進行復制使用
xlink:href=""：複用誰？

<svg width="500" height="500">
    <!--複用g標籤的元素-->
    <g id="myGroup">
            <circle cx="50" cy="50" r="50"></circle>
            <circle cx="50" cy="100" r="30"></circle>
            <circle cx="50" cy="150" r="15"></circle>
        </g>
        <use xlink:href="#myGroup" x="200" fill="#4fa"></use>
</svg>

3.defs

g封裝的元素默認是可見的, 如果僅僅是需要定義一組模板, 將來需要用到時候才顯示, 那麼就可以使用defs

<svg width="500" height="500">
    <!--g標籤的元素默認不顯示-->
   <defs>
        <g id="myGroup">
            <circle cx="50" cy="50" r="50"></circle>
            <circle cx="50" cy="100" r="30"></circle>
            <circle cx="50" cy="150" r="15"></circle>
        </g>
    </defs>
    <use xlink:href="#myGroup" x="50" fill="#5df"></use>
    <use xlink:href="#myGroup" x="200" fill="#4fa"></use>
</svg>

4.symbol

symbol兼具的分組功能和初始不可見的特性,
symbol能夠創建自己的視窗，所以能夠應用viewBox和preserveAspectRatio屬性。

<svg width="500" height="500">
    <symbol>
        <g id="myGroup">
            <circle cx="50" cy="50" r="50"></circle>
            <circle cx="50" cy="100" r="30"></circle>
            <circle cx="50" cy="150" r="15"></circle>
        </g>
    </symbol>
    <use xlink:href="#myGroup" x="50" fill="#5df"></use>
</svg>

SVG基本使用（二常用屬性、繪製路徑/文本/超鏈接/圖片、結構標籤）

一、SVG常用屬性

二、繪製路徑

三、繪製文本

四、繪製超鏈接

五、繪製圖片

六、結構標籤

1.g結構元素

2.use

3.defs

4.symbol

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

SVG基本使用（一、基本概念、使用方法、繪製矩形/圓/橢圓/直線/折現/多邊形/）

【Vue報錯】did you register the component correctly

webpack中常用loader及plugins（插件）

SVG基本使用（四、動畫、動畫常用屬性、複合動畫/往返動畫/形變動畫/路徑動畫、腳本編程

ES6模塊化使用方式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

SVG基本使用（二 常用屬性、繪製路徑/文本/超鏈接/圖片、結構標籤）

一、SVG常用屬性

二、繪製路徑

三、繪製文本

四、繪製超鏈接

五、繪製圖片

六、結構標籤

1.g結構元素

2.use

3.defs

4.symbol

SVG基本使用（二常用屬性、繪製路徑/文本/超鏈接/圖片、結構標籤）