SVG的path的使用
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的使用的更多相关文章
- 深度掌握SVG路径path的贝塞尔曲线指令
一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...
- SVG路径PATH
SVG路径PATH 在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具(FLASH里的钢笔工具比PS里的好用) PATH用到的指令: M----(X Y):移动到 Z----(none):关闭路径 ...
- [翻译svg教程]Path元素 svg中最神奇的元素！
先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...
- SVG 路径(path)
本文转自:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths <path>元素是SVG基本形状中最强大的一个,它 ...
- SVG之Path
一.Path概述 1.控制命令 SVG提供了一些基础图形元素标签如<circle>.<rect>.<ellipse>.<line>.<polyli ...
- SVG格式图片转成HTML中SVG的Path路径
AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...
- svg(1) path路径
注: 笔记来自于http://www.jb51.net/html5/72250.html 以及http://blog.csdn.net/u013291076/article/details/2707 ...
- 坐标转换成SVG的path路径
大家好,我是一个刚入职的前端小白,入职后一直做关于svg 的东西,我将自以为很方便的方法提供给大家. function svgPathCurv(a,b,curv) { /* * 弯曲函数. * a:a ...
- svg笔记----------path篇
每个路径都必须以moveto 命令开始 moveto.lineto和closepath <path d="M 10 10 L 100 10z"/> 大写字母命令的坐标是 ...
随机推荐
- Linux服务器自动备份压缩MySQL数据库的实用方法
<?php$server = 'localhost'; $link = mysql_connect($server, 'root', 'haven'); $result = mysql_quer ...
- opencart配置
1.安装opencart 2.修改后台目录(慎重,修改后插件安装会出错) Opencart默认的后台是网站/admin这样子,很多人可以猜到这种组合对于正式生产环境很不安全,我们可以把这个admin改 ...
- Freemodbus 1.5
源:http://blog.sina.com.cn/s/blog_4935209001012eax.html 网站位置:http://www.freemodbus.org/index.php?lang ...
- Android学习笔记之Service
与服务通信 用bindservice 而startservice并无通信条件. service 为android为系统服务,所以程序员无法new出来,只能建立服务,共其他组件使用. package c ...
- [算法] avl树实现
大二的时候数据结构课死活没看懂的一个东东,看了2小时,敲了2小时,调了2小时... 平衡树某一节点的左右子树高度相差大于1的时候即需要调整,调整可分为四中情况 ll,rr,lr,rl其中lr,rl是由 ...
- [算法] dijkstra单源无负权最小路径算法
#include <stdio.h>#include <stdlib.h>#include <string.h> #define INF 1000000#defin ...
- docker-compose 所带来的方便
docker-compose 是一款开源的docker 简化复杂容器环境的管理工具 . docker-compose 在结合Swarm 与 docker 进程化容器部署可以很方便的部署一套环境. 具体 ...
- MAC OSX 10.10 下安装PHP环境
Apache和PHP已经在系统里面预装好了,只要你开启即可使用.这篇文章给大家介绍如何开启并设置好PHP开发环境. 1.开启默认Apache服务 打开终端命令行,输入如下命令就会开启Apache了.然 ...
- 关于在TabBar 中添加按钮,并通过block 或代理在控制器中实现响应
相信很多朋友会遇到在TabBar中添加按钮,并要求点击按钮能够实现一些功能,但是当我们自定义的时候,怎么才能在控制器中响应?通常我会用代理或者block,block性能更好,建议使用. 自定义TabB ...
- 一个不应该犯的错octave
今天在完成Andrew NG的机器学习神经网络作业,在实现花费函数的时候,没有使用循环,直接向量计算．前面都想的挺好的,很快就想到了如何使用向量来计算,可是在扩展y的时候,犯了一个超级傻的错误． y是 ...