结果图：

将以下代码保存至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. 【R与数据库】R ＋ 数据库 ＝ 非常完美

    前言 经常用R处理数据的分析师都会对dplyr包情有独钟,它强大的数据整理功能让原始数据从杂乱无章到有序清晰,便于后期进一步的深入分析,特别是配合上数据库的使用,更是让分析师如虎添翼,轻松搞定Exce ...

  2. Customer segmentation – LifeCycle Grids with R（转）

    I want to share a very powerful approach for customer segmentation in this post. It is based on cust ...

  3. Spring component-scan 的逻辑 、单例模式下多实例问题、事务失效

    原创内容,转发请保留:http://www.cnblogs.com/iceJava/p/6930118.html,谢谢 之前遇到该问题,今天查看了下 spring 4.x 的代码 一,先理解下 con ...

  4. 乐视开放平台技术架构-servlet和spring mvc篇

    在乐视风口浪尖的时候,敢于站出来说我是乐视的而不怕被打脸的,也就是我了.就算我以后不在乐视了,提起来在乐视工作过,我也还是挺骄傲的.因为这是一个有理想,敢拼敢干的公司.想起复仇者联盟里Fury指挥官的 ...

  5. Yii2项目实现Markdown功能 在线Markdown编辑器

    版权声明:本文为博主原创文章,欢迎扩散,扩散请务必注明出处. Yii中添加MarkDown编辑器 主要使用了两个网页Markdown编辑器,都带预览功能. 1,ijackua/yii2-lepture ...

  6. 【论文:麦克风阵列增强】An alternative approach to linearly constrained adaptive beamforming

    作者:桂. 时间:2017-06-03  21:46:59 链接:http://www.cnblogs.com/xingshansi/p/6937259.html 原文下载:http://pan.ba ...

  7. 原生和jQuery的ajax用法

    jQuery的ajax方法: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ n ...

  8. Aop初步了解

    AOP(aspect-oriented programming) aspect是一种新型的模块化机制,用来描述分散在对象,类或函数中横切关注点.从关注点中分离出横切关注点是面向切面的程序设计的核心概念 ...

  9. response.getWriter().write()产生乱码

    Struts1中通过action, return到页面的时候,如果代码中使用到response.getWriter().write(),那么有可能jsp页面中汉字会变成乱码.百度上有人说改为respo ...

  10. JavaScript用二分法查找数据等

    //二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<a ...