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. CodeForces 158B Taxi（贪心）

    贪心,注意优先级,4单独,3与1先匹配,2与2匹配(注意判断2有没有剩下),然后2与两个1匹配,最后4个1匹配就可以了. #include<iostream> #include<cs ...

  2. Type safety: Unchecked cast from Object to ArrayList

    表明Object转化为ArrayList这个转化并不是安全的.. 编译的时候需要加入修饰符才能正常编译(具体是那个修饰符..不记得了.^_^),否则会提示有警告 当然这只是一个警告,如果楼主自信这个转 ...

  3. 基于Hibernate注解的解读

    一.综述 目前为止项目用到的实体类关系有3种: 单向一对多 单向多对一 双向一对多(双向多对一) 二.说明 @Entity --注释声明该类为持久类.将一个Javabean类声明为一 个实体的数据库表 ...

  4. thinkphp5.0 架构

    1.0 MVC的意义:MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V).控制器(C),它们各自处理自己的任务. 2.0入口 ...

  5. 对STM32的NVIC_PriorityGroupConfig使用及优先级分组方式理解(转)

    源:http://blog.chinaunix.net/uid-22670933-id-3443085.html STM32有43个channel的settable的中断源:AIRC(Applicat ...

  6. Counting Intersections

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  7. 打印等腰三角形javascript

    <html> <head> <script type="text/javascript"> var n=4;//层数 for(var i=1; ...

  8. [iOS]C语言技术视频-09-枚举的定义

    下载地址: 链接: http://pan.baidu.com/s/1o625Ee2 密码: 8kp5

  9. 搭建firefly服务端遇到的问题

    1 pylinter pylinter could not automatically determined the path to "lint.py" 这个错误通过安装pylin ...

  10. [Lua]Lua入门教程

    什么是Lua Lua 是一个小巧的脚本语言.是巴西里约热内卢天主教大学(Pontifical Catholic University of Rio de Janeiro)里的一个研究小组,由Rober ...