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,一经查实,立即删除!

相关文章

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;事件…

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

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

拯救你丢失的精度——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的发明时间/方式。 万维网专用于精…

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

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

js笔记(二)数组、对象、this

大标题小节一、数组1. 数组的创建、赋值、分类&#xff1b;2. 数组的简单操作&#xff08;根据索引增、查、改&#xff09;&#xff1b;3. 声明式和构造函数创建的数组的区别&#xff1b;4.数组的方法&#xff1a;push()、unshift()、splice()、pop()、shift()、slice()、sort(…

js笔记(四)内置对象Math和Date()、浏览器对象模型BOM

大标题小标题备注一、内置对象Math、Date()1. Math 数学对象;2. Date() 日期对象;常用的数学对象&#xff1a;Math.PI、abs(n)、round(n)、random()、floor(n)、ceil(n)、pow(x,y)、sqrt(n)、min(3,4,5,6)、max()、sin(弧度)、cos()、tan()&#xff1b;获取日期&#xff1a;get…

ListView展示SIM信息

首先看一下程序运行后的图片&#xff1a; 在开始写代码之前&#xff0c;看展示下程序的结构&#xff1a; 下面开始代码, 第一步&#xff0c;主程序代码&#xff1a; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundl…

js笔记(五)文档对象模型DOM

大标题小节一、DOM选择器1. id 选择器&#xff1a;getElementById("id名")&#xff1b;2. class 选择器&#xff1a;getElementByClassName("class名")&#xff1b;3. 标签选择器&#xff1a;getElementsByTagName("标签名")&#xff1b;4. name…

Flot画实时曲线

源代码&#xff1a; <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>深海的小鱼编制-PLOT</title> <script language"javascript" type"text/javascript" src"…

RHQ指标的WildFly子系统

对于RHQ-Metrics&#xff0c;我已经开始为WildFly 8编写一个子系统&#xff0c;该子系统能够在WildFly内收集指标&#xff0c;然后以固定的时间间隔&#xff08;当前为每分钟&#xff09;将其发送到RHQ-Metrics服务器。 下一张图是该发件人连续运行1.5天时结果的可视化效果的G…

Linux下实现客户端和服务器端的通信

首先&#xff0c;可以将代码复制下来放到U盘里&#xff0c;然后挂载到Linux上 挂载步骤 找到设备->USB->你U盘的名字 挂载成功 访问U盘把代码拷贝到home文件夹下&#xff0c;就可以直接进行编译。 client.c #include <stdio.h> #include <unistd.h>#include…

js笔记(八)ES6

大标题补充描述一、 ES6 中新增的声明方式&#xff1a;let、constvar、let、const之间的区别二、 ES6 字符串扩展1. 子串的识别&#xff1a;includes()、startsWith()、endsWith()&#xff1b;2. 重复字符串&#xff1a;repeat()&#xff1b;3. 字符串补全&#xff1a;padStart…

webpack css打包为一个css

1、安装 npm install extract-text-webpack-plugin --save-dev 2、项目目录&#xff1a; index文件夹下的index.css&#xff1a; body{background-color: #ccc;}.flex-div{display: flex;} index文件夹下的index2.css&#xff1a; p{text-indent: 2em;} index文件夹下的index-l…

javascript深入理解js闭包

闭包&#xff08;closure&#xff09;是Javascript语言的一个难点&#xff0c;也是它的特色&#xff0c;很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包&#xff0c;首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种&#xff1a;全局变量和局…

Codeforces Round #568 (Div. 2) G2. Playlist for Polycarp (hard version)

因为不会打公式&#xff0c;随意就先将就一下&#xff1f; #include<cstdio> #include<algorithm> #include<iostream> #include<cstring> #include<vector> using namespace std; typedef long long LL; const int N55; const int MOD1e97; int…

jQuery实现页面关键词高亮

示例代码&#xff0c;关键位置做了注释&#xff0c;请查看代码&#xff1a; <html><head><title>jQuery实现页面关键词高亮</title><style type"text/css">* {margin: 0;padding: 0;}p {padding: 10px;margin-bottom: 20px;}.highligh…

简而言之,JUnit:测试隔离

作为顾问&#xff0c;我仍然经常遇到程序员&#xff0c;他们对JUnit及其正确用法的理解最多。 这使我有了编写多部分教程的想法&#xff0c;从我的角度解释了要点。 尽管存在一些有关使用该工具进行测试的好书和文章&#xff0c;但是也许可以通过本动手实践的方法来使一两个额…