svg - 深度笔记

NoteDeep
简介
HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、曲线，以及其他形状。一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）
SVG里的属性值必须用引号引起来，就算是数值也必须这样做。

第一个例子：
<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

在react中，注意得把 font-size 写成 fontSize

显示SVG
SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。
如果HTML声明类型为application/xhtml+xml，可以直接把SVG嵌入到XML源码中。
如果HTML是HTML5并且浏览器支持HTML5，同样可以直接嵌入SVG。然而为了符合HTML5标准，可能需要做一些语法调整。
通过 object 元素引用SVG文件：<object data="image.svg" type="image/svg+xml" />
使用 iframe 元素引用SVG文件：<iframe src="image.svg"></iframe>

<svg width="200" height="200" viewBox="0 0 100 100">
这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。

svg 中的基本形状：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes

参考文献：
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Introduction
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
评论列表

评论...