learn svg

lwg649 · Apr 16, 2022 · 4b63c88 · 4b63c88
1 parent e7458ef
commit 4b63c88
Show file tree

Hide file tree

Showing 21 changed files with 440 additions and 26 deletions.
diff --git a/dom-demo/15-keydown.ts b/dom-demo/15-keydown.ts
@@ -0,0 +1,17 @@
+/**
+ * 键盘按下
+ */
+
+(function() {
+    window.addEventListener('keydown', (e: KeyboardEvent) => {
+        console.log('keydown', e);
+    });
+
+    window.addEventListener('keyup', e => {
+        // console.log('keyup', e);
+    });
+
+    window.addEventListener('keypress', e => {
+        // console.log('keypress', e);
+    });
+}());
diff --git a/dom-demo/keydown.html b/dom-demo/keydown.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Keydown</title>
+</head>
+<body>
+    <script type="module" src="./15-keydown.ts"></script>
+</body>
+</html>
diff --git a/learn-svg/index.html b/learn-svg/index.html
diff --git a/svg-demo/avatar.jpg b/svg-demo/avatar.jpg
diff --git a/svg-demo/index.css b/svg-demo/index.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f5f5f5;
+    background-color: #fff;
     margin: 0;
 }
 

diff --git a/svg-demo/index.html b/svg-demo/index.html
@@ -10,11 +10,15 @@
         h1 {
             text-align: center;
         }
+
+        .svg-container {
+            background-color: #eeabab;
+        }
     </style>
 </head>
 <body>
-    <h1>SVG学习</h1>
+    <h1 id="title">SVG学习</h1>
     <div id="content"></div>
-    <script src="./src/1-create-svg.ts" type="module"></script>
+    <script src="./src/11-image.ts" type="module"></script>
 </body>
 </html>
