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次曲线等。

点个关注，下篇更精彩！

tml2pdf

pdfbox

PDFBox是一个Java库，可用于创建，修改和提取PDF文件的内容。它是一个Apache软件基金会的项目，使用Apache License 2.0许可证。
PDFBox提供了一组API，可用于提取文本和图像，添加和删除页面，提取PDF元数据和加密PDF文件等。

主要依赖

        <!-- 将 html 转换为 xml 工具库 -->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.17.1</version>
        </dependency>

        <!-- 第三方 pdfbox 包装库,提供 html 转 pdf 功能 -->
        <dependency>
            <groupId>com.openhtmltopdf</groupId>
            <artifactId>openhtmltopdf-pdfbox</artifactId>
            <version>1.0.10</version>
        </dependency>

测试代码

        // 获取 java 版本
        String version = System.getProperty("java.specification.version");

        // 获取系统类型
        String platform = System.getProperty("os.name", "");
        platform = platform.toLowerCase().contains("window") ? "win" : "linux";

        // 当前程序目录
        String current = System.getProperty("user.dir");

        System.out.println(String.format("current=%s", current));

        // html 文件路径
        File index = Paths.get(current, "..", "index.html").toFile();
        if (!index.exists()) {
            System.out.println(String.format("file not exist,file=%s", index.getAbsolutePath()));
            return;
        }

        try {
            Document doc = Jsoup.parse(index, "UTF-8");
            // 补全标记
            doc.outputSettings().syntax(Document.OutputSettings.Syntax.xml);

            File file = Paths.get(current, String.format("java%s_%s.pdf", version, platform)).toFile();
            FileOutputStream stream = new FileOutputStream(file);

            PdfRendererBuilder builder = new PdfRendererBuilder();

            // NOTE 字体问题,文档中出现过的字段,需要手动加载字体
            builder.useFont(Paths.get(current, "..", "fonts", "simsun.ttc").toFile(), "SimSun");
            builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "font-test");
            builder.useFont(Paths.get(current, "..", "fonts", "msyh.ttc").toFile(), "Microsoft YaHei UI");

            // NOTE 设置根目录
            String baseUrl = Paths.get(current, "..").toUri().toString();
            builder.withHtmlContent(doc.html(), baseUrl);

            builder.toStream(stream);
            builder.run();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

效果预览

pdfbox-demo/java1.8_win.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

pdfbox-demo/java11_linux.pdf · yjihrp/linux-html2pdf-demo - Gitee.com

实用工具

# 查看 pdf 内部结构
java -jar pdfbox-app debug path-to-pdf/test.pdf
java -jar debugger-app path-to-pdf/test.pdf

测试结果

下一篇 5-LINUX HTML 转 PDF-selenium

、垂直对齐

如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：

.verticalcenter{
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
}

2、伸展一个元素到窗口高度

在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:

html,
body {
 height: 100%;
}

然后将100%应用到任何元素的高：

div { height: 100%;}

3、基于文件格式使用不同的样式

为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：

a[href^="http://"]{
 padding-right: 20px;
 background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
 padding-right: 20px;
 background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
 padding-right: 20px;
 background: url(pdf.png) no-repeat center right;
}

4、创建跨浏览器的图像灰度

灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter></svg>

为了跨浏览器，会用到filter属性：

img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}

5、背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。

button {
 background-image: linear-gradient(#5187c4, #1c2f45);
 background-size: auto 200%;
 background-position: 0 100%;
 transition: background-position 0.5s;
} 
button:hover {
 background-position: 0 0;
}

6、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加 white-space: nowrap;能让文本正确的换行

td { white-space: nowrap;}

213126486编号：悟空

7、只在一边或两边显示盒子阴影

如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：

.box-shadow {
 background-color: #FF8020;
 width: 160px;
 height: 90px;
 margin-top: -45px;
 margin-left: -80px;
 position: absolute;
 top: 50%;
 left: 50%;
}
.box-shadow:after {
 content: "";
 width: 150px;
 height: 1px;
 margin-top: 88px;
 margin-left: -75px;
 display: block;
 position: absolute;
 left: 50%;
 z-index: -1;
 -webkit-box-shadow: 0px 0px 8px 2px #000000;
 -moz-box-shadow: 0px 0px 8px 2px #000000;
 box-shadow: 0px 0px 8px 2px #000000;
}

8、包裹长文本

如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。

简单的CSS代码就能在容器中调整文本：

pre { white-space: pre-line; word-wrap: break-word;}

9、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现。

.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}

10、用CSS动画实现省略号动画

这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。

.loading:after {
 overflow: hidden;
 display: inline-block;
 vertical-align: bottom;
 animation: ellipsis 2s infinite;
 content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
 from {
 width: 2px;
 }
 to {
 width: 15px;
 }
}

11、样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

12、典型的CSS清除浮动

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

13、新版清除浮动（2011）

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

14、跨浏览器的透明

.transparent { filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */}

15、CSS引用模板

blockquote {
 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: .5em 10px;
 quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
 color: #ccc;
 content: open-quote;
 font-size: 4em;
 line-height: .1em;
 margin-right: .25em;
 vertical-align: -.4em;
}
blockquote p {
 display: inline;
}

16、个性圆角

#container {
 -webkit-border-radius: 4px 3px 6px 10px;
 -moz-border-radius: 4px 3px 6px 10px;
 -o-border-radius: 4px 3px 6px 10px;
 border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
 -webkit-border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 3px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 3px;
 -moz-border-radius-bottomright: 6px;
 -moz-border-radius-bottomleft: 10px;
}

17、自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

18、为logo隐藏H1

h1 {
 text-indent: -9999px;
 margin: 0 auto;
 width: 320px;
 height: 85px;
 background: transparent url("images/logo.png") no-repeat scroll;
}

19、图片边框偏光

img.polaroid {
 background:#000; /*Change this to a background image or remove*/
 border:solid #fff;
 border-width:6px 6px 20px 6px;
 box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
 -webkit-box-shadow:1px 1px 5px #333;
 -moz-box-shadow:1px 1px 5px #333;
 height:200px; /*Set to height of your image or desired div*/
 width:200px; /*Set to width of your image or desired div*/
}

20、锚链接伪类

在线咨询

上一篇：帝国cms插件之word转html
下一篇：JMeter命令行执行+生成HTML报告

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商