唐·李白|

园龄:粉丝:关注:

浅谈一下SVG的学习与使用( >_< )

1.什么是SVG?

SVG,可缩放矢量图形(Scalable Vector Graphics),是一种用于描述二维图形的 XML 标记语言。与位图图像不同,SVG 图像以文本形式存储,并且可以缩放到任意大小而不会失真,因为它们基于数学描述而不是像素。

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

2.使用SVG的优势在哪?

  • 可缩放性:SVG 图像可以无损地缩放到任意大小而不失真。这是因为 SVG 是基于矢量描述的,而不是像素图像,因此在不同分辨率和尺寸的屏幕上都能保持清晰。

  • 文本性质:SVG 文件是基于XML的文本文件,易于编辑和维护。你可以直接编辑 SVG 文件来调整图形,也可以使用文本编辑器或代码编辑器来创建和修改 SVG 图像。

  • 交互性:SVG 允许添加交互式元素,如链接、动画和事件处理器。这使得 SVG 图像可以与用户进行交互,从而创建更丰富的用户体验。

  • 动画支持:SVG 支持使用 CSS 和 JavaScript 创建动画,使图形更生动。你可以通过 CSS 动画或 JavaScript 脚本来实现 SVG 图形的动态效果,如过渡、旋转、缩放等。

  • 可嵌入性:SVG 图像可以直接嵌入到 HTML 文档中,也可以作为外部文件链接到 HTML 文档中。这使得 SVG 图像可以与其他Web技术无缝集成,如 CSS、JavaScript 等。

3.SVG的基本语法?

      <svg  width="100px" height="100px">
          <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
      </svg>
    • SVG文档以 <svg> 标签开始,以 </svg> 标签结束。

    • SVG元素使用标签来描述不同的图形,例如 <circle> 表示圆形,<rect> 表示矩形等。

    • SVG元素可以包含属性,用于指定图形的各种特性,如位置、大小、颜色等。

4.SVG一些基本的图形绘制

SVG 提供了一系列的图形元素来绘制各种形状的图形,如矩形、圆形、直线、多边形等。

    • <rect>:绘制矩形:使用 <rect> 元素绘制矩形,可以指定矩形的位置、大小、圆角等属性。<rect x="50" y="50" width="100" height="50" rx="10" ry="10" fill="blue" />

    • <circle>:绘制圆形:使用 <circle> 元素绘制圆形,可以指定圆心坐标和半径。<circle cx="100" cy="100" r="50" fill="red" />

    • <ellipse>:绘制椭圆:使用 <ellipse> 元素绘制椭圆,可以指定椭圆的中心坐标和长短轴的半径。<ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />

    • <line>:绘制直线:使用 <line> 元素绘制直线,需要指定起点和终点坐标。<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />

    • <polyline>:绘制折线:使用 <polyline> 元素绘制折线,需要指定多个点的坐标。<polyline points="100,50 150,150 50,150" fill="none" stroke="blue" stroke-width="2" />

    • <polygon>:绘制多边形:使用 <polygon> 元素绘制多边形,需要指定多个顶点的坐标。<polygon points="100,50 150,150 50,150" fill="orange" />

    • <path>:绘制路径:使用 <path> 元素绘制路径,可以通过指定一系列的路径命令来绘制各种形状。<path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black" stroke-width="2" />

5.其它的一些属性介绍:https://www.runoob.com/svg/svg-example.html

渐变和填充:

    • 使用 <linearGradient> 或 <radialGradient> 定义渐变。

    • 使用 fill 和 stroke 属性指定填充和描边样式。

文本和字体:

    • 使用 <text> 元素插入文本。

    • 使用 font-familyfont-size 等属性控制文本样式。

动画和交互:

    • 使用CSS或JavaScript创建动画效果。

    • 添加事件处理器实现交互功能,如鼠标点击、悬停等。

SVG 元素属性:

SVG元素可以具有各种属性,用于指定图形的位置、大小、颜色等特性。

      • cx 和 cy 属性定义了圆心的x和y坐标。

      • r 属性定义了圆的半径。

      • fill 属性定义了填充颜色。

      • stroke 属性定义了描边颜色。

      • stroke-width 属性定义了描边宽度。

 

嵌套和分组:

SVG 元素可以嵌套和分组,以便更好地组织和管理图形元素。

      • <g> 元素用于创建一个分组。

      • id 属性用于为分组指定一个唯一的标识符。

 

本文作者:wyl-1113

本文链接:https://www.cnblogs.com/wyl-1113/p/18218331

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   #人生苦短  阅读(7)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

作曲 : Reol

作词 : Reol

fade away...do over again...

fade away...do over again...

歌い始めの一文字目 いつも迷ってる

歌い始めの一文字目 いつも迷ってる

どうせとりとめのないことだけど

伝わらなきゃもっと意味がない

どうしたってこんなに複雑なのに

どうしたってこんなに複雑なのに

噛み砕いてやらなきゃ伝わらない

ほら結局歌詞なんかどうだっていい

僕の音楽なんかこの世になくたっていいんだよ

Everybody don't know why.

Everybody don't know why.

Everybody don't know much.

僕は気にしない 君は気付かない

何処にももういないいない

Everybody don't know why.

Everybody don't know why.

Everybody don't know much.

忘れていく 忘れられていく

We don't know,We don't know.

目の前 広がる現実世界がまた歪んだ

目の前 広がる現実世界がまた歪んだ

何度リセットしても

僕は僕以外の誰かには生まれ変われない

「そんなの知ってるよ」

気になるあの子の噂話も

シニカル標的は次の速報

麻痺しちゃってるこっからエスケープ

麻痺しちゃってるこっからエスケープ

遠く遠くまで行けるよ

安定なんてない 不安定な世界

安定なんてない 不安定な世界

安定なんてない きっと明日には忘れるよ

fade away...do over again...

fade away...do over again...

そうだ世界はどこかがいつも嘘くさい

そうだ世界はどこかがいつも嘘くさい

綺麗事だけじゃ大事な人たちすら守れない

くだらない 僕らみんなどこか狂ってるみたい

本当のことなんか全部神様も知らない

Everybody don't know why.

Everybody don't know why.

Everybody don't know much.

僕は気にしない 君は気付かない

何処にももういないいない

Everybody don't know why.

Everybody don't know why.

Everybody don't know much.

忘れていく 忘れられていく

We don't know,We don't know.