欢迎光临
我的个人博客网站

动态svg图片简单制作


一、简介

动态svg图片简单制作 博主头像

svg图片格式不同于其它图片格式,svg图片本质上是一个xml文件,它内部是标记语言,可用文本编辑器打开编辑。
svg除了可以用ai这种制图软件制作以外,我们程序员也可以手写svg代码实现二次开发(从零画图不必要…不至于…)。

二、svg文件简单编辑

svg语法类似于html,且支持css语法,浏览器通过读取css来渲染动画。有趣的是,GitHub的 README.md 文件只支持少数html标签、属性,几乎完全不支持css样式,但是你插入带css的svg图片就没问题。

2.1 嵌套

<g>标签可以用于嵌套,包括嵌套子svg文件,拷贝进去就行。
<g>标签一般使用id属性,而<path> <circle>等标签一般使用class。添加动画的话在<style>标签中使用css即可。

2.2 调整大小

使用以下属性

width="366" height="366" viewBox="0 0 366 366" 

前二者好理解,viewBox可有可无,有的话前两位一般是0,后两位最好和width、height保持一致。一般来说,只有<svg>主标签内的viewBox属性比较重要。

2.3 位移

想移动元素在图片中的位置,使用 transform="translate(x y)" 属性。
如你从其它svg中拷贝了一些图形过来,嵌套在<g>标签中,则在<g>标签中使用transform就能调整其位置。
如果xy为0,则图形在最左上角,图形中心的位置是width、height的一半。

2.4 嵌套其它图片格式

如果要在svg中嵌入png、jpg等图片,需要用到<image>标签。
调用远程图片的话,首先确保<svg>主标签内有xmlns:xlink="http://www.w3.org/1999/xlink",然后可以这样使用

<image xlink:href="url" x="0" y="0" width="200" height="200"/> 

注意事项参考:https://cloud.tencent.com/developer/section/1423874

此外,远程调用存在一些问题,比如直接在页面中远程使用此svg图片,其中的<image>能显示。如果是被js渲染出的svg图片,则svg中的<image>就可能不被加载。所以我推荐将图片直接存在svg图片中
使用base64编码即可:
>>在线图片base64编码工具<<
将编码结果放入 xlink:href=” 这里 即可。

就酱 (๑•̀ㅂ•́)و✧

赞(0) 打赏
未经允许不得转载:张拓的天空 » 动态svg图片简单制作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