SVG的基础使用：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

</head>

<body>

<!-- 

<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <title>Cat</title>

    <desc>Stick Figure of a Cat.</desc>

    <circle cx="70" cy="95" r="50" style="stroke:black;fill:none"></circle>

    <circle cx="55" cy="80" r="5" style="stroke:black;fill:#339933"></circle>

    <circle cx="85" cy="80" r="5" style="stroke:black;fill:#339933"></circle>

    <g id="whiskers">

        <line x1="75" y1="95" x2="135" y2="85" style="stroke:black"></line>

        <line x1="75" y1="95" x2="135" y2="135" style="stroke:black"></line>

    </g>

    <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />

    <polyline points="108 62,90 10,70 45,50 10,32,62" style="stroke:black;fill:none"></polyline>

    <polyline points="35 110,45 120,95 120,105,110" style="stroke:black;fill:none"></polyline>

    <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black;fill:#ffcccc"></path>

    <text x="60" y="165" style="font-family:sans-serif;font-size:14pt;stroke:none;fill:black">Cat</text>

</svg>

<svg width="4cm" height="5cm" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 80">

    <rect x="10" y="35" width="40" height="40" style="stroke:black;fill:none"></rect>

    <polyline points="10 35,30 7.68,50 35" style="stroke:black;fill:none"></polyline>

    <polyline points="30 75,30 55,40 55,40 75" style="stroke:black;fill:none"></polyline>

</svg>

 -->

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" >

    <line x1="10" y1="10" x2="200" y2="10" style="stroke:black;stroke-width:5;" />

    <line x1="10" y1="20" x2="200" y2="20" style="stroke:black;stroke-dasharray:9,5;" />

    <line x1="10" y1="30" x2="200" y2="30" style="stroke:#9f9;stroke-width:5;" />

    <line x1="10" y1="40" x2="200" y2="40" style="stroke:rgb(255,128,64);stroke-width:5;" />

    <line x1="10" y1="50" x2="200" y2="50" style="stroke:rgb(60%,20%,60%);stroke-width:5;" />

    <line x1="10" y1="60" x2="200" y2="60" style="stroke:rgb(60%,20%,60%);stroke-width:5;stroke-opacity:0.1" />

    <rect x="10" y="70" width="30" height="50" style="stroke:black;fill:none;" />

    <rect x="50" y="70" width="30" height="50" style="stroke:black;stroke-width:2;stroke-opacity:0.5;stroke-dasharray:9,5;fill:#9f9;fill-opacity:0.5" />

    <rect x="90" y="70" width="30" height="50" ry="10" style="stroke:black;fill:none;" />

    <ellipse cx="150" cy="100" rx="10" ry="20" style="stroke:black;fill:none;" />

    <polygon points="15,150 55,150 45,160 5,160" style="stroke:black;fill:none;" />
    <polyline points="5 20,20 20,25 10,35 30,45 10,55 30,65 10,75 30,80 20,95 20" style="stroke:black;fill:none;" />
</svg>

</body>

</html>

SVG的基础使用的更多相关文章

  1. SVG.js 基础图形绘制整理（二）

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  2. 数据可视化-svg入门基础（二）

    接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...

  3. SVG.js 基础图形绘制整理（一）

    一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...

  4. 数据可视化系列--svg入门基础（一）

    一.前言 1.SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形: (2)用来定义web上的使用的矢量图: (3)改变图像尺寸,图片质量不 ...

  5. Canvas和SVG的基础知识，以及两者的区别(小白)

    首先我们来说一下Canvas是什么,它有什么作用以及它的知识点. Canvas是<HTML5>的新标签,它通常用于通过脚本(也就是JavaScript)来绘制图像.但是它本身并没有绘制能力 ...

  6. SVG系列 - 基础

    标题为SVG基础,但是过于基础的东西就不再熬述啦,可以参考几个学习网址: SVG参考手册:http://www.runoob.com/svg/svg-reference.html MDN SVG:ht ...

  7. SVG动画-基础篇

    参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979 简介 ...

  8. 可视化：svg相关基础

    01.svg的嵌入.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. SVG动画基础篇

    参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979  gi ...

随机推荐

  1. dwr.xml 配置

    dwr.xml 是你用来配置 DWR 的文件,默认是将其放入 WEB-INF 文件夹. 创建一个 dwr.xml 文件dwr.xml 有如下的结构: <?xml version="1. ...

  2. Python之路： 面向对象

    Python是一门面向对象的语言,所以在Python中创建一个类和对象是很容易的.接下来了解一下面像对象的一些基本特征. 面向对象技术简介 类(class):描述具有相同的属性和方法的对象的集合.定义 ...

  3. GtkImageMenuItem

    做了个工具条,每次点arrow出来的菜单都没图标,郁闷;查来查去,看源码,看css,最后知道GtkAction缺省就是对应GtkImageMenuItem,再一试,跟toolbar无关,换menu也不 ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. python字符串,列表,字典的常用方法

    本篇内容 字符串的常用方法 列表的常用方法 字典的常用方法 字符串的常用方法 center 字符居中显示,指定字符串长度,填充指定的填充字符 string = "40kuai" p ...

  6. 加载window事件

    $(document).ready()和window.onload的区别 发表于 2012-08-29 由 admin 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM ...

  7. fedora安装各种应用软件

    1 安装视频播放器 sudo yum install mplayer mplayer-gui 可以从命令行 和 gnome 中启动 2 音量调节 (1)使用 alsamixer alsamixer是一 ...

  8. 关于CH340在STM32实现一键下载电路的研究（转）

    源:关于CH340在STM32实现一键下载电路的研究 在做基于STM32的多功能MP3播放器的课题时,在程序下载这部分时借鉴了正点原子开发板上的一键下载电路,采用CH340G这款芯片设计. 在画PCB ...

  9. lpc1768usb使用-配置

    #ifndef __USBCFG_H__ #define __USBCFG_H__ //#define USB_IF_NUM          1 #define USB_MAX_PACKET0    ...

  10. T4模板使用

    本例使用的数据库是Northwind 1.新建tt文本模板customer.tt 2. 修改customer.tt内容为 <#@ template debug="false" ...