AI编辑SVG格式的相关问题 - Tirion

时间：2024-03-10 19:01:33

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的过程，就会产生出从一个点画出整个描边的效果
}

相关文章