AI編輯SVG格式的相關問題

制作SVG：
1、需要給每個圖層命名，生成的SVG文件的（表示一個路徑，另外還有標簽等）標簽就會有個id屬性是這個圖層的名字
2、保存的時候內嵌文字可以保存為SVG或轉為path格式，如果沒有文字，則無所謂

使用SVG：
方法一
使用文本編輯器打開保存的.svg文件，從中拷貝出標簽中的內容到HTML文件中使用，使用過程中也可以按需修改svg的各種屬性，如width,height等

方法二
使用外部SVG文件的方式：
1、使用一個空svg標簽占位，如：<svg data-src='img/mysvg1.svg' width="200" height="100"></svg>
2、使用AJAX異步加載svg

$(function(){
  $("svg['data-src']").each(function(index,svg){  //遍歷所有含有data-src屬性的svg標簽
    var src=svg.data("src");
    $.ajax({
      "url":src,
      "dataType":"xml",
      "success":function(svgDocument){
        var $doc=svgDocument.documentElement;  //取得svg文件的內容
        $doc.attr({"width":$(svg).attr("width"),"height":$(svg).attr("height")});
        $(svg).after($doc).remove();  //將AJAX得到的svg添加到后面，再移除
      }
    });
  });
});

使用CSS修改svg的樣式：

svg path,polygon{
  fill:white;  填充色
  stroke:orange;  描邊色
  stroke-width:6px;  描邊寬度
}
如何實現描邊動畫
svg polygon{
  stroke-dasharray:1500;  設置此屬性后，描邊會變成一段段的線（虛線描邊），然后將值設置得越大，每段就越長，當足夠大的時候就形成一條描邊的效果
  stroke-dashoffset:-1500;  設置此屬性后，描邊會從一邊開始偏移，這里就是完全偏移產生沒有描邊的效果
  transition:.3s;  設置過度動畫，沒傳入過度屬性就是所有屬性都過度
}
svg polygon:hover{
  stroke-dashoffset:0;  觸發過度動畫，描邊偏移量變成0的過程，就會產生出從一個點畫出整個描邊的效果
}