动态svg图片简单制作
一、简介
#topics #no-box-shadow-img { box-shadow: none }
博主头像
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=" 这里
" 即可。
就酱 (๑•̀ㅂ•́)و✧
动态svg图片简单制作的更多相关文章
- 彰显个性│制作一个独一无二的动态 svg 头像
一.头像预览 看一下博主的动态图像,是不是很炫酷,想不想拥有一个? 这是一个 svg 图片,svg 图片不仅可以通过制图软件制作外,其实也可以通过代码进行开发 因为 svg 本质上是一个下 xml 文 ...
- 动态插入图片到 svg 中
动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...
- Svg图片在asp网站上的使用
最近需要做一个动态的根据后台的返回数据而动态显示的导航图,然后我就采用了jquery+ajax+SVG矢量图来实现这个功能. 首先,客户给了个ai的矢量图,我对这一块不懂就找以前同事帮我转成了svg图 ...
- Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_148 在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如Iconf ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- WP8.1开发中关于如何显示.gif格式动态格式图片方法
这几天又遇到个问题,就是如何显示动态图片,本来以为和显示静态图片一样,谁知不行,在网上一查才知道WP8.1不支持.gif格式动态图片的显示: 后来又在MSDN论坛上查找,也有人问类似的问题,后来就大概 ...
- SVG交互动画制作
前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画), ...
- vue-cli3项目中解决动态引入图片img404的问题
博主最近手头再做一个项目,需要调用天气接口,并且还要动态显示天气相关图片icon. 本来以为没什么大问题,结果硬生生被这个动态图片路径搞得民不聊生(博主还是 too young,too simple~ ...
- UWP应用载入SVG图片的兼容性方案
原文 UWP应用载入SVG图片的兼容性方案 新版本<纸书科学计算器>的更新点之一,就是优化了表达式的显示方式.在旧版本中,表达式里的符号是用png图片显示的,当用户放大看的时候会发现一些锯 ...
随机推荐
- k8s event监控利器kube-eventer对接企微告警
背景 监控是保障系统稳定性的重要组成部分,在Kubernetes开源生态中,资源类的监控工具与组件监控百花齐放. cAdvisor:kubelet内置的cAdvisor,监控容器资源,如容器cpu.内 ...
- mysql之binlog和各类日志介绍
1.错误日志 错误日志作用: 记录MySQL的启动.停止信息以及在MySQL运行过程中的错误信息. 参数log_error(默认开启) 修改后重启生效 log_error=[path/[file_n ...
- Python_爬虫_urllib解析库
简介:提取网页保存到txt文件中 + 解析txt文件内容,取出内容 from urllib import request import re.json url="http://www.163 ...
- Win10系统下安装VC6.0教程
学习一门语言最重要的一步是搭建环境,许多人搭建在搭建环境上撞墙了,就有些放弃的心理了:俗话说,工欲善其事,必先利其器:所以接下来我们进行学习C的第一步下载编程所用的工具;当然也有其它的软件,只不过初学 ...
- 小程序后端获取openid (php实例)
小程序获取openid 首先,小程序授权登录的时候,前端就会获取到code 而后端接收到了code之后,就可以向微信发起请求,获取用户的openid代码如下: <?php $code = $_R ...
- 文档丢失不用怕,EasyRecovery帮你一键恢复
我们在使用电脑的过程中,有时会因为各种原因,导致我们所写的文档丢失了.遇到这种情况,该怎么办呢? 下面,就给大家分享一下用EasyRecovery如何恢复被丢失的文档. 1.双击进入EasyRecov ...
- vulnhub: DC 4
信息收集: yurang@kali:~$ nmap -sn 192.168.76.1/24 Starting Nmap 7.80 ( https://nmap.org ) at 2020-08-04 ...
- C3PO数据库连接池
1 <?xml version="1.0" encoding="UTF-8"?> 2 3 -<c3p0-config> 4 5 6 -& ...
- 10、Spring Boot分布式
1.分布式简介 2.Zookeeper和Dubbo 3.zookeeper (1).zookeeper安装 官方文档:https://hub.docker.com/_/zookeeper?tab= ...
- Eclipse的环境配置
1.想要配置Eclipse的环境,就要先下载Eclipse,并安装它,不会下载安装的小伙伴可以点击下面给的链接,里面有我写的详细的教程,这里就不重复了 Eclipse下载与安装:https://blo ...