当前位置： 首页 > news >正文

svg 知识点总结

news 2026/5/12 7:49:16

1. 引用 svg，直接用 img 标签

<img src="帐篷.svg" alt="露营">

2. 画 svg 各种图形。

  • 矩形 rect
  • 圆角矩形 rect
  • 圆圈 circle
  • 椭圆 ellipse
  • 线段 line
  • 折线 polyline
  • 多边形 polygon
  • 路径 path
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/><rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/><circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/><ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/><line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/><polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"stroke="orange" fill="transparent" stroke-width="5"/><polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"stroke="green" fill="transparent" stroke-width="5"/><path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

总结

对于前端开发来讲，将 svg 当成图片用就行（矢量图）。

后续

svg 还有滤镜也可以学学，<filter>

附录

帐篷 svg 代码太长，就只发图片了。

在这里插入图片描述

相关文章：

svg 知识点总结

1. 引用 svg&#xff0c;直接用 img 标签 <img src"帐篷.svg" alt"露营">2. 画 svg 各种图形。 矩形 rect圆角矩形 rect圆圈 circle椭圆 ellipse线段 line折线 polyline多边形 polygon路径 path <svg width"200" height"250&qu…...

编程日记 2023/9/17 9:10:57

开源库源码分析：OkHttp源码分析（二）

开源库源码分析&#xff1a;OkHttp源码分析&#xff08;二&#xff09; 导言 上一篇文章中我们已经分析到了OkHttp对于网络请求采取了责任链模式&#xff0c;所谓责任链模式就是有多个对象都有机会处理请求&#xff0c;从而避免请求发送者和接收者之间的紧密耦合关系。这篇文章…...

编程日记 2023/9/17 9:08:56

校园地理信息系统的设计与实现

校园地理信息系统的设计与实现 摘 要 与传统的地图相比较&#xff0c;地理信息系统有着不可比拟的优势&#xff0c;信息量大&#xff0c;切换方便&#xff0c;可扩展性强。本文阐述了研究地理信息系统的背景、目的、方法&#xff0c;介绍了一个实用的、方便可靠的校园地理信息…...

编程日记 2023/9/17 9:05:54

Vulnhub实战-prime1

前言 VulnHub 是一个面向信息安全爱好者和专业人士的虚拟机&#xff08;VM&#xff09;漏洞测试平台。它提供了一系列特制的漏洞测试虚拟机镜像&#xff0c;供用户通过攻击和漏洞利用的练习来提升自己的安全技能。本次&#xff0c;我们本次测试的是prime1。 一、主机发现和端…...

编程日记 2023/9/17 9:01:49

Scala学习笔记

Scala学习笔记 Scala笔记一、学习Scala的目的二、Scala的基本概念2.1 JDK1.8版本的新特性2.2 Scala的运行机制 三、Scala的基本语法3.1 Scala中输出语句、键盘输入、注释语法3.1.1 Scala注释三种&#xff0c;和Java一模一样的3.1.2 Scala键盘输入3.1.3 Scala输出 3.2 Scala变量…...

编程日记 2023/9/17 9:00:48

虹科分享 | 软件供应链攻击如何工作？如何评估软件供应链安全？

说到应用程序和软件&#xff0c;关键词是“更多”。在数字经济需求的推动下&#xff0c;从简化业务运营到创造创新的新收入机会&#xff0c;企业越来越依赖应用程序。云本地应用程序开发更是火上浇油。然而&#xff0c;情况是双向的&#xff1a;这些应用程序通常更复杂&#xf…...

编程日记 2023/9/17 8:59:47

gRpc入门和springboot整合

gRpc入门和springboot整合 一、简介 1、gprc概念 gRpc是有google开源的一个高性能的pc框架&#xff0c;Stubby google内部的rpc,2015年正式开源&#xff0c;云原生时代一个RPC标准。 tips:异构系统&#xff0c;就是不同编程语言的系统。 2、grpc核心设计思路 grpc核心设计…...

编程日记 2023/9/17 8:57:46

基于FPGA点阵显示屏设计-毕设

本设计是一1616点阵LED电子显示屏的设计。整机以EP2C5T144C8N为主控芯片，介绍了以它为控制系统的LED点阵电子显示屏的动态设计和开发过程。通过该芯片控制一个行驱动器74HC154和两个列驱动器74HC595来驱动显示屏显示。该电子显示屏可以显示各种文字或单色图像，采用4块8 x 8点…...

编程日记 2023/9/17 8:56:45

Rocky9.2基于http方式搭建局域网yum源

当前负责的项目有几十台Linux服务器，在安装各类软件的时候需要大量依赖包，而项目部署的环境属于内网环境，与Internet网完全隔离，无法采用配置网络yum源的方式安装rpm包，直接在每台linux服务器上配置本地yum源也比较麻烦，而采用直接下载rpm包用rpm命令安装更是费时费力。所…...

编程日记 2023/9/17 8:53:43

Android 串口通讯

