SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
SVG 使用 XML 格式定義圖像。
svg 的子標簽
- 矩形<rect>、
- 圓形<circle>
- 橢圓 <ellipse>
- 線 <line>
- 路徑 <path>
- 多邊形 <polygon>
- 折線 <polyline>
- 母子標簽之間還可以套進組標簽 <g>、復用標簽<defs>
在 html 中使用 svg
SVG 文件可通過以下標簽嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。
在 Firefox、Internet Explorer9、谷歌 Chrome 和 Safari 中，你可以直接在 HTML 嵌入 SVG 代碼
viewBox
svg 標簽的 viewBox屬性表示可視窗口
如: viewBox ="0 0 400 400" 表示從從坐標(0, 0)開始到(400,400)的矩形區域, 設置了viewBox的svg才能進行縮放
width和height僅表示svg在頁面所占據的空間
path 子標簽實現不規則區域的選中高亮效果
找了一款 svg 在線編輯器,做了一個帶 path 的 svg
path 基本樣式屬性有:
- stroke-width 輪廓寬度,邊框寬度
- stroke 輪廓顏色
- fill 區域填充顏色 注: fill="none"可能會引起 :hover 的偶爾不觸發
鼠標hover效果
html 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function gg() {
alert("gg")
}
</script>
<style>
body {
background-color: burlywood;
}
#svg_1:hover {
cursor: pointer;
stroke: #d70000;
stroke-width: 10px;
fill: #30db30;
}
#svg_2:hover {
cursor: pointer;
stroke: #292cbe;
stroke-width: 3px;
fill: #c57316;
}
</style>
</head>
<body>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1" />
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" />
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m213.5,152.109375l-33.5,29.890625l27,47l117,6l33,-81l-9,-23l-88,-1l-46.5,22.109375z"
stroke-width="1.5" stroke="#000" fill="#fff" />
<path id="svg_2"
d="m275.5,95.10938l-39.5,68.89062l28,30l87,42c0.5,0.10938 52.5,-48.89062 52.5,-50.89062c0,-2 -3,-53 -3.5,-53.10938c0.5,0.10938 -33.5,-32.89062 -34,-33c0.5,0.10938 -39.5,-5.89062 -90.5,-3.89062z"
stroke-width="1.5" stroke="#000" fill="#fff" />
</g>
</svg>
</body>
</html>