台州商城网站建设app下载注册推广平台

台州商城网站建设,app下载注册推广平台,北京网站优化团队,做图片类型网站需要什么服务器一、什么是svg#xff1f;svg是一种“用代码描述图形的文件格式”#xff0c;浏览器将这些代码实时渲染成你看到的图形。注#xff1a;首先svg不是图片的一种格式#xff0c;也不依赖像素#xff0c;所以意味着图形可以无限放大而不失真。即svg是将代码转化成图片形式的一…一、什么是svgsvg是一种“用代码描述图形的文件格式”浏览器将这些代码实时渲染成你看到的图形。注首先svg不是图片的一种格式也不依赖像素所以意味着图形可以无限放大而不失真。即svg是将代码转化成图片形式的一种文件格式。二、svg的工作流程svg代码文件 → 浏览器解析 → 渲染引擎绘制 → 屏幕上显示图形↓ ↓ ↓文本 理解指令 执行绘图 视觉结果三、创建svg文件首先既然svg文件是将代码转化成图片形式的一种文件格式那么就能通过vscode去打开和创建。所以我们以新建text.svg文件为例。输入代码svg width200 height200 xmlnshttp://www.w3.org/2000/svg circle cx100 cy100 r80 fillblue / /svg四、安装svg拓展4.1、点击扩展图片搜索关键字 svg安装扩展4.2、安装完成后可以右击 svg 文件在列表中选择预览 SVG4.3、预览效果4.4、如何切换到代码视图在左侧资源管理器右键点击​test.svg文件选择“打开方式”​ (Open With)选择“文本编辑器”​ 或“代码编辑器”五、svg 基本语法svg width200 !-- 指定SVG画布的宽度 -- height200 !-- 指定SVG画布的高度 -- xmlnshttp://www.w3.org/2000/svg !-- 指定SVG命名空间 -- viewBox0 0 200 200 !-- 坐标系推荐添加 -- !-- SVG图形内容 -- /svg注xmlnshttp://www.w3.org/2000/svg固定语法告诉浏览器“这是SVG语法别当成HTML解析”。在HTML5中内联SVG可省略xmlns但独立.svg文件必须包含。六、七大基本图形元素1. 矩形rectrect x20 !-- 左上角X坐标 -- y20 !-- 左上角Y坐标 -- width160 !-- 宽度 -- height120 !-- 高度 -- rx10 !-- 圆角半径 -- fill#3498db !-- 填充色 -- stroke#2980b9 !-- 边框色 -- stroke-width3/ !-- 边框粗细 --2. 圆形circlecircle cx100 !-- 圆心X坐标 -- cy100 !-- 圆心Y坐标 -- r80 !-- 半径 -- fillgold !-- 填充色 -- opacity0.8/ !-- 透明度 --3. 椭圆ellipseellipse cx150 !-- 中心点X -- cy100 !-- 中心点Y -- rx100 !-- 水平半径 -- ry50 !-- 垂直半径 -- fill#9b59b6/4. 直线lineline x110 !-- 起点X -- y110 !-- 起点Y -- x2190 !-- 终点X -- y2190 !-- 终点Y -- strokeblack !-- 直线必须设置stroke -- stroke-width2/5. 折线polyline不闭合polyline points10,10 50,50 90,10 130,50 !-- 坐标点序列 -- fillnone !-- 通常不填充 -- stroke#e74c3c stroke-width3 stroke-linecapround/ !-- 端点圆形 --6. 多边形polygon自动闭合polygon points100,10 40,180 190,60 10,60 160,180 !-- 五角星坐标 -- fill#f1c40f stroke#f39c12 stroke-width2/7. 路径path最强大path dM 10,10 !-- 移动到起点 -- L 100,10 !-- 画直线到 -- L 100,100 !-- 继续画线 -- Q 150,150 200,100 !-- 二次贝塞尔曲线 -- Z !-- 闭合路径 -- fill#2ecc71 stroke#27ae60/路径指令速记M/m移动画笔L/l画直线H/h水平线V/v垂直线C/c三次贝塞尔曲线A/a画圆弧Z/z闭合路径七、 样式与美化颜色填充与边框!-- 多种颜色表示方式 -- circle fillred / !-- 颜色名称 -- rect fill#00ff00 / !-- 十六进制 -- ellipse fillrgb(0, 0, 255) / !-- RGB值 -- polygon fillrgba(255, 0, 0, 0.5) / !-- 带透明度 -- !-- 边框样式控制 -- rect stroke#333 !-- 边框颜色 -- stroke-width4 !-- 边框宽度 -- stroke-dasharray5,3 !-- 虚线5像素实线3像素间隔 -- stroke-linecapround !-- 端点圆角 -- stroke-linejoinround/ !-- 转角圆角 --渐变填充!-- 定义线性渐变 -- defs !-- 定义可复用内容 -- linearGradient idsunset x10% y10% x2100% y20% stop offset0% stop-color#ff9a9e / stop offset100% stop-color#fad0c4 / /linearGradient /defs !-- 使用渐变 -- rect width200 height100 fillurl(#sunset) /八、✍️ 文本处理text x100 !-- 文本起点X -- y50 !-- 文本起点Y -- font-familyArial, Microsoft YaHei, sans-serif font-size24 font-weightbold fill#2c3e50 text-anchormiddle !-- 水平对齐start|middle|end -- dominant-baselinemiddle !-- 垂直对齐 -- SVG文本示例 /text九、 组织与复用分组管理!-- 分组批量管理多个元素 -- g idcloud fillwhite stroke#bdc3c7 stroke-width2 transformtranslate(50, 50) scale(0.8) ellipse cx50 cy30 rx30 ry20/ ellipse cx80 cy30 rx25 ry15/ ellipse cx20 cy30 rx25 ry15/ /g !-- 复制使用 -- use href#cloud x100 y0/定义与引用defs !-- 定义但不显示 -- circle iddot r5 fill#e74c3c/ /defs !-- 多处引用 -- use href#dot x10 y10/ use href#dot x30 y30/ use href#dot x50 y50/十、⚡ 动画与交互CSS动画style .pulse { animation: heartbeat 1.5s ease-in-out infinite; } keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /style circle classpulse cx100 cy100 r40 fill#e74c3c/JavaScript交互!-- 直接事件绑定 -- rect idbtn width120 height40 rx8 fill#3498db onclickthis.style.fill#2980b9 onmouseoverthis.style.cursorpointer onmouseoutthis.style.fill#3498db/ text x60 y25 text-anchormiddle fillwhite点击我/text十一、实战示例绘制一个笑脸svg width200 height200 viewBox0 0 200 200 xmlnshttp://www.w3.org/2000/svg !-- 渐变背景 -- defs radialGradient idbgGradient cx50% cy50% r50% stop offset0% stop-color#ffeaa7/ stop offset100% stop-color#fab1a0/ /radialGradient /defs !-- 脸部 -- circle cx100 cy100 r80 fillurl(#bgGradient) stroke#e17055 stroke-width3/ !-- 左眼 -- circle cx70 cy80 r12 fill#2d3436/ circle cx70 cy80 r4 fillwhite/ !-- 右眼 -- circle cx130 cy80 r12 fill#2d3436/ circle cx130 cy80 r4 fillwhite/ !-- 微笑的嘴巴 -- path dM 60,120 Q 100,170 140,120 fillnone stroke#d63031 stroke-width4 stroke-linecapround/ !-- 腮红 -- circle cx60 cy100 r15 fill#ff7675 opacity0.3/ circle cx140 cy100 r15 fill#ff7675 opacity0.3/ /svg十二、Vue 文件中使用 SVGtemplate div classcontainer !-- 不需要写 xmlnsVue 会自动添加 -- svg width200 height200 classsmiley clickhandleSmileyClick circle cx100 cy100 r80 fill#FFD700/ circle cx70 cy80 r12 fillblack/ path dM 60,120 Q 100,170 140,120 fillnone strokeblack stroke-width4/ /svg !-- 可以绑定 Vue 的数据和事件 -- svg width100 height100 circle :cxcircleX :cy50 :rradius :fillcircleColor/ /svg /div /template script setup import { ref } from vue const circleX ref(50) const radius ref(40) const circleColor ref(#3498db) const handleSmileyClick () { circleColor.value #e74c3c // 点击后变色 } /script style scoped .smiley { cursor: pointer transition: transform 0.3s } .smiley:hover { transform: scale(1.1) } /style