一、svg標(biāo)簽

1. svg

• svg標(biāo)簽相當(dāng)于畫(huà)布。
• 可以在標(biāo)簽中定義寬和高

<svg width="100" height="100"></svg>

2. g

• g 標(biāo)簽可以對(duì)svg元素進(jìn)行分組，分組后可以統(tǒng)一配置屬性。

<svg>
	<g>...</g>
</svg>

二、描邊屬性

• stroke：筆畫(huà)顏色屬性，值為顏色值
• strike-width：筆畫(huà)寬度屬性，值為數(shù)值
• stroke-linecap：筆畫(huà)筆帽屬性
  • butt：默認(rèn)值，沒(méi)有線帽。
  • round：圓形線帽。
  • square：方形線帽。
• stroke-dasharray：筆畫(huà)虛線屬性，值為數(shù)組序列，至少2個(gè)值。

<path d="M175 200 l 150 0" stroke="gray" stroke-dasharray="20,10,3,3" stroke-width="3" fill="none"></path>

• 所有的描邊屬性都可以應(yīng)用于線條、文本、元素輪廓。
• 下面會(huì)大量運(yùn)用。

三、模糊和陰影效果

• 給 svg 添加特殊效果需要添加 <filter></filter> 實(shí)現(xiàn)，且在 <defs></defs> （definitions）中定義。
• filter 里面包含一個(gè)或多個(gè)效果（過(guò)濾器）濾鏡。
• filter 屬性：
  • id：識(shí)別過(guò)濾器。
  • x：濾鏡起始點(diǎn)x坐標(biāo)
  • y：濾鏡起始點(diǎn)y坐標(biāo)
  • width：濾鏡寬
  • height：濾鏡高

1. 模糊

• feGaussianBlue 定義高斯模糊。
• 定義在 filter 里面。
• feGaussianBlue 屬性：
  • stdDeviation ：定義模糊數(shù)量，值為數(shù)值，值越大越模糊。

<svg width="100" height="100">
    <defs>
        <filter x="0" y="0" id="f1">
            <feGaussianBlur stdDeviation="15"></feGaussianBlur>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="pink" stroke-width="3" fill="skyblue" filter="url(#f1)"></rect>
</svg>

2. 陰影效果

• 陰影效果通過(guò) feOffset 和feBlend 實(shí)現(xiàn)。
• 定義在 filter 里面。
• feOffset 定義偏移，屬性：
  • dx：陰影在x軸上的偏移，值為數(shù)值。
  • dy：陰影在y軸上的偏移，值為數(shù)值。
  • in：表示陰影圖像的來(lái)源。（SourceAlpha黑色陰影，SourceGraphic圖像陰影）
• feBlend在偏移圖像上混合原始圖像，屬性：
  • in：值為SourceGraphic。

<svg width="140" height="140">
    <defs>
        <filter x="0" y="0" width="200" height="200" id="f2">
            <feOffset in="SourceAlpha" dx="0" dy="0"/>
            <feGaussianBlur stdDeviation="5" />
            <feBlend in="SourceGraphic"/>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect>
</svg>

四、線性漸變和徑向漸變

1. 線性漸變

• 線性漸變通過(guò) <linearGradient></linearGradient> 實(shí)現(xiàn)，且在 <defs></defs> 中定義。
• linearGradient屬性：
  • id
  • x1：線性漸變開(kāi)始位置x坐標(biāo)
  • y1：線性漸變開(kāi)始位置y坐標(biāo)
  • x2：線性漸變結(jié)束位置x坐標(biāo)
  • y2：線性漸變結(jié)束位置y坐標(biāo)
• 線性漸變可以由多個(gè)顏色組成，每個(gè)顏色用一個(gè) <stop /> 指定。
• stop 屬性：
  • offset：開(kāi)始和結(jié)束位置，值為百分比
  • stop-color：顏色。

