svg学习
原 css读完大概需要9分钟
- 发布时间：2018-04-02 17:46 星期一
- 刘伟波
- 951
- 更新于： 2018-04-03 18:11 星期二
SVG 形状
SVG 有一些预定义的形状元素，可被开发者使用和操作：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
基本属性
stroke fill stroke-width transform
基本api
// 创建图形
document.createElementNS(ns,tagName);
// 添加属性
element.appendChild(childElement)
// 设置/获取属性
element.setAttribute(name,value)
element.getAttribute(name)
属性
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio
viewbox
viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开
preserveAspectRatio
<align> 属性值表示是否强制统一缩放，当SVG的viewbox属性与视图属性宽高比不一致时使用. <align> 属性的值一定是下列的值之一:- none
不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。
(注意：如果<align>的值是none，则<meetOrSlice>属性的值将会被忽略。) - xMinYMin - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。
将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。 - xMidYMin - 强制统一缩放。
将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。
将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。 - xMaxYMin - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。
将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。 - xMinYMid - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。
将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。 - xMidYMid (默认值) - 强制统一缩放。
将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。
将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。 - xMaxYMid - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。
将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。 - xMinYMax - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。
将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。 - xMidYMax - 强制统一缩放。
将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。
将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。 - xMaxYMax - 强制统一缩放。
将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。
将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。
<meetOrSlice> 是可选的，如果提供的话， 与 <align> 间隔一个或多个的空格 ，参数所选值必须是以下值之一:- meet (默认值) - 图形将缩放到:
- 宽高比将会被保留
- 整个SVG的viewbox在视图范围内是可见的
- 尽可能的放大SVG的viewbox，同时仍然满足其他的条件。
- slice - 图形将缩放到:
- 宽高比将会被保留
- 整个视图窗口将覆盖viewbox
- SVG的viewbox属性将会被尽可能的缩小，但是仍然符合其他标准。
HSL颜色（HSLA）
http://www.w3chtml.com/css3/values/color/hsl.html
- H：
- Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
- S：
- Saturation(饱和度)。取值为：0.0% - 100.0%
- L：
- Lightness(亮度)。取值为：0.0% - 100.0%
- A:
- 透明度【0-1】
- 渐变
- 线性
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
• <linearGradient> 和 <stop>
• 定义方向
• 关键点位置及颜色
• gradientUnits
径向
• <radialGradient> 和 <stop>
• 定义方向
• 关键点位置及颜色
• gradientUnits
• 焦点位置
笔刷
• 绘制纹理
• <pattern> 标签
• patternUnits 和 patternContentUni
path
<path> 元素用于定义一个路径。
下面的命令可用于路径数据：
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" dx="20 40 60 80 100" dy="20 20 20 20 20 " fill="red">ABCDE</text>
</svg>
<!--dx每个文字间距 dy每个文字纵向间距-->
文本描边
<div class="tspan">
<svg>
<text x="100" y="100" style="font-size: 50px">
<tspan fill="red">AB</tspan>
<tspan stroke="green" stroke-width="2" fill="none">CDE</tspan>
</text>
</svg>
</div>
路径文字
<svg width="800" height="600">
<path id="path1" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none"></path>
<text style="font-size: 24px" text-anchor="middle">
<textPath dominant-baseline="central" startOffset="50%" xlink:href="#path1">
<tspan>这是路径文字</tspan>
</textPath>
</text>
</svg>
超链接文本
<svg>
<a xlink:href="https://www.baidu.com" xlink:title="这是百度" target="_blank">
<circle cx="300" cy="150" r="50" fill="pink" stroke="green" stroke-width="2"></circle>
</a>
</svg>
发表评论：