SVG学习笔记与参考

简介

https://www.w3cschool.cn/svg/svg-intro.html
w3c svg简介

SVG 可伸缩矢量图片，作为D3.js的前置知识。

实例

图形

代码

<!-  XML声明 standalone=no 表示还有外部文件的引用 这里指的是DTD -->
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"        
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        
  <circle cx="100" cy="50" r="40" stroke="black"        
  stroke-width="2" fill="red" />        
</svg>

SVG在HTML中的使用

参考资料

https://www.w3cschool.cn/svg/svg-inhtml.html
https://segmentfault.com/a/1190000010942431

内部使用

直接在HTML嵌入SVG代码

外部引用

通过src标签

<img src="./test.svg" style="display:block;width:330px;height:240px" />

svg里面带的<image>标签将无法正常显示。<img>标签适合显示纯矢量+文本的SVG图片。

通过embed标签 - 推荐使用

<embed src="./test.svg" style="display:block;width:330px;height:240px" />

注意使用viewBox，<embed>标签的兼容性也很不错的，是个不错的选择。

通过object标签

通过ifame标签

通过div背景url

标签参考

<g></g>

用于把相关元素进行组合的容器元素。

参考手册

https://www.w3cschool.cn/svg/svg-reference.html