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. 原创：运行loadtest时报错the load test results repository was created with a previous version and is not compatible

    如果run setting中的Storage Type设置为DataBase,则需要设置数据库来保存loadtest的运行结果,如下图所示 图:Storage Type设置为DataBase 图:在M ...

  2. USACO Section 1.2 Milking Cows 解题报告

    题目 题目描述 有3个农夫每天早上五点钟便起床去挤牛奶,现在第一个农夫挤牛奶的时刻为300(五点钟之后的第300个分钟开始),1000的时候结束.第二个农夫从700开始,1200结束.最后一个农夫从1 ...

  3. 手把手教你使用startuml画用例图

    转自:http://www.2cto.com/os/201502/377091.html 最近准备研究下volley的源码,但看了网上一些大牛的博客都是配合图这样看起来更直观,分析起来逻辑也很好,什么 ...

  4. iOS之Alcatraz常见插件

    转发:http://blog.csdn.net/pingchangtan367/article/details/26689497 对于Xcode是我们的开发环境,ok,怎样提高我们的效率呢,当然是使我 ...

  5. 关于NIOS ii烧写的几种方式

    1. 方法一:.sof和.elf全部保存在FPGA内,程序加载和运行也是在FPGA内部. 把FPGA的配置文件.sof通过JTAG方式下载(其实是在线运行)进入FPGA本身,此时在NIOS II的界面 ...

  6. egret dragonbones部件替换产生位移的解决方案

    原理:使用Armature.getSlot("urpart").display.texture去替换骨骼纹理即可需要:1 骨骼动画导出的时候不要裁剪部件的透明区域,在导出设置里面设 ...

  7. 转 [ javascript面向对象技术

    以下文章来自iteye,作者是 sdcyst ,个人主页 http://www.iteye.com/topic/288813 类变量/类方法/实例变量/实例方法先补充一下以前写过的方法:在javasc ...

  8. Bootstrap学习指南

    一.Bootstrap简介 二.Bootstrap安装 三.Bootstrap CSS 四.Bootstrap 布局组件 五.Bootstrap 插件 六.Bootstrap定制

  9. 缩进（Python很将就格式）

    空白在Python中是重要的.事实上行首的空白是重要的.它称为缩进.在逻辑行首的空白(空格和制表符)用来决定逻辑行的缩进层次,从而用来决定语句的分组.这意味着同一层次的语句必须有相同的缩进.每一组这样 ...

  10. Memcache第一篇---基础教程

    Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可以应 ...