svg

简介

HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、曲线，以及其他形状。一个简单的SVG文档由根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。
  • SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）
  • SVG里的属性值必须用引号引起来，就算是数值也必须这样做。

第一个例子：

[InvalidCharacterError: "<" did not match the Name production]
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
SVG
在react中，注意得把 font-size 写成 fontSize

显示SVG

SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。
  • 如果HTML声明类型为application/xhtml+xml，可以直接把SVG嵌入到XML源码中。
  • 如果HTML是HTML5并且浏览器支持HTML5，同样可以直接嵌入SVG。然而为了符合HTML5标准，可能需要做一些语法调整。
  • 通过 object 元素引用SVG文件：[InvalidCharacterError: "OBJECT<" did not match the Name production]
  • 使用 iframe 元素引用SVG文件：[InvalidCharacterError: "IFRAME<" did not match the Name production]
这里定义的画布尺寸是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