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. USACO Section 1.2 Name That Number 解题报告

    题目 题目描述 在一个农场里面,每一头牛都有一个数字编号,但是现在这些牛不喜欢这种编号,它们想把这些数字编号转化成为可以接受的字母的形式.数字与字母的转换表如下: 2: A,B,C 5: J,K,L ...

  2. android异步加载AsyncTask

    http://blog.csdn.net/abc5382334/article/details/17097633 http://keeponmoving.iteye.com/blog/1515611 ...

  3. NOI2004 郁闷的出纳员 Splay

    郁闷的出纳员 [问题描述] OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常, ...

  4. SVG页面loading动态图

    https://github.com/SamHerbert/SVG-Loaders demo http://samherbert.net/svg-loaders/

  5. Apache 隐藏入口文件以及防盗链.htaccess 文件

    Apache 隐藏入口文件以及防盗链.htaccess 文件 RewriteEngine on # 隐藏入口文件 RewriteCond %{REQUEST_FILENAME} !-d Rewrite ...

  6. 解决：IE中不能自动选择UTF-8编码的解决方法

    IE中不能自动选择UTF-8编码的解决办法 在windows操作系统上使用IE作为浏览器时.常常会发生这样的问题:在浏览使用UTF-8编码的网页时,浏览器无法自动侦测(即没有设定“自动选择”编码格式时 ...

  7. OC版二分查找

    二分查找(也称折半查找)是很常见的一种在数组中查找数据的算法,作为一名程序员是应该必须会的.它的基础思想:获取数组的中间值,将数组分割成两份,利用中间值跟指定的值进行比较,如果中间值大于指定的值,就在 ...

  8. 控制流之if

    if语句if语句用来检验一个条件, 如果 条件为真,我们运行一块语句(称为 if-块 ), 否则 我们处理另外一块语句(称为 else-块 ). else 从句是可选的. ~~~~~~~~~~~~~~ ...

  9. xCode中如何安装旧的模拟器

    http://blog.csdn.net/cmengzhongren/article/details/50414493 这里给出如何把老版本的SDK加入到新的Xcode中的方法.其实很简单,就是将老版 ...

  10. 17、手把手教你Extjs5（十七）模块的新增、修改、删除操作

    上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色.小数位数.零值是否显示.货币符号.单位显示在标题栏或者跟在金 ...