svg 知识点总结

news2024/12/24 8:46:10

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 代码太长,就只发图片了。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1000146.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++初阶--类和对象(中)

目录 类的6个默认成员函数构造函数使用方法 析构函数使用方法 拷贝构造函数使用方法 赋值运算符重载赋值运算符重载 const成员 上篇末尾我们讲到了关于c实现栈相较于c语言在传递参数时的一些优化&#xff0c;但实际上&#xff0c;c在 初始化 清理 赋值 拷贝等方面也做了很大程…

照片太大怎么缩小kb?

照片太大怎么缩小kb&#xff1f;在日常使用电脑或手机时&#xff0c;我们经常会遇到照片过大而无法在聊天工具中传输的情况。这种情况非常常见且正常。当我们拍摄或保存的照片文件体积较大时&#xff0c;不仅会给传输带来困扰&#xff0c;还会占据宝贵的手机和电脑内存空间&…

Beyond Compare:文件夹和文件对比专家

在处理文件和文件夹时&#xff0c;我们有时需要比较两个文件或文件夹是否一致。在这个过程中&#xff0c;Beyond Compare 这款专业的文件夹和文件对比工具成为了我们的得力助手。下面&#xff0c;让我们一起来了解这款工具的基本使用说明。 一、Beyond Compare的下载与安装 首…

代理HTTP使用不当会出现哪些问题?如何正确使用代理服务?

代理HTTP是一种常见的网络代理方式&#xff0c;它为客户端和服务器之间提供中间层&#xff0c;转发上下游的请求和响应。正确使用代理HTTP可以提高采集效率、增加网络安全性、加速网络速度、保护用户隐私。但是&#xff0c;使用不当就难以达到预期的效果&#xff0c;在使用代理…

PYTHON 3.10中文版官方文档

大家好&#xff0c;我是涛哥。 很多问我涛哥学习Python看啥&#xff0c;一般我都会建议多看看官方文档&#xff0c;因为官方文档真的周到了&#xff0c;啥内容都有&#xff0c;比如新手安装&#xff0c;标准库&#xff0c; AIP参考手册&#xff0c;常见FAQ问题&#xff0c;太…

【jmeter+ant+jenkins】之搭建 接口自动化测试平台

平台搭建 (1). 录制jmeter脚本 (2). 将jmeter的安装目录下的G:\jmeter\apache-jmeter-5.1.1\extras中&#xff0c;将 ”ant-jmeter-1.1.1.jar”文件放到 ant的lib目录下 (3). 配置jmeter的xml配置文件&#xff0c;并放在ant目录的bin目录下&#xff0c;使用ant编译验证jmeter的…

CSwin-PNet: CNN-Swin-Vit 组合金字塔网络用于超声图像中乳腺病变分割

ATTransUNet 期刊分析摘要贡献方法整体框架1. Residual Swin Transformer block2. Interactive channel attention module3. Supplementary feature fusion module4. Boundary detection module 实验1. 消融实验2. 对比实验3. 失败案例讨论 可借鉴参考 期刊分析 期刊名&#x…

ROS1和ROS2的区别

ROS虽然将各个部分的各个组件给有机的连接起来&#xff0c;但是需要通过一个叫做Ros Master的东西&#xff0c;所有节点&#xff08;可以理解为某一个组件&#xff0c;比如&#xff1a;激光雷达&#xff09;的通信建立必须经过这个主节点&#xff0c;一旦Ros Master主节点挂掉后…

OSCS开源安全周报第 59 期:Apache Superset<2.1.1 远程代码执行漏洞(CVE-2023-37941)

本周安全态势综述 OSCS 社区共收录安全漏洞 7 个&#xff0c;公开漏洞值得关注的是 Apache Superset<2.1.1 远程代码执行漏洞( CVE-2023-37941 )、Redis SORT_RO命令可绕过 ACL 配置( CVE-2023-41053 )、Argo CD 集群密钥泄漏风险( CVE-2023-40029 )、Cacti<1.2.25 repo…

SpringBoot-Learning系列之Kafka整合