diff --git a/svg-demo/src/1-create-svg.ts b/svg-demo/src/1-create-svg.ts
@@ -1,6 +1,9 @@
 /**
  * @author 素燕（我有个公众号：素燕）
  * @description 创建 SVG
+ *
+ * 继承关系：
+ * SVGSVGElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget
  */
 
 (function() {
@@ -10,8 +13,10 @@
 
     // svg默认宽高的 300*150
     const svg = document.createElementNS(namespace, 'svg') as SVGSVGElement;
-    svg.viewBox =
+    // 可直接通过 style 设置样式
     svg.style.border = '1px solid #222';
+    svg.classList.add('svg-container');
+    console.log(`width: ${svg.width}, height: ${svg.height}`);
 
     parentEl.appendChild(svg);
 

diff --git a/svg-demo/src/10-defs.ts b/svg-demo/src/10-defs.ts
@@ -0,0 +1,51 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description defs 只定义图形，不显示
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-defs';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    const defsEl = document.createElementNS(namespace, 'defs') as SVGDefsElement;
+
+    const gEl = document.createElementNS(namespace, 'g') as SVGGElement;
+    gEl.setAttribute('id', 'suyan');
+    gEl.style.stroke = 'red';
+
+    const lineEl = document.createElementNS(namespace, 'line') as SVGLineElement;
+    lineEl.setAttribute('x1', '10');
+    lineEl.setAttribute('y1', '20');
+    lineEl.setAttribute('x2', '500');
+    lineEl.setAttribute('y2', '20');
+    gEl.appendChild(lineEl);
+
+    let circleEl = document.createElementNS(namespace, 'circle') as SVGCircleElement;
+    // 指定圆形和半径
+    circleEl.setAttribute('cx', '100');
+    circleEl.setAttribute('cy', '100');
+    circleEl.setAttribute('r', '50');
+    gEl.appendChild(circleEl);
+
+    defsEl.appendChild(gEl);
+
+    svg.appendChild(defsEl);
+
+    // use 使用定义好的元素
+    let useEl = document.createElementNS(namespace, 'use') as SVGUseElement;
+    useEl.setAttribute('xlink:href', '#suyan');
+    useEl.setAttribute('x', '10');
+    useEl.setAttribute('y', '200');
+    useEl.setAttribute('width', '200');
+    useEl.setAttribute('height', '100');
+    svg.appendChild(useEl);
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/11-image.ts b/svg-demo/src/11-image.ts
@@ -0,0 +1,27 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG中使用图片
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-椭圆';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    let imageEl = document.createElementNS(namespace, 'image') as SVGImageElement;
+    imageEl.setAttribute('xlink:href', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fq_70%2Fimages03%2F20210621%2Fed3b6de5f476478e93cae9ab4deb4a62.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650500871&t=bd07ba8a48aed12ba5620341c5ce9f33');
+    imageEl.setAttribute('x', '20');
+    imageEl.setAttribute('y', '20');
+    imageEl.setAttribute('width', '200');
+    imageEl.setAttribute('height', '200');
+    svg.appendChild(imageEl);
+
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/12-symbol.ts b/svg-demo/src/12-symbol.ts
@@ -0,0 +1,18 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 定义图形进行复用
+ */
+
+ import { createSvg, namespace } from './helper';
+
+ (function () {
+     const titleEl = document.getElementById('title');
+     titleEl.textContent = '图形-symbol';
+     const parentEl = document.getElementById('content');
+
+     // 创建一个svg
+     const svg = createSvg();
+
+     parentEl.appendChild(svg);
+
+ }());
diff --git a/svg-demo/src/2-text.ts b/svg-demo/src/2-text.ts
@@ -0,0 +1,50 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG文本
+ * SVGTextElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = 'text文本';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    /**
+     * text 和 canvas 一样，无法自动换行
+     */
+    const textEl = document.createElementNS(namespace, 'text') as SVGTextElement;
+    // 通过 setAttribute 来设置 text 的属性
+    textEl.setAttribute('x', '0');
+    textEl.setAttribute('y', '100');
+    // textEl.setAttribute('width', '10');
+    // textEl.setAttribute('height', '50');
+    // 设置字体颜色
+    textEl.setAttribute('fill', '#222');
+
+    // 通过 style 来设置样式
+    textEl.style.fontSize = '30px';
+    textEl.style.fontFamily = 'monospace';
+    textEl.style.fontWeight = '700';
+    textEl.style.fontStyle = 'italic';
+    textEl.style.textDecoration = 'underline';
+    textEl.style.wordSpacing = '10';
+    textEl.style.letterSpacing = '10';
+    // 对齐方式
+    textEl.style.textAnchor = 'start';
+    textEl.textContent = 'SVG是矢量图，不管你缩放多大';
+
+    // tspan如同span，把内容拆分开，单独设置属性
+    let tspanEl = document.createElementNS(namespace, 'tspan');
+    tspanEl.textContent = 'tspan内容啥效果';
+    textEl.appendChild(tspanEl);
+
+    svg.appendChild(textEl);
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/3-circle.ts b/svg-demo/src/3-circle.ts
@@ -0,0 +1,35 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG圆形
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-圆';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    let circleEl = document.createElementNS(namespace, 'circle') as SVGCircleElement;
+    // 指定圆形和半径
+    circleEl.setAttribute('cx', '100');
+    circleEl.setAttribute('cy', '100');
+    circleEl.setAttribute('r', '50');
+    svg.appendChild(circleEl);
+
+    const textEl = document.createElementNS(namespace, 'text') as SVGTextElement;
+    // 通过 setAttribute 来设置 text 的属性
+    textEl.setAttribute('x', '85');
+    textEl.setAttribute('y', '110');
+    // 设置字体颜色
+    textEl.setAttribute('fill', '#fff');
+    textEl.style.fontSize = '30px';
+    textEl.textContent = '燕';
+    svg.appendChild(textEl);
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/4-line.ts b/svg-demo/src/4-line.ts
@@ -0,0 +1,32 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG线段
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-线段';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    const lineEl = document.createElementNS(namespace, 'line') as SVGLineElement;
+    // 设置两个点
+    lineEl.setAttribute('x1', '10');
+    lineEl.setAttribute('y1', '20');
+    lineEl.setAttribute('x2', '500');
+    lineEl.setAttribute('y2', '20');
+
+    lineEl.style.stroke = '#222';
+    lineEl.style.strokeWidth = '20';
+    lineEl.style.strokeOpacity = '0.8';
+    lineEl.style.strokeDasharray = '10'
+
+    svg.appendChild(lineEl);
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/5-rect.ts b/svg-demo/src/5-rect.ts
@@ -0,0 +1,36 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG矩形
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-矩形';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    const rectEl1 = document.createElementNS(namespace, 'rect') as SVGRectElement;
+    rectEl1.setAttribute('x', '10');
+    rectEl1.setAttribute('y', '20');
+    rectEl1.setAttribute('width', '200');
+    rectEl1.setAttribute('height', '150');
+    // 设置圆角
+    rectEl1.setAttribute('rx', '10');
+    rectEl1.setAttribute('ry', '20');
+
+    rectEl1.style.stroke = 'red';
+    rectEl1.style.strokeWidth = '4';
+    rectEl1.style.strokeDasharray = '2';
+
+    rectEl1.style.fill = '#999';
+    rectEl1.style.fillOpacity = '0.6';
+
+    svg.appendChild(rectEl1);
+
+    parentEl.appendChild(svg);
+
+}());
diff --git a/svg-demo/src/6-ellipse.ts b/svg-demo/src/6-ellipse.ts
@@ -0,0 +1,29 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description SVG椭圆
+ */
+
+import { createSvg, namespace } from './helper';
+
+(function () {
+    const titleEl = document.getElementById('title');
+    titleEl.textContent = '图形-椭圆';
+    const parentEl = document.getElementById('content');
+
+    // 创建一个svg
+    const svg = createSvg();
+
+    let ellipseEl = document.createElementNS(namespace, 'ellipse') as SVGEllipseElement;
+    // 圆形x
+    ellipseEl.setAttribute('cx', '100');
+    // 圆形y
+    ellipseEl.setAttribute('cy', '100');
+    // x轴的半径
+    ellipseEl.setAttribute('rx', '80');
+    // y轴的半径
+    ellipseEl.setAttribute('ry', '50');
+    svg.appendChild(ellipseEl);
+
+    parentEl.appendChild(svg);
+
+}());