结果图：

将以下代码保存至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. Android 图片加载框架Picasso基本使用和源码完全解析（巨细无比）

    写在之前 原本打算是每周更新一篇博文,同时记录一周的生活状态,但是稍微工作忙一点就顾不上写博客了.悲催 还是说下最近的状况,最近两周一直在接公司申请的计费点, 沃商店,银贝壳,微信等等,然后就是不停的 ...

  2. 一篇%3CDIV%20style%3D%22FONT-SIZE%

    %3CDIV%20style%3D%22FONT-SIZE%3A%2016px%22%3E1%EF%BC%8C%E6%88%91%E4%BB%A5%E4%B8%BA%E7%BB%88%E6%9C%89 ...

  3. Java之进程与线程练习

    1.设计一个线程类:创建3个子线程,每个线程分别打印数字,分别睡眠100,200,300ms ->每个执行都是20次 代码: package Homework; //1.设计一个线程类:创建3个 ...

  4. 导入java项目时出现红色叹号问题的解决

    问题:导入java项目时出现红色叹号(如下图所示) 原因:引入项目的某些jar包跟自己电脑上的位置不一样: 解决方案:步骤如下 (1)右键红色叹号所在项目————>build path————& ...

  5. STL语法——映射：map 反片语（Ananagrams，UVa 156）

    Description Most crossword puzzle fans are used to anagrams--groups of words with the same letters i ...

  6. 夜神模拟器与HBuilder连接/cmd运行提示符/执行夜神模拟器命令/执行HBuilder命令

    第一步:启动HBuilder和夜神模拟器 第二步:通过运行电脑命令CMD进入(电脑运行命令的快捷键是:windows键+R2.Ctrl键与Alt键之间的那个键就是windows键或者点击左下角开始图标 ...

  7. grunt中常见的插件

    /** * 需要用到的文件夹有 js(src) css image html */ gulp是一种自动化构建工具,可以增强我们的工作流程,他是基于 Node.js 构建的,与gruntjs相比,gul ...

  8. 并行模式库PPL应用实战（一）：使用task类创建并行任务

    自 VS2010 起,微软就在 CRT 中集成了并发运行时(Concurrency Runtime),并行模式库(PPL,Parallel Patterns Library)是其中的一个重要组成部分. ...

  9. [转]TOMCAT配置多端口

    一.Tomcat 安装后本身提供了一个server,端口配置默认是8080,对应目录为:..\Tomcat 6.0\webapps二.Tomcat 6.0 配置多个端口,其实也就是给Tomcat增加几 ...

  10. POJ 2388

    还是水题,简单的排序.大半夜的,没脑子想太复杂的代码了,就随手找了段以前写的插入排序将就着用了. 题目的意思就是取一个数列的中位数,很简单,排序后取a[n/2]即可. 代码如下: #ifndef _2 ...