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. sql server 2008 把远程的数据库的数据转移到本地数据数据库里

    如题:把远程的数据库对应表里的数据转移到本地数据数据库的对应表里 比如把192.168.188.160的DB的A表的数据转移到本地的DB的A表里 第一步:连接远程服务器前准备 exec sp_addl ...

  2. P3P解决cookie存取的跨域问题

    最近在做一个流量统计的东西的时候,偶然发现IE在对iframe里面的页面写Cookie的时候有一些安全限制,导致读取Cookie不成功,找了好长时间的解决办法,重要找到如下的办法: 1.页面里的COO ...

  3. JAVA实现的截屏程序

    http://hadeslee.iteye.com/blog/125386 http://www.jb51.net/article/75114.htm JAVA截屏程序(第三版) JavaEXTSwi ...

  4. NanoApe Loves Sequence Ⅱ(尺取法)

    题目链接:NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/131072 ...

  5. Socket.io官方聊天室DEMO的学习笔记

    照着Socket.io官方的聊天室代码敲了一遍,遇到了一个奇怪的问题: 每次点击SEND按钮的时候,都会重新刷新页面. 在点击页面的一瞬间,看到了正在加载jquery的提示, 然后以为是jquery用 ...

  6. NSString之Format

    三点用法总结: 类型转换:基本类型到对象类型 需要调用NSString的fotmat方法 NSString  *location = [NSString  stringWithFormat:@&quo ...

  7. 无限循环小数POJ1930

    题意:给定一个无限循环小数,求其分数形势,要求分母最小 分析:看了别人的题解才做出来的,将无限循环小数转化成分数,分为纯循环和混循环两种形式. (1)对于纯循环:用9做分母,有多少个循环数就几个9,比 ...

  8. 变量-数据类型-对象-如何编写python脚本

    标识符的命名规则变量是标识符的例子. 标识符 是用来标识 某样东西 的名字.在命名标识符的时候,你要遵循这些规则:标识符的第一个字符必须是字母表中的字母(大写或小写)或者一个下划线(‘ _ ’).标识 ...

  9. Section 1.1

    Your Ride Is Here /* PROG:ride LANG:C++ */ #include <iostream> #include <cstdio> #includ ...

  10. 《数据结构与算法分析：C语言描述》读书笔记------练习1.1 求第K大的数

    求一组N个数中的第k个最大者,设k=N/2. import java.util.Random; public class K_Max { /** * @param args */ //求第K大的数,保 ...