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

三、径向渐变

四、优缺点总结

您的项目需求