<svg width="400" height="150">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="rgb(255,255,0)" ></stop>
            <stop offset="100%" stop-color="rgb(255,0,0)" ></stop>
        </linearGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
    <text fill="white" font-size="45" x="160" y="85">SVG</text>
</svg>

2. 徑向漸變

• 徑向漸變通過(guò) <radialGradient></radialGradient> 實(shí)現(xiàn)。
• 屬性：
  • id
  • cx, cy，r：定義最外面的圓（漸變結(jié)束圓圓心橫坐標(biāo)、縱坐標(biāo)、半徑）
  • fx，fy：定義最里面的圓（漸變起始點(diǎn)橫坐標(biāo)、縱坐標(biāo)）

<svg width="400" height="150">
    <defs>
        <radialGradient id="grad" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
            <stop offset="0%" stop-color="white" ></stop>
            <stop offset="100%" stop-color="blue" ></stop>
        </radialGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
</svg>

五、繪制

1. 內(nèi)置形狀元素

• 元素：矩形 rect、圓形 circle、橢圓 ellipse、線條 line、多線條 polyline、多邊形 ploygon、路徑 path。
• 坐標(biāo)系
  

2. 繪制矩形

• 使用標(biāo)簽 rect。<rect />
• 屬性：
  • 寬度 width
  • 高度 height
  • 填充色 fill
  • 筆畫(huà)顏色 stroke
  • 筆畫(huà)寬度 stroke-width。

<svg width="400" height="400">
    <rect width="200" height="100" fill="skyblue" stroke-width="3" stroke="pink"/>
</svg>

• （接上）屬性：
  • x：左邊位置
  • y：頂部位置
  • fill-opacity：填充不透明度，為0-1
  • stroke-opacity：筆畫(huà)不透明度。
  • opacity：整個(gè)矩形的不透明度。

<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5"/>
</svg>

• （接上）屬性：
  • rx：圓角x軸方向上的半徑長(zhǎng)度。
  • ry：圓角y軸方向上的半徑長(zhǎng)度。

<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5" rx="20" ry="20"/>
</svg>

3. 繪制圓形

• 使用標(biāo)簽 <circle/>
• 屬性：
  • cx：圓心x軸坐標(biāo)，默認(rèn)0
  • cy：圓心y軸坐標(biāo)，默認(rèn)0
  • r：圓半徑。
  • stroke、stroke-width、fill。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="skyblue" stroke-width="3" fill="pink"/>
</svg>

4. 繪制橢圓

• 使用標(biāo)簽 <ellipse />
• 屬性：
  • cx、cy。
  • rx：水平半徑
  • ry：垂直半徑。

<svg width="500" height="140">
    <ellipse rx="100" ry="50" cx="200" cy="80" stroke-width="3" stroke="pink" fill="skyblue" />
</svg>

• 堆疊橢圓

<svg width="500" height="140">
    <ellipse rx="220" ry="30" cx="240" cy="100" fill="pink" />
    <ellipse rx="190" ry="20" cx="220" cy="70" fill="skyblue" />
    <ellipse rx="170" ry="15" cx="210" cy="45" fill="#fff2df" />
</svg>

• 空心橢圓

<svg width="500" height="100">
    <ellipse cx="240" cy="50" rx="220" ry="30" fill="pink"></ellipse>
    <ellipse cx="220" cy="50" rx="190" ry="20" fill="white"></ellipse>
</svg>

5. 繪制線條

• 使用標(biāo)簽 <line />
• 屬性：
  • x1：起點(diǎn)x坐標(biāo)
  • y1：起點(diǎn)y坐標(biāo)
  • x2：終點(diǎn)x坐標(biāo)
  • y2：終點(diǎn)y坐標(biāo)

<svg>
    <line x1="0" y1="0" x2="200" y2="200" stroke="pink" stroke-width="2"></line>
</svg>

6. 繪制多邊形

