整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
明：SVG 雖然也是標(biāo)簽，但它不是 HTML5，標(biāo)題加了 HTML5 只是為了與 canvas 放到一起。
SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會(huì)失真。
與其他圖像比較，SVG 的優(yōu)勢有以下幾點(diǎn)：
2.1、svg 標(biāo)簽
SVG 的代碼都放到 svg 標(biāo)簽?zāi)兀琒VG 中的標(biāo)簽都是閉合標(biāo)簽，與html中標(biāo)簽用法一致。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 設(shè)置的寬高沒有帶單位，此時(shí)默認(rèn)是像素值，如果需要添加單位時(shí)，除了絕對(duì)單位，也可以設(shè)置相對(duì)單位。
使用語法：<svg viewBox=" x1,y1,width,height "></svg>
四個(gè)參數(shù)分別是左上角的橫縱坐標(biāo)、視口的寬高。表示只看SVG的某一部分，由上述四個(gè)參數(shù)決定。
使用 viewBox 之后，相當(dāng)于svg整體大小不變，只能看到 viewBox 設(shè)置部分，視覺上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時(shí)候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？
2.2.1、embed 嵌入：
使用語法：<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路徑，type 表示 embed 引入文件類型。
優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。
缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.2、object 嵌入：
使用語法：<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路徑，type 表示 object 引入文件類型。
優(yōu)點(diǎn)：所有瀏覽器都支持，支持 html、html4 和 html5。
缺點(diǎn)：不允許使用腳本。
2.2.3、iframe 嵌入：
使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路徑，width、height、frameborder 設(shè)置的大小和邊框。
優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。
缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.4、html中嵌入：
svg 標(biāo)簽直接插入 html 內(nèi)容內(nèi)，與其他標(biāo)簽用法一致。
2.2.5、連接到svg文件：
使用 a 標(biāo)簽，直接鏈接到 SVG 文件。
使用語法：<a href="line.svg">查看SVG</a>
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標(biāo)簽創(chuàng)建線條，(x1,y1)是起點(diǎn)，(x2,y2)是終點(diǎn)，stroke繪制黑線，stroke-width是線寬。
3.2、矩形 - rect
//使用語法：
<svg width="300" height="300" >
<rect
width="100" height="100" //大小設(shè)置
x="50" y="50" //可選 左上角位置，svg的左上角默認(rèn)(0,0)
rx="20" ry="50" //可選 設(shè)置圓角
stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>上述參數(shù) width、height是必填參數(shù)，x、y是可選參數(shù)，如不設(shè)置的時(shí)候，默認(rèn)為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數(shù)，不設(shè)置是矩形沒有圓角。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)定義圓心的位置，是可選參數(shù)，如果不設(shè)置默認(rèn)圓心是（0,0）。r是必需參數(shù)，設(shè)置圓的半徑。
3.4、橢圓 - ellipse
橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個(gè)半徑是相同的。
// 使用語法
<svg width="300" height="300" >
<ellipse
rx="20" ry="100" //設(shè)置橢圓的x、y方向的半徑
fill="purple" // 橢圓填充色
cx="150" cy="150" //設(shè)置橢圓的圓心 ，可選參數(shù)
></ellipse>
</svg>上述橢圓的兩個(gè)rx、ry兩個(gè)方向半徑是必須參數(shù)，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數(shù)，如果不設(shè)置，則默認(rèn)圓心為（0,0）。
3.5、折線 - polyline
// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
<!-- 繪制出一個(gè)默認(rèn)填充黑色的三角形 -->
<polyline
points=" //點(diǎn)的集合
0 ,0, // 第一個(gè)點(diǎn)坐標(biāo)
100,100, // 第二個(gè)點(diǎn)坐標(biāo)
100,200 // 第三個(gè)點(diǎn)坐標(biāo)
"
stroke="green"
></polyline>
<!-- 繪制一個(gè)臺(tái)階式的一條折線 -->
<polyline
points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
stroke="#4b27ff" fill="none"
></polyline>
</svg>上述代碼執(zhí)行結(jié)果如圖所示：
需要注意的是 points 中包含了多個(gè)點(diǎn)的坐標(biāo)，但不是一個(gè)數(shù)組。
3.6、多邊形 - polygon
polygon 標(biāo)簽用來創(chuàng)建不少于3個(gè)邊的圖形，多邊形是閉合的，即所有線條連接起來。
// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
<polygon
points="
0,0, //多邊形的第一點(diǎn)
100,100, //多邊形的第二點(diǎn)
0,100 //多邊形的第三點(diǎn)
"
stroke="purple"
stroke-width="1"
fill="none"
></polygon>
</svg>polygon繪制的時(shí)候與折線有些類似，但是polygon會(huì)自動(dòng)閉合，折線不會(huì)。
3.7、路徑 - path
path 是SVG基本形狀中最強(qiáng)大的一個(gè)，不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀，如貝塞爾曲線、2次曲線等。
點(diǎn)個(gè)關(guān)注，下篇更精彩！
tml2pdf
PDFBox是一個(gè)Java庫，可用于創(chuàng)建，修改和提取PDF文件的內(nèi)容。它是一個(gè)Apache軟件基金會(huì)的項(xiàng)目，使用Apache License 2.0許可證。
PDFBox提供了一組API，可用于提取文本和圖像，添加和刪除頁面，提取PDF元數(shù)據(jù)和加密PDF文件等。
<!-- 將 html 轉(zhuǎn)換為 xml 工具庫 -->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.17.1</version>
</dependency>
<!-- 第三方 pdfbox 包裝庫,提供 html 轉(zhuǎn) pdf 功能 -->
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.10</version>
</dependency>
// 獲取 java 版本
String version = System.getProperty("java.specification.version");
// 獲取系統(tǒng)類型
String platform = System.getProperty("os.name", "");
platform = platform.toLowerCase().contains("window") ? "win" : "linux";
// 當(dāng)前程序目錄
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");
// 補(bǔ)全標(biāo)記
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 字體問題,文檔中出現(xiàn)過的字段,需要手動(dòng)加載字體
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 設(shè)置根目錄
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 內(nèi)部結(jié)構(gòu)
java -jar pdfbox-app debug path-to-pdf/test.pdf
java -jar debugger-app path-to-pdf/test.pdf測試結(jié)果
下一篇 5-LINUX HTML 轉(zhuǎn) PDF-selenium
、垂直對(duì)齊
如果你用CSS，則你會(huì)有困惑：我該怎么垂直對(duì)齊容器中的元素？現(xiàn)在，利用CSS3的Transform，可以很優(yōu)雅的解決這個(gè)困惑：
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}2、伸展一個(gè)元素到窗口高度
在具體場景中，你可能想要將一個(gè)元素伸展到窗口高度，基本元素的調(diào)整只能調(diào)整容器的大小,因此要使一個(gè)元素伸展到窗口高度，我們需要伸展頂層元素：html和body:
html,
body {
height: 100%;
}然后將100%應(yīng)用到任何元素的高：
div { height: 100%;}3、基于文件格式使用不同的樣式
為了更容易知道鏈接的目標(biāo)，有時(shí)你想讓一些鏈接看起來和其它的不同。下面的片段在文本鏈接前添加一個(gè)圖標(biāo)，對(duì)不同的資源使用不同的圖標(biāo)或圖片：
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、創(chuàng)建跨瀏覽器的圖像灰度
灰度有時(shí)看起來簡約和優(yōu)雅，能為網(wǎng)站呈現(xiàn)更深層次的色調(diào)。在示例中，我們將對(duì)一個(gè)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>
為了跨瀏覽器，會(huì)用到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、背景漸變動(dòng)畫
CSS中最具誘惑的一個(gè)功能是能添加動(dòng)畫效果，除了漸變，你可以給背景色、透明度、元素大小添加動(dòng)畫。目前，你不能為漸變添加動(dòng)畫，但下面的代碼可能有幫助。它通過改變背景位置，讓它看起來有動(dòng)畫效果。
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：表格列寬自適用
對(duì)于表格，當(dāng)談到調(diào)整列寬時(shí)，是比較痛苦的。然后，這里有一個(gè)可以使用的技巧：給td元素添加 white-space: nowrap;能讓文本正確的換行
td { white-space: nowrap;}213126486編號(hào)：悟空
7、只在一邊或兩邊顯示盒子陰影
如果你要一個(gè)盒陰影，試試這個(gè)技巧，能為任一邊添加陰影。為了實(shí)現(xiàn)這個(gè)，首先定義一個(gè)有具體寬高的盒子，然后正確定位:after偽類。實(shí)現(xiàn)底邊陰影的代碼如下：
.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、包裹長文本
如果你碰到一個(gè)比自身容器長的文本，這個(gè)技巧對(duì)你很有用。在這個(gè)示例中，默認(rèn)時(shí)，不管容器的寬度，文本都將水平填充。
簡單的CSS代碼就能在容器中調(diào)整文本：
pre { white-space: pre-line; word-wrap: break-word;}9、制造模糊文本
想要讓文本模糊？可以使用color透明和text-shadow實(shí)現(xiàn)。
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}10、用CSS動(dòng)畫實(shí)現(xiàn)省略號(hào)動(dòng)畫
這個(gè)片段將幫助你制造一個(gè)ellipsis的動(dòng)畫，對(duì)于簡單的加載狀態(tài)是很有用的，而不用去使用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清除浮動(dòng)
.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、新版清除浮動(dòng)（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、個(gè)性圓角
#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、錨鏈接偽類
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
