AI编辑SVG格式的相关问题

时间：2022-08-21 07:29:17

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

}

相关文章