HTML5(七)-SVG基礎入門

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

們在后臺編輯器添加內容的時候，需要上傳多張圖片，為了美化這些圖片顯示效果，想起了給圖片增加陰影和圓角，由于圖片是在后臺編輯上傳的，沒辦法直接定義樣式，后面想到兩種解決方案，分享一下。

一種解決方案就是通過寫js或jquery代碼，然后配合著正側表達式，用正側表達式查找你內容里的Img圖片，再用jquery或js代碼給img添加css代碼即可，具體的代碼如下：

        <script type="text/javascript">
            function imgTagAddStyle(htmlstr){
		//正則匹配所有img標簽
		//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
		//正則匹配不含style="" 或 style='' 的img標簽
		var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
		//給不含style="" 或 style='' 的img標簽加上style=""
		htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
		//console.log("增加style=\"\"后的html字符串："+htmlstr);
		//正則匹配含有style的img標簽
		var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
		//在img標簽的style里面增加css樣式(這里增加的樣式：display:block;max-width:100%;
          //height:auto;border:5px solid red;)
		htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;
                              height:auto;border:5px solid red;$3");
		//console.log("在img標簽的style里面增加樣式后的html字符串："+htmlstr);
		return htmlstr;
	    }
        var str0 = "<div style=\"background-color:green;width:500px;\">
        <p>are you ok?</p><img style=\"border:1px solid #ff0000;\" 
src=\"https://iph.href.lu/100x100\" alt=\"\" />hello<span>the
          <IMG src='https://iph.href.lu/100x100'></span><span style=\"font-size:20pt;\">
        我是大神</span></div>";
	console.log("原始html字符串："+str0);
	var s = imgTagAddStyle(str0);
	document.getElementById("demo").innerHTML=s;

另外一種解決方案是，直接使用CSS代碼全局樣式，具體方法是，先給外部一個class標簽，再給這個標簽下的img 全局定義一個樣式，也能解決，這種方案更簡單，更好用，具體的代碼如下：

/*內容圖片加陰影*/
.article_content img{ border-radius: 5px 5px 5px 5px;object-fit: contain;box-shadow: 
#84A1A8 0px 10px 15px;}

border-radius是給img圖片加圓角，boject-fit:對圖片進行剪切，保留原始比例,box-shadow對圖片增加陰影。

具體的效果如下圖：

歡迎關注云碼素材，交流分享! 云碼素材原創作品，更多精品資源下載，技術分享請關注，私信云碼素材！

平時開發中，有時候會碰到下面這種“弧形”樣式，主要分為“內凹”和“外凸”兩種類型，如下

該如何實現呢？或者想一下，有哪些 CSS 屬性和“弧形”有關？下面介紹 3 種方式，一起看看吧

一、border-radius

通常情況下，我們用border-radius都是這樣

div{
  border-radius: 20px;
}

這樣表示 4 個角都是圓角，并且是標準的正圓

其實，border-radius還支持斜杠的寫法，比如

div{
  border-radius: 20px / 10px;
}

這表示，圓角是一個x半徑為20px，y半徑為10px的橢圓，如下

放大來看，其實是這樣的

進一步，我們將x半徑設置成50%，這樣就能得到一個完整的弧形了

div{
  border-radius: 50% / 20px;
}

效果如下

這樣就得到了“外凸”的弧形了，是不是很容易？

至于“內凹”弧形，單純的border-radius表示無能為力，可以看接下來的方式

二、偽元素+border-radius

這個其實大多數同學都能想到的方式，一個矩形和一個橢圓組合起來，不就是一個弧形卡片了嗎？原理非常簡單

用代碼實現就是

div{
  position: relative;
}
div::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 20px;
  border-radius: 100%;
  background: inherit; /* 繼承父級背景 */
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
}

效果如下（虛線表示偽元素的邊緣）

用偽元素的好處是，可以隨意控制弧度的大小和位置，這個是border-radius所不能比的

通過overflow:hidden裁剪多余部分，可以得到一個邊緣比較“鋒利”的弧形，如下所示

另外，用偽元素還能實現“內凹”的效果，不過這需要反過來思考，什么意思呢？之前是給偽元素加的背景，現在需要加在偽元素的外圍，這里用box-shadow實現，原理如下

用代碼實現就是

div{
  background: none;
  overflow: hidden;
}
div::after{
  content: '';
  background: none;
  box-shadow: 0 0 0 9999vh #FFE8A3; /*足夠大的陰影*/
  z-index: -1;
}

效果如下（虛線表示偽元素的邊緣）

三、徑向漸變

提到圓弧，還可以想到徑向漸變，沒錯，這里通過徑向漸變也能輕易實現弧形卡片效果。

先來看“外凸”的，其實思路和偽元素一樣，先拆分，一個橢圓和一個矩形，對應的就是徑向漸變（radial-gradient）和線性漸變(linear-gradient)，如下

用代碼實現就是

div{
  background: 
    radial-gradient(closest-side, #9747FF 100%,transparent 0) center bottom/100% 20px no-repeat,
    linear-gradient(#FFE8A3, #FFE8A3) 0 0/100% calc(100% - 10px) no-repeat;
}

效果如下（紫色部分是徑向漸變）

再來看“內凹”的弧形，其實也和偽元素思路類似，只不過這里需要繪制一個足夠大的漸變，從透明到純色的徑向漸變，示意如下

調整好漸變中心點，用代碼實現就是

div{
  background: radial-gradient(50% 10px at center bottom, transparent 100%,#FFE8A3 0) center bottom;
}

效果如下（全部都是徑向漸變繪制）

當然你也可以隨意改變徑向的弧度和大小，來實現各種不同的效果。

以上所有demo都可以查看以下在線鏈接

CSS radius layout (codepen.io)

四、優缺點總結

以上就是本文的全部內容了，共介紹了 3 種不同的方式，下面總結一下各自優缺點

border-radius 支持斜杠語法，可以單獨控制圓弧的x、y半徑，實現“外凸”圓弧最簡單，缺點是圓弧不能自定義弧度，也不能實現“內凹”效果
偽元素最符合常規思維，可以解決以上問題，缺點是需要占用偽元素，略微麻煩
漸變實現和偽元素拼接思路類似，缺點是語法復雜，需要熟練掌握漸變語法

作者：XboxYan
鏈接：https://juejin.cn/post/7308434314777788426

在線咨詢

上一篇：JS｜7種JavaScript代碼調試的方法
下一篇：6.HTML 標題、段落和文本格式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5(七)-SVG基礎入門

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

一、border-radius

二、偽元素+border-radius

三、徑向漸變

四、優缺點總結

您的項目需求