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當中動態生成

效果圖：

?

轉載于:https://www.cnblogs.com/angel1254/p/10833303.html

總結

以上是生活随笔為你收集整理的svg的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。