• 使用 <polygon />
• 用于創(chuàng)建一個(gè)至少三個(gè)邊的圖形。
• 屬性：
  • points：定義每個(gè)角的（x, y）坐標(biāo)，至少三隊(duì)坐標(biāo)。

<svg width="500" height="300">
    <polygon points="200,20 250,190 160,210" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

• 繪制五角星

<svg width="500" height="300">
    <polygon points="100,10 40,198 198,78 10,78 160,198" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

7. 繪制多線條

• 使用<polyline />
• 創(chuàng)建任何只由直線組成的形狀
• 屬性：
  • points：同上

<svg width="500" height="300">
    <polyline points="100,10 40,198 198,78 10,78 160,198" fill="none" stroke="skyblue" stroke-width="3"></polyline>
</svg>

8. 繪制文本

• 使用 <text>...</text>
• 屬性
  • x：文本x坐標(biāo)
  • y：文本y坐標(biāo)
  • font-size：文本大小
  • text-anchor：對(duì)齊方式（start | middle | end）
  • stroke、stroke-width、fill

<svg width="500" height="300">
    <text x="0" y="200" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1">家人們，誰(shuí)懂啊</text>
</svg>

• （接上）屬性：
  • transform
    • rotate(旋轉(zhuǎn)角度 旋轉(zhuǎn)中心x, 旋轉(zhuǎn)中心y)。默認(rèn)（x, y）為（0, 0）。

<svg width="500" height="300">
    <text x="10" y="50" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1" transform="rotate(30 20,40)">家人們，誰(shuí)懂啊</text>
</svg>

• text 元素可以包裹多個(gè) tspan，每個(gè)tspan可以包含不同的格式和位置。
• tspan屬性：
  • x、y

<svg width="500" height="300">
    <text x="10" y="20" fill="red">
        Several lines
        <tspan x="10" y="45">First Line</tspan>
        <tspan x="10" y="70">Second Line</tspan>
    </text>
</svg>

• text標(biāo)簽可以添加鏈接。使用a包裹起來(lái)。要添加文本需要給svg添加xmlns:link屬性，屬性值固定為w3的地址。
• a 屬性：
  • xlink:href：鏈接地址
  • target：跳轉(zhuǎn)方式

<svg width="200" height="30" xmlns:link="http://www.w3.org/1999/xhtml">
    <a xlink:href="https://www.baidu.com" target="_blank">
        <text x="10" y="15" fill="red">百度</text>
    </a>
</svg>

9. 繪制路徑

• 使用 <path />
• 可以繪制任意形狀的圖形
• 屬性：
  • d：draw，定義繪制路徑的命令。命令大寫(xiě)表示絕對(duì)定位，小寫(xiě)表示相對(duì)定位。
    • 命令 M/m：moveto縮寫(xiě)，定義起點(diǎn)坐標(biāo)（x, y）
    • 命令 L/l：lineto縮寫(xiě)，繪制一條線。
    • 命令 q：quadraticBezierCurve縮寫(xiě)，繪制二次貝塞爾曲線。定義控制點(diǎn)和終點(diǎn)坐標(biāo)。
• 繪制二次貝塞爾。

<svg width="450" height="400">
    <path d="M100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M250 50 l 150 300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M175 200 l 150 0" stroke="green" stroke-width="3" fill="none"></path>
    <path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none"></path>

    <g fill="blue">
        <circle r="3" cx="100" cy="350"></circle>
        <circle r="3" cx="250" cy="50"></circle>
        <circle r="3" cx="400" cy="350"></circle>
    </g>
    <g font-size="30" fill="black" text-anchor="middle">
        <text x="100" y="350" dx="-35">A</text>
        <text x="250" y="50" dx="-10">B</text>
        <text x="400" y="350" dx="35">C</text>
    </g>
</svg>

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743024.html

到了這里，關(guān)于SVG在前端中的常見(jiàn)應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！