SpringBoot-Learning系列之Kafka整合 本系列是一个独立的SpringBoot学习系列&#xff0c;本着 What Why How 的思想去整合Java开发领域各种组件。 消息系统 主要应用场景 流量消峰(秒杀 抢购)、应用解耦&#xff08;核心业务与非核心业务之间的解耦&#xff09;异步处理、顺序…

多要素气象站:自动观测、数据可查

随着科技的不断发展&#xff0c;气象监测已经从传统的人工观测转变为自动化观测。多要素气象站作为自动化气象观测的重要组成部分&#xff0c;为天气预报提供了更加精准、实时的数据。 一、多要素气象站的优势 自动化程度高&#xff1a;多要素气象站采用先进的传感器和数据采…

算法AB实验平台进化历程和挑战

1 AB 平台简介 AB 实验平台这几年在互联网公司得到了越来越广泛的应用&#xff0c;采用 AB 实验来评估产品和技术迭代效果也成为主流的业务新功能效果评估方式&#xff0c;数据驱动的文化在这几年得到了不少公司的广泛的认同&#xff0c;通过数据和指标来说明产品效果也得到了…

win11电脑怎么设置定时关机

我们可以给电脑设置一个定时关机的功能&#xff0c;这样当我们有事情而无法在电脑前等待关机的时候就可以让电脑自己关机了&#xff0c;那么win11系统怎么设置定时关机功能呢&#xff0c;这里小编给大家带来win11电脑定时关机的设置方法&#xff0c;还不太清楚的小伙伴快来看一…

行业追踪,2023-09-11

自动复盘 2023-09-11 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

数据库直连提示 No suitable driver found for jdbc:postgresql

背景&#xff1a;我在代码里使用直连的方式在数据库中创建数据库等&#xff0c;由于需要适配各个数据库服务所以我分别兼容了mysql、postgresql、oracal等。但是在使用过程中会出现错误&#xff1a; No suitable driver found for jdbc:postgresql 但是我再使用mysql的直连方式…

JOSEF约瑟 DL-41 DL-42 DL-43 DL-44 导轨式电流继电器 过负荷和短路保护

DL-41导轨式电流继电器是一种常用于电机、变压器和输电线的过负荷和短路保护线路中的起动元件。 DL-41导轨式电流继电器具有体积小、外形直观、安装接线方便等优点&#xff0c;是随着开关柜体不断改进而新研发的配套产品。该继电器采用凸出式固定结构&#xff0c;也可卡装在35…

Unity中Shader使用最简屏幕坐标并且实现屏幕扭曲

文章目录 前言一、在之前写的shader中&#xff0c;用于对屏幕坐标取样的pos是在顶点着色器中完成计算的&#xff0c;然而还有一种更为简洁的方法&#xff0c;就是用顶点着色器中传给片元着色器的pos来给屏幕抓取进行采样原理&#xff1a;在顶点着色器中&#xff0c;o.pos是裁剪…

flv怎么转换成mp3?挑选三个方法给大家

flv怎么转换成mp3&#xff1f;FLV&#xff08;Flash Video&#xff09;是一种被广泛应用于互联网的流行视频格式&#xff0c;然而该格式并非适用于所有设备和媒体播放器。相反&#xff0c;MP3作为数字音频格式&#xff0c;能够将高质量的音频文件压缩成相对较小的大小&#xff…

IDEA使用database

一、导出数据库表结构 右键数据库、表&#xff0c;选择SQL Generator 可以查看多表的创建语句、删除语句、清空语句 1.创建脚本 初始创建脚本 rdbms提供的脚本 definition provided by rdbms server 2.脚本是否关联数据库名称 Qualify objects with schema names: aut…

记录造数据测试接口

一、前言 在java开发中经常需要造数据进行测试接口&#xff0c;这里记录一下常用的通过造数据测试接口的方法。 二、一般的接口传参方式 1、接口的方式最好是使用JSON或者map的方式&#xff0c;这样的好处是传参可以灵活伸缩&#xff0c;返回的结果也最好是JSON或者map的方式…