Serial Port Android 串口通讯 arm64-v8a、armeabi-v7a、x86、x86_64 AAR 名称操作serial.jar下载arm64-v8a下载armeabi-v7a下载x86下载x86_64下载arm-zip下载x86-zip下载 Maven 1.build.grade | setting.grade repositories {...maven { url https://jitpack.io } }2./a…...

编程日记 2023/9/17 8:52:42

论如何在Android中还原设计稿中的阴影

每当设计稿上注明需要添加阴影时&#xff0c;Android上总是显得比较棘手&#xff0c;因为Android的阴影实现方式与Web和iOS有所区别。 一般来说阴影通常格式是有&#xff1a; X: 在X轴的偏移度 Y: 在Y轴偏移度 Blur: 阴影的模糊半径 Color: 阴影的颜色 何为阴影 但是在A…...

编程日记 2023/9/17 8:47:37

Hadoop生态圈中的Flume数据日志采集工具

Hadoop生态圈中的Flume数据日志采集工具 一、数据采集的问题二、数据采集一般使用的技术三、扩展&#xff1a;通过爬虫技术采集第三方网站数据四、Flume日志采集工具概述五、Flume采集数据的时候&#xff0c;核心是编写Flume的采集脚本xxx.conf六、Flume案例实操1、采集一个网络…...

编程日记 2023/9/17 8:45:35

FFmpeg获取媒体文件的视频信息

视频包标志位 代码 printf("index:%d\n", in_stream->index);结果 index:0视频帧率 // avg_frame_rate: 视频帧率,单位为fps&#xff0c;表示每秒出现多少帧 printf("fps:%lffps\n", av_q2d(in_stream->avg_frame_rate));结果 fps:29.970070fps…...

编程日记 2023/9/17 8:42:33

io概述及其分类

一、IO概念 • I/O 即输入Input/ 输出Output的缩写&#xff0c;其实就是计算机调度把各个存储中&#xff08;包括内存和外部存储&#xff09;的数据写入写出的过程&#xff1b; I : Input O : Output 通过IO可以完成硬盘文件的读和写。 • java中用“流&#xff08;stream&am…...

编程日记 2023/9/17 8:40:31

前端面试话术集锦第 14 篇：高频考点（React常考基础知识点）

这是记录前端面试的话术集锦第十四篇博文——高频考点（React常考基础知识点），我会不断更新该博文。❗❗❗ 1. 生命周期 在V16版本中引入了Fiber机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的2个API来解决问题。 在之前的版本中，如果你拥有一个很…...

编程日记 2023/9/17 8:38:29

UI/UX+前端架构：设计和开发高质量的用户界面和用户体验

引言 随着数字化和互联网的普及&#xff0c;越来越多的企业和组织需要高质量的用户界面和用户体验&#xff0c;以及可靠、高效的前端架构。UI/UX设计师和前端架构师可以为这些企业和组织提供所需的技术和创意支持。本文将介绍UI/UX前端架构这个方向&#xff0c;包括设计原则、…...

编程日记 2023/9/17 8:37:28

长尾关键词挖掘软件-免费的百度搜索关键词挖掘

嗨&#xff0c;大家好&#xff01;今天&#xff0c;我想和大家聊一聊长尾关键词挖掘工具。作为一个在网络世界里摸爬滚打多年的人&#xff0c;我对这个话题有着一些个人的感悟和见解&#xff0c;希望能与大家分享。 首先&#xff0c;让我坦白一点&#xff0c;长尾关键词挖掘工具…...

编程日记 2023/9/17 8:36:27

React Native 环境配置（mac）

React Native 环境配置&#xff08;mac&#xff09; 1.Homebrew2.Node.js、WatchMan3.Yarn4.Android环境配置1.安装JDK2.下载AndroidStudio1.国内配置 Http Proxy2.安装SDK1.首先配置sdk的路径2.SDK 下载 3.创建模拟器4.配置 ANDROID_HOME 环境变量 5.IOS环境1.升级ruby&#x…...

编程日记 2023/9/17 8:30:21

CAD for JS:VectorDraw web library 10.1004.1 Crack

VectorDraw web library经过几年的研究&#xff0c;通过互联网展示或工作的可能性并拒绝了各种项目&#xff0c;我们最终得出的结论是&#xff0c;在 javascript 的帮助下&#xff0c;我们将能够在 Microsoft IE 以外的互联网浏览器中通过网络演示矢量图形&#xff08;支持 ocx…...

编程日记 2023/9/17 8:28:18

代码管理工具git1

ctrl 加滚轮 放大字体 在计算机任意位置单击右键&#xff0c;选择&#xff1a;&#xff1a;Git Bash Here git version git清屏命令&#xff1a;ctrl L查看用户名和邮箱地址&#xff1a; $ git config user.name$ git config user.email修改用户名和邮箱地址&#xff1a;$ git…...

编程日记 2023/9/17 8:27:17

SLEICL框架：用“魔法书”提示工程提升小模型上下文学习性能

1. 项目概述&#xff1a;用“魔法书”解锁小模型的大潜能 如果你最近在折腾大语言模型&#xff0c;尤其是那些参数规模在7B、13B左右的“小模型”&#xff0c;可能会发现一个头疼的问题&#xff1a;想让它们通过上下文学习&#xff08;In-context Learning, ICL&#xff09;的方…...

编程新知 2026/5/12 6:45:34

ADI GitHub工程编译指南：以ADRV9009/ZC706为例，搞懂Tcl脚本工程的结构与自动化构建

ADI GitHub工程编译指南&#xff1a;深入解析Tcl脚本工程与自动化构建体系 当你在GitHub上打开Analog Devices的HDL仓库时&#xff0c;可能会被密密麻麻的Tcl脚本和Makefile文件搞得一头雾水。这种以脚本驱动的硬件项目组织方式&#xff0c;正逐渐成为开源硬件领域的标准实践。…...

编程新知 2026/5/12 5:54:22

Bonsai工具库：函数式编程与代码设计模式实战解析

1. 项目概述&#xff1a;当代码遇见禅意最近在GitHub上闲逛&#xff0c;发现一个挺有意思的项目&#xff0c;叫sauravpanda/bonsai。光看名字&#xff0c;你可能以为这是个园艺或者艺术相关的仓库&#xff0c;但实际上&#xff0c;它是一个非常精巧的编程工具库。这个项目名“B…...

编程新知 2026/5/12 5:45:44

FuckAdBlock开发者指南：自定义检测逻辑和扩展功能的完整教程

FuckAdBlock开发者指南&#xff1a;自定义检测逻辑和扩展功能的完整教程 【免费下载链接】FuckAdBlock Detects ad blockers (AdBlock, ...) 项目地址: https://gitcode.com/gh_mirrors/fu/FuckAdBlock FuckAdBlock是一个强大的广告拦截器检测工具&#xff0c;专为Web开…...

编程新知 2026/5/12 4:49:39

FPGA与CPU电源时序测试技术解析与实践

1. FPGA与CPU电源时序测试的核心挑战在现代电子系统中&#xff0c;FPGA、MCU和CPU等处理器件的电源设计堪称"心脏手术"。我曾参与过多个Xilinx UltraScale和Intel Stratix 10项目的电源验证&#xff0c;深刻体会到毫秒级的时序偏差就可能导致数千美元的芯片瞬间损毁。…...

编程新知 2026/5/12 4:16:52

为AI编码助手集成aislop-skill：实时代码质量检测与修复

1. 项目概述&#xff1a;为AI编码助手装上“质检员”如果你和我一样&#xff0c;日常重度依赖Cursor、Windsurf这类AI驱动的IDE&#xff0c;或者频繁使用Claude Code、Gemini CLI等代码生成工具&#xff0c;那你一定遇到过这样的场景&#xff1a;AI助手生成的代码&#xff0c;功…...

编程新知 2026/5/12 3:16:53

别再写循环了！ABAP SQL聚合函数COUNT/AVG/MAX实战指南，5分钟搞定数据统计

ABAP SQL聚合函数实战&#xff1a;告别低效循环&#xff0c;5分钟掌握高阶统计技巧 每次看到ABAP报表里那些嵌套三层的LOOP和SORT语句&#xff0c;我的血压就会悄悄升高。上周review同事代码时&#xff0c;发现一个统计物料库存的报表竟然用了三个嵌套循环——外层遍历工厂、中…...

编程新知 2026/5/12 2:30:26

Midjourney油彩风格进阶必修课：用--no shadow, --iw 2.0, --style raw构建可控厚涂质感（附Gaussian噪声注入对照表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney油彩风格的美学本质与技术定位 油彩风格&#xff08;Oil Painting Style&#xff09;在 Midjourney 中并非简单滤镜叠加&#xff0c;而是通过语义引导、纹理建模与隐空间解耦共同作用形成的高…...

编程新知 2026/5/12 1:25:39

市场营销Agent：自动生成内容与投放策略

市场营销Agent：自动生成内容与投放策略——从痛点分析到落地实践的全栈指南 引言 痛点引入 在数字营销的战场上，每天都有无数的团队在重复着「内容绞肉机」和「投放试错场」的噩梦： 内容产出端：为了覆盖小红书、抖音、知乎、微信公众号、TikTok、LinkedIn等数十个主流渠…...

编程新知 2026/5/12 1:16:41

Cadence 17.4 保姆级教程：从DRC检查到Gerber输出的完整避坑指南

Cadence 17.4 终极避坑指南&#xff1a;从DRC检查到Gerber输出的全流程实战 第一次使用Cadence Allegro 17.4导出Gerber文件时&#xff0c;那种如履薄冰的感觉至今记忆犹新。记得去年为TMC2300电机驱动模块导出生产文件时&#xff0c;因为一个简单的单位设置错误&#xff0c;导…...

编程新知 2026/5/11 23:56:45