SVG的path的使用；

参考：http://justcoding.iteye.com/blog/2226354

<%@ 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>

<div>

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

    <g style="stroke:black;fill:none">

        <path d="M10 10L100 10"/>

        <path d="M10 20L100 20L100 50" />

        <path d="M40 60L10,60L40,42.68M60,60L90,60L60,42.68" />

    </g>

</svg>

</div>

<div>

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

    <g style="stroke:black;fill:none">

        <path d="M10,10L40,10L40,30L10,30L10,10" />

        <!-- 使用Z进行封闭 -->

        <path d="M60,10L90,10L90,30L60,30Z" />

        <path d="M40,60L10,60L40,42.68ZM60,60L90,60L60,42.68Z" />

    </g>

</svg>

</div>

<div>

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

    <g style="stroke:grey;stroke-width:8;fill:none">

        <!-- 自己封闭与使用Z封闭的不同之处:使用Z封闭会把线段的接口处封闭 -->

        <path d="M10,10L40,10L40,30L10,30L10,10" />

        <path d="M60,10L90,10L90,30L60,30Z" />

    </g>

</svg>

</div>

<div>

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

    <!-- 这是大写字母的例子，下面是小写字母的例子 -->

    <path d="M10 10L20 10L20 30M40 40L55 35" style="stroke:black;stroke-width:1;fill:none" />

</svg>

</div>

<div>

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

    <!-- 小写字母，表示相对位置，小写m启动路径，小写m开始与大写M一致 -->

    <path d="M10 10l10 0l0 20m20 10l15-5" style="stroke:black;stroke-width:1;fill:none" />

    <!-- 水平垂直的简写 H20 h20 V20 v20, 也是有大小写字母区分的 -->

    <path d="M12 24h15v25h-15Z" style="stroke:black;stroke-width:1;fill:none" />

</svg>

</div>

<div>

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

    <!-- 椭圆弧： A/a + 7参数：rx,ry,x-axis-rotation,large-arc-flag(小于180度=0，大于180度=1),sweep-flag(负角=0，正角=1),endx,endy  -->

    <path d="M125,75A100,50,0,0,0,225,125" />

    <!-- 绘制了一个小半圆 -->

    <path d="M0,20A10,10,0,0,0,10,30" style="stroke:black;stroke-width:1;fill:none" />

    <!-- 绘制了一个大半圆,进行了填充，注意填充的方式 -->

    <path d="M0,10A10,10,0,1,1,10,20" style="stroke:black;stroke-width:1;fill:blue" />

</svg>

</div>

<div>

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

    <!-- 二次贝塞尔曲线：Q x1Ctrl,y1Ctrl,xEnd,yEnd，下面是两个连续的二次贝塞尔曲线 -->

    <path d="M30,100Q80,30,100,100,130,65,200,80" style="fill:none;stroke:black;" />

</svg>

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

    <!-- 二次贝塞尔曲线，流畅二次曲线命令：T xEnd,yEnd -->

    <path d="M30,100Q80,30,100,100T200,80" style="fill:none;stroke:black;" />

</svg>

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

    <!-- 三次贝塞尔曲线:C x1Ctrl,y1Ctrl,x2Ctrl,y2Ctrl,xEnd,yEnd -->

    <path d="M20,80C50,20,150,60,200,120" style="fill:none;stroke:black;" />

</svg>

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

    <!-- 三次贝塞尔曲线 -->

    <path d="M40,50C60,10,90,90,110,50" style="fill:none;stroke:black;" />

    <path d="M40,50C110,10,40,90,110,50" style="fill:none;stroke:black;" />

</svg>

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

    <!-- 三次贝塞尔曲线， 平滑三次贝塞尔曲线:S x1Ctrl,y1Ctrl,xEnd,yEnd -->

    <path d="M30,100C50,30,70,50,100,100S150,40,200,80" style="fill:none;stroke:black;" />

</svg>

</div>

</body>

</html>

SVG的path的使用的更多相关文章

  1. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  2. SVG路径PATH

    SVG路径PATH 在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具(FLASH里的钢笔工具比PS里的好用) PATH用到的指令: M----(X Y):移动到 Z----(none):关闭路径 ...

  3. [翻译svg教程]Path元素 svg中最神奇的元素！

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

  4. SVG 路径(path)

    本文转自:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths <path>元素是SVG基本形状中最强大的一个,它 ...

  5. SVG之Path

    一.Path概述 1.控制命令 SVG提供了一些基础图形元素标签如<circle>.<rect>.<ellipse>.<line>.<polyli ...

  6. SVG格式图片转成HTML中SVG的Path路径

    AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...

  7. svg(1) path路径

    注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/2707 ...

  8. 坐标转换成SVG的path路径

    大家好,我是一个刚入职的前端小白,入职后一直做关于svg 的东西,我将自以为很方便的方法提供给大家. function svgPathCurv(a,b,curv) { /* * 弯曲函数. * a:a ...

  9. svg笔记----------path篇

    每个路径都必须以moveto 命令开始 moveto.lineto和closepath <path d="M 10 10 L 100 10z"/> 大写字母命令的坐标是 ...

随机推荐

  1. HDU 2897 邂逅明下（巴什博奕变形）

    巴什博奕的变形,与以往巴什博奕不同的是,这里给出了上界和下界,原先是(1,m),现在是(p,q),但是原理还是一样的,解释如下: 假设先取者为A,后取者为B,初始状态下有石子n个,除最后一次外其他每次 ...

  2. sql server 2008 把远程的数据库的数据转移到本地数据数据库里

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

  3. webapp之路--百度手机前端经验（转）

    看了之后收获很大,分享一下: 本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从localstorage缓存和版本号管理,模块化,静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方 ...

  4. js中的全局函数

    以前没搞懂JS的全局函数,全局函数和window对象的函数不一样.全局函数不属于任何一个内置对象. JS包含以下7个全局函数,用于一些常用的功能:escape(),eval(),isNan(),isF ...

  5. Android中通过pid获取app包名

    String callerPackage = getAppNameByPID(getContext(), Binder.getCallingPid()); private String getAppN ...

  6. thin-provisioning-tools

    公司我还用着squeeze,没这个包,下载编译:https://github.com/jthornber/thin-provisioning-tools.git

  7. CodeForces 617A Elephant

    C语言语法入门题 #include<cstdio> #include<cstring> #include<vector> #include<cmath> ...

  8. SQL Server 2012 - Transact-SQL

    变量 --全局变量 select @@VERSION --局部变量 declare @i int set @i=5 select @i 通配符:   like   'joh%',  %任意长度的任意字 ...

  9. UVA 11255 Necklace

    带颜色数限制的polya计数. 其实感觉一样了... #include<iostream> #include<cstdio> #include<cstring> # ...

  10. Redis状态和信息查看

    转自:http://my.oschina.net/tongyufu/blog/405612 redis-cli连接服务器后,使用info命令查看Redis信息和状态: INFO [section] 以 ...