结果图：

将以下代码保存至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. PHP科普

    1.PHP是什么意思? 超文本预处理器(Hypertext Preprocessor) 2.PHP是干什么用的? PHP是一种通用开源脚本语言.语法吸收了C语言.Java和Perl(实际抽取与汇报语言 ...

  2. Flex 布局：语法篇

    网页布局(layout)是 CSS 的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊布局非常不方便,比如, ...

  3. D. Powerful array

    D. Powerful array 题意 给定一个数列:a[i] (1<= i <= n) K[j]表示 在区间 [l,r]中j出现的次数.有t个查询,每个查询l,r,对区间内所有a[i] ...

  4. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  5. 《孵化twitter》读书笔记

    寒假在家看完了第一本书——<孵化twitter:从蛮荒到IPO的狂野旅程>.在2014上半年,尝试看了该书的英文原版,奈何自己英语太菜,实在看不懂.这次有了中文版,就决定要看看.该书对于我 ...

  6. Spring+SpringMVC+MyBatis深入学习及搭建(十)——MyBatis逆向工程

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6973266.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(九)--My ...

  7. Javascript中的数组去重-indexof方法

    在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...

  8. 第4章 ext文件系统机制

    本文目录: 4.1 文件系统的组成部分 4.2 文件系统的完整结构 4.3 Data Block 4.4 inode基础知识 4.5 inode深入 4.6 单文件系统中文件操作的原理 4.7 多文件 ...

  9. php 多条件查询

    1.效果图如下: 点击提交后,把符合条件的筛选出来 2.代码: 逻辑:选中数据----以数组方式提交---拼接sql语句 难点: (1)从数据库里读取的数据要去重 (2)读取的数据是数组,要拼接 (3 ...

  10. 委托（C#）

    委托,delegate 关键字用于声明一个引用类型,该引用类型可用于封装命名方法或匿名方法.委托类似于 C++ 中的函数指针:但是,委托是类型安全和可靠的.委托类型声明的格式如下: public de ...