结果图：

将以下代码保存至sample.svg文件中：

<!-- SVG图形一开始生命命名空间 -->

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <!-- 图形的坐标系 -->

	<defs> 				<!-- 设置后面要用到的一些定义 -->

		<linearGradient id="fade"> 	<!-- 设置一种渐变色命名为“fade” -->

			<stop offset="0%" stop-color="#008"/> 	<!-- 深蓝 -->

			<stop offset="100%" stop-color="#ccf"/> <!-- 渐变到浅蓝 -->

		</linearGradient>

	<!-- 画一个具有宽的黑色边框并且渐变色为填充色的矩形 -->

	</defs>

	<rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="url(#fade)"/>

</svg>

　

　以下为html显示文件：

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>SVG矢量图</title>

</head>

<body>

<object data="./sample.svg" type="image/svg+xml" width="300px" height="300px" />

</body>

</html>

　　

<object>元素+svg 绘制图片的更多相关文章

  1. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  2. PIE SDK图片元素的绘制

    1. 功能简介 在数据的处理中会用到图片元素的绘制,利用IPictureElement图片元素接口进行绘制,目前PIE SDK支持IPictureElement元素接口的绘制,下面对图片元素的绘制进行 ...

  3. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  4. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  5. PIE SDK点元素的绘制

    1. 功能简介 在数据的处理中会用到点元素的绘制,目前PIE SDK支持IMarkerSymbol的点元素的绘制,MarkerSymbol对象是用于修饰点状对象的符号,它包括ArrowMarkerSy ...

  6. PIE SDK线元素的绘制

    1. 功能简介 在数据的处理中会用到线元素的绘制,目前PIE SDK支持ILineSymbol的线元素的绘制,LineSymbol对象是用于修饰线状对象的符号,它包括CartographicLineS ...

  7. PIE SDK临时元素的绘制

    1. 功能简介 在数据的处理中会用到临时元素的绘制,用于当前显示:临时元素包括点.线.面.文本.图片五种元素:目前PIE SDK支持这五种元素的绘制,下面对五种临时元素的绘制功能进行介绍. 2. 功能 ...

  8. svg image 图片无法铺满 circle 的问题解决

    引子 使用d3.js绘制了力布图后,需要在circle中绘制图片,方法如下: // 绘制图片 drawPattern(gContainer) { let that = this; let gPatte ...

  9. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

随机推荐

  1. OpenStack云平台的网络模式及其工作机制

    网络,是OpenStack的部署中最容易出问题的,也是其结构中难以理清的部分.经常收到关于OneStack部署网络方面问题和OpenStack网络结构问题的邮件.下面根据自己的理解,谈一谈OpenSt ...

  2. 【T-SQL】系列文章全文目录（2017-06-02更新）

    本系列[T-SQL]主要是针对T-SQL的总结. T-SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...

  3. python——快速找出两个电子表中数据的差异

    最近刚接触python,找点小任务来练练手,希望自己在实践中不断的锻炼自己解决问题的能力. 公司里会有这样的场景:有一张电子表格的内容由两三个部门或者更多的部门用到,这些员工会在维护这些表格中不定期的 ...

  4. linux下mysql重置密码

    如果忘记mysql的root密码可以采取下面的步骤重新设置 1.kill掉所有mysql的进程 2.使用--skip-grant-tables的参数启动mysql shell> mysqld_s ...

  5. Sublime常用插件

    注:此插件为我自己在用的,仅代表个人,如果发现好用的插件,会不断更新此博文. 1,package control 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安 ...

  6. dede系统自定义变量删除方法

    之前添加了个联系电话的系统变量,忘记写描述,结果就显示个冒号,很难看.这样的就要删除了重来,那么织梦怎么删除添加的变量呢?其实很简单.两种方法: 第一种:执行SQL语句.在织梦后台执行-系统-SQL命 ...

  7. NodeMCU入门（4）：搭建Web服务器，配置网络连接

    准备工作 1.NodeMCU模块 2.ESPlorer v0.2.0-rc6 3.NodeMCU-HTTP-Server 搭建web服务器 下载https://github.com/wangzexi/ ...

  8. 阻止Nmap的黑手

    大大们办网站,首先要做的就是安全,一般黑客都会用nmap扫描我们的网站这是我们所不希望看到的一下我提供几个过滤机制,nmap是无法扫描到你的 1 #iptables -F 2 #iptables -A ...

  9. Java 9 揭秘（4. 模块依赖）

    文 by / 林本托 Tips 做一个终身学习的人. 在此章节中,主要学习以下内容: 如何声明模块依赖 模块的隐式可读性意味着什么以及如何声明它 限定导出(exports)与非限定导出之间的差异 声明 ...

  10. ASP.NET MVC开发学习过程中遇到的细节问题以及注意事项

    1.datagrid中JS函数传值问题: columns: { field: 'TypeName', title: '分类名称', width: 120, sortable: true, format ...