SVG入门

1、简介

使用xml描述的矢量文件。

2、兼容性

https://caniuse.com/#search=svg

3、使用方式

(1)浏览器直接打开

(2)html中使用img引用

 

<p><img src="simple.svg" 
width="50" height="50" />50 x 50</p>

 

(3)在html中直接使用svg标签

 

<p>
<svg xmlns="http://www.w3.org/2000/svg" 
width="200" height="200">
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black"/>
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140" 
stroke="white" stroke-width="3" fill="none" />
</svg>
</p>

 

 

 

(4)css背景

 

<style>
body {
background: #EFEFEF;
}
#bg {
width: 400px;
height: 400px;
background: white url(simple.svg) repeat;
box-shadow: rgba(0,0,0,.5) 2px 3px 10px;
border-radius: 10px;
}
</style>

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

红旗桌面版本最新运用方式和题目问题解答100例-4

33、RF4.0默许安装的软件有哪些&#xff1f; 默许安装的软件紧张有&#xff1a;KGhostView、Gimp、Pixie(图象阅读器)、屏幕截图挨次、扫描挨次、画图挨次&#xff1b;CD刻录 (cdbakeoven)、CD播放(kscd)、MP3播放(xmms)、kxine&#xff1b;星际译王、Mozilla、kmail、gftp、ga…

Maven常见问题和陷阱

喜欢它还是讨厌它&#xff08;很多人似乎都讨厌它&#xff09;&#xff0c; Maven是64&#xff05;的Java开发人员广泛使用的工具&#xff08;来源– 2014年Java工具和技术前景 &#xff09;。 大多数经验丰富的开发人员已经对Maven感到头疼。 通常以困难的方式&#xff0c;用…

Oracl数据库中大数据的备份-1

起原&#xff1a;chinaitlab  问&#xff1a;公司里的oracle数据库有20G之大(这是一个方案的大小.原本这个方案有30G,我已经把能删的数据都删了),怎样备份?觉得备份一次好慢啊.专家有什么指导一下的吗?(另:20G的数据库是不是备份也要20G多么?)我搁浅能每周备份一次,最好天…

js 值和引用

1、概述 简单值&#xff08;基本类型&#xff09;通过值复制的方式来赋值/传递。 复合值&#xff08;对象&#xff09;通过引用复制的方式来赋值/传递。 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><title…

js笔记(六)事件、正则

数组方法、字符串方法总结 大标题小节一、事件1.1 事件&#xff1b;1.2 事件对象&#xff1b;1.3 键盘事件的keyCode&#xff1b;1.4 关于鼠标的尺寸&#xff1b;1.5 事件冒泡&#xff1b;1.6 事件的默认行为&#xff1b;1.7 事件监听&#xff1b;1.8 事件委托&#xff08;事件…

Hazelcast入门指南第3部分

这是从初学者的角度来看一系列有关如何使用Hazelcast的文章的延续。 如果您还没有阅读最后两个&#xff0c;我鼓励您阅读它们&#xff1a; Hazelcast入门指南第1部分 Hazelcast入门指南第2部分 原始人来了 在上一篇文章中&#xff0c;我提到将ILock与IList和ISet一起使用&am…

Windows与Linux下进程间通信技术比较

一般我们写的程序都是以单个进程的方式来运行的&#xff0c;比较少涉及到多进程。特别是在windows下&#xff0c;因为Windows是按照线程来分配CPU时间片的&#xff0c;线程是最小的调度单位&#xff0c;所以在Windows下更多的用到多线程&#xff0c;在同一个进程里创建多个线程…

JSONP 原理

HTML 中 script 标签可以加载其他域下的js&#xff0c;比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢&#xff1f; 可以先这样试试&#xff1a; <script src"http://api.jirengu.com/weather.php"></script&g…

最长公共前缀(lca+trie树)

问题描述 给出一些串&#xff0c;多组询问求两个串的最长公共前缀。字符串总长 < 10^6。 输入格式 第一行一个整数n&#xff0c;表示字符串的个数。 接下来n行&#xff0c;每行一个字符串&#xff08;字符串不含空格&#xff09;。 第n2行一个整数m&#xff0c;表示询问总数…

vue笔记(三)生命周期、组件(嵌套)、数据传递

生命周期文档 一、生命周期 1、参考一 2、参考二 二、自定义组件 1. 使用&#xff1a;<组件名></组件名> 2. 定义组件&#xff1a; &#xff08;1&#xff09;方法一&#xff1a;官网 let 组件变量名 Vue.extend({template:<div class"header"&…

实用程序类的OOP替代

实用程序类&#xff08;也称为帮助程序类&#xff09;是仅具有静态方法且不封装任何状态的“结构”。 StringUtils &#xff0c; IOUtils &#xff0c; FileUtils从Apache的共享 ; Guava的 Iterables和Iterators以及JDK7的Files是实用程序类的完美示例。 这种设计思想在Java世…

神州泰岳2050万元收买并增资奇点国际

网易科技讯 3月7日消息&#xff0c;神州泰岳来日诰日颁布发表关照公告&#xff0c;将经由股权让渡体例共付出1450万元股权让渡款获得奇点国际100%股权&#xff0c;同时神州泰岳与邵起明分别出资600万元、200万元对奇点国际举行增资。本次增资后&#xff0c;奇点国际注册资金增进…

Vue 状态管理 Vuex

1、概述 Vuex作为插件&#xff0c;管理和维护整个项目的组件状态。 2、安装vuex cnpm i --save vuex 3、vuex使用 github地址&#xff1a;https://github.com/MengFangui/Vuex new Vue({el: #app,router: router,//使用vuexstore: store,render: h > {return h(App)}}); …

拯救你丢失的精度——BigInteger和BigDecimal类(入门)

第三阶段 JAVA常见对象的学习 BigInteger和BigDecimal类 BigInteger类 (一) 构造方法&#xff1a; //针对超过整数范围的运算(整数最大值&#xff1a;2147483647) BigInteger(String val) (二) 常用方法&#xff1a; //加 public BigInteger add(BigInteger val) //减 public…

vue笔记(四)注册组件,路由,vuex

官网 一、项目中的组件注册 二、路由 三、vuex 一、项目中的组件注册 1. 全局 import Loading from /components/loading;//封装的loading组件 Vue.component(Loading,Loading);2. 局部 <loading/>important loading from ./components/loadingcomponents:{loading}二…

#102030:在30天内运行20 10K,庆祝Java 20年

1995年5月23日是技术史上的重要时刻。 业界似乎并没有意识到当天发布的语言会在未来几年内完全改变技术的格局。 Java将在今年的同一天庆祝20岁生日。 Java 20年&#xff0c;哇&#xff01; 回顾20年前的存储器时代&#xff0c;思考一下Java的发明时间/方式。 万维网专用于精…

Java第二次实训

/*3、按要求编写一个Java应用程序&#xff1a; &#xff08;1&#xff09;定义一个类&#xff0c;描述一个矩形&#xff0c;包含有长、宽两种属性&#xff0c;和计算面积方法。 &#xff08;2&#xff09;编写一个类&#xff0c;继承自矩形类&#xff0c;同时该类描述长方体&am…

vue笔记(一)基本使用、数据检测

vue 官网 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。 一、基本使用 二、数据检测 一、Vue的思想 MVC【参考 nd的博客园】&#xff1a; 名称描述M&#xff08;…

Hazelcast入门指南第2部分

本文是我开始以Hazelcast &#xff08;分布式内存数据库&#xff09;为特色的系列文章的继续。 如果尚未阅读第一篇文章&#xff0c;请单击此处 。 分布式馆藏 Hazelcast具有许多可用于存储数据的分布式集合。 以下是它们的列表&#xff1a; 清单 我设置 队列 清单 IList是…

防止DISCUZ根域名跳转到forum.php的方法

症状&#xff1a;输入http://www.sn03.com/跳转到www.cn03.com/forum.php&#xff0c;这样有两个不好&#xff0c;1、用户复制时不利于传播&#xff0c;2、两个页面内容的重复对搜索引擎排名不利&#xff0c;如何取消这个呢&#xff1f; 全局-域名设置-应用域名-默认&#xff1…