svg的学习

svg的学习

1，初步了解

1，大致看了一下svg的简介，在图形的操作和展示上有很大的优势，例如不会失精；灵活的dom操作；很好的兼容性（IE需要下载插件）。so,是一门值得深究的前端课程；

2，看了一个小demo，使用xml的语言，创建.svg后缀文件（文件的后缀名可认为是一种标识，文件解析不会按照文件去解析，so html or js or xml解析时，与放在什么样的文件里面是没有关系的）

2，小试牛刀

1，demo总结点；

　　（1）standalone该文件是否独立，当对外部文件有引入时，standalone=‘no’；当值为‘yes’时，表示当前文件不需要依靠外部文件，自包含；不会报错。

　　（2）需要将svg文件引入html中时，提供了几个标签，embed;iframe;object；img，并提供属性执行下载显示插件。经实验，支持性受限。支持性较好的是Object，Object之间的标签是用来在Object不显示的情况下渲染的。

　　（3）命名空间的理解；xmlns，当前以及子空间，解析需要的语言命名。

　　（4）当svg不设置高宽，没有viewbox属性时，svg默认值是300*150；如果有viewbox属性，svg的默认是html的大小。

　　（5）viewbox（x,y,width,height）理解点：从x,y坐标，截取50宽，50长的画布区域，放在width 100 height 100 的svg画布上放大显示。

　　（6）patternUnits两个值得区别，objextBoundingBox按照比例定宽高平铺；userSpaceOnUse按照引用对象宽度全铺。

　　（7）svg的样式定义时，需要display：block  ---- svg画图时，样式定义遇到疑难点

　　（8）当svg使用了viewbox属性，子元素的宽高失效，按照比例显示 ---- svg画图时，布局问题

　　（9）svg添加文本，是否只能绘制文本了？innerHtml之类是否可用？-------text

　　（10）svg被作为外部文件引入时，不会继承在父文档中的任何样式？

　　（11）preserveAspectRatio的取值区别和使用？--- 当我们在使用viewBon将画布进行裁剪等操作后，的图形放在svg图形的什么位置 xMinYMax等

　　（12）需分清楚svg中哪些元素可嵌套，哪些不可嵌套？circle中写text是没法正常显示的。

　　（13）关于text，一篇不错的文章---https://www.cnblogs.com/fzz9/p/9256265.html

　　（14）想要一个组只有在被引用的时候，显示，使用defs。

　　（15）使用createElement动态创建svg元素，失效 ----- 踩坑  ----使用createElementNS，与createElemen相似，可以指定命名空间。

　　（16）操作svg的元素时，遇到了shadow-root问题，导致不法操作其中dom。

mode为open时，我们可以使用shadowRoot（隐藏的dom树结构）进行访问，如下图所示

当mode是close的时候，隐藏的dom是不支持访问的；so...当我们需要动态使用use创建dom，并且需要支持修改use引用的g或者defs dom里面的内容，我们只能需要通过在js里面动态创建了；

html：

js：　　

结果：

解决办法：将组的生成放在js当中动态生成

效果图：