首页 > 其他分享 >前端必知必会-html svg

前端必知必会-html svg

时间:2024-08-04 09:25:01浏览次数:15  
标签:Canvas HTML 示例 必知 svg 缩放 html SVG 图形

文章目录


HTML SVG 图形

SVG(可缩放矢量图形)
SVG 在 XML 中定义基于矢量图形,可直接嵌入 HTML 页面。

SVG 图形是可缩放的,即使缩放或调整大小也不会损失任何质量:

所有主流浏览器都支持 SVG。

什么是 SVG?

SVG 代表可缩放矢量图形
SVG 用于为 Web 定义基于矢量图形
SVG 以 XML 格式定义图形
SVG 文件中的每个元素和属性都可以动画化
SVG 是 W3C 推荐标准
SVG 与其他标准集成,例如 CSS、DOM、XSL 和 JavaScript

<svg> 元素

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种方法可用于绘制路径、矩形、圆形、多边形、文本等。

SVG圆形

SVG 圆形

示例

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

SVG 矩形

在这里插入图片描述

示例

<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

具有不透明度和圆角的 SVG 矩形

在这里插入图片描述

示例

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG 星形

在这里插入图片描述

示例

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG 渐变椭圆和文本

在这里插入图片描述

SVG
示例

<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
抱歉,您的浏览器不支持内联 SVG。
</svg>

SVG 和 Canvas 之间的区别

SVG 是一种用 XML 描述 2D 图形的语言,而 Canvas 则使用 JavaScript 动态绘制 2D 图形。

SVG 基于 XML,这意味着每个元素都可以在 SVG DOM 中使用。您可以将 JavaScript 事件处理程序附加到 SVG 图形。

在 SVG 中,每个绘制的形状都被记住为一个对象。如果更改了 SVG 对象的属性,浏览器可以自动重新呈现该形状。

Canvas 是逐像素渲染的。在 Canvas 中,一旦图形被绘制,浏览器就会忘记它。如果要更改其位置,则需要重新绘制整个场景,包括图形可能覆盖的任何对象。

SVG 与 Canvas 的比较

下表显示了 Canvas 与 SVG 之间的一些重要区别:

SVGCanvas
独立于分辨率依赖分辨率
支持事件处理程序不支持事件处理程序
良好的文本渲染能力文本渲染能力差
如果复杂则渲染速度慢您可以将生成的图像保存为 .png 或 .jpg
不适合游戏应用程序非常适合图形密集型游戏

总结

本文介绍了的html svg使用,如有问题欢迎私信和评论

标签:Canvas,HTML,示例,必知,svg,缩放,html,SVG,图形
From: https://blog.csdn.net/qq_24018193/article/details/140882229

相关文章

  • Aspose.Slides.NET 19.2 解析ppt内容保存svg 保存ppt内部图片
    //LoadPowerPointpresentationPresentationpresentation=newPresentation("D:\\work\\code\\demo\\WPFPPT\\test.ppt");varslide=presentation.Slides[3];//SaveslideasSVGvarstream=newFileStream(@"D:\图像{0}.svg",......
  • 【Dash】使用 HTML 和 CSS 创建图表
    一、StylingYourAppTheexamplesintheprevioussectionusedDashHTMLComponentstobuildasimpleapplayout,butyoucanstyleyourapptolookmoreprofessional.Thissectionwillgiveabriefoverviewofthemultipletoolsthatyoucanusetoenhanc......
  • HTML侧边部分内容滑动跟随 左侧跟随滚动模块代码
    网站是左右两列板块布局,左侧规划了客服代码,当鼠标下拉的时候,微信客服代码会出现上移的情况。为了提高转化,希望左侧客服模块跟随内容滚动。网站左侧跟随滚动模块这是截止目前最简单、高效的方法,代码简洁。代码<divid="box"><divid="float"class="div1">在这里放......
  • 手把手使用 SVG + CSS 实现渐变进度环效果
    效果轨道使用svg画个轨道<svgviewBox="00100100"><circlecx="50"cy="50"r="40"fill="none"stroke-width="10"stroke="#333"></circle></svg>简单的说,就是使用ci......
  • 【Java】Jsoup 解析HTML报告
    一、需求背景有好几种报告文件,目前是人肉找报告信息填到Excel上生成统计信息跟用户交流了下需求和提供的几个文件,发现都是html文件其实所谓的报告的文件,就是一些本地可打开的静态资源,里面也有js、img等等二、方案选型前面老板一直说是文档解析,我寻思这不就是写爬虫吗....因......
  • HTML5+CSS3笔记(Xmind格式):第一天
    Xmind鸟瞰图:文字总结:1.新增语义化标签:-header:定义文档的页眉,用来表示页面的头部。-nav:定义导航链接的部分nav元素代表页面中的导航,其中的导航元素链接到其他页面或当前页面的其他部分。-main:主体信息-aside:侧边栏-article:article元素表示文档、页面或应用程......
  • html标签语法总结
    HTML(超文本标记语言)是用于创建网页的标准标记语言。以下是HTML的基本语法格式:文档声明位于HTML文件的开头,告知浏览器使用的HTML版本,常见的有:<!DOCTYPEhtml>表示HTML5文档类型。<html>标签这是HTML文档的根标签,所有其他的HTML元素都必须嵌套在<html>标......
  • 08HTML+CSS
    昨天完成了一个小练习,将之前学习的内容都整合到一起了。1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0......
  • Python 下载 html 中的 图片
    安装requests、beautifulsoup4库#安装requests、beautifulsoup4库pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simple完成代码#pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simpleimportosimportr......
  • HTML基础笔记
    1.HTML语法规范1.1基本语法概述1.HTML标签是由尖括号包围的关键词,例如<html>2.HTML通常是成对出现的,叫做双标签,分别是开始标签,结束标签。<html></html>3。有些特殊的标签必须是单标签。<br/>1.2标签关系双标签关系可以分为两类:包含关系和并列关系。<html><head......