loading...

0

svg学习

css读完大概需要9分钟

  • 发布时间:2018-04-02 17:46 星期一
  • 刘伟波
  • 208
  • 更新于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>
<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>
<meetOrSlice> 是可选的,如果提供的话, 与 <align> 间隔一个或多个的空格 ,参数所选值必须是以下值之一:
  • meet (默认值) - 图形将缩放到:
    • 宽高比将会被保留
    • 整个SVG的viewbox在视图范围内是可见的
    • 尽可能的放大SVG的viewbox,同时仍然满足其他的条件。
    在这种情况下,如果图形的宽高比和视图窗口不匹配,则某些视图将会超出viewbox范围(即SVG的viewbox视图将会比可视窗口小)。
  • slice - 图形将缩放到:
    • 宽高比将会被保留
    • 整个视图窗口将覆盖viewbox
    • SVG的viewbox属性将会被尽可能的缩小,但是仍然符合其他标准。
    在这种情况下,如果SVG的viewbox宽高比与可是区域不匹配,则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】






渐变

    线性

• <linearGradient> 和 <stop> 

• 定义方向 

• 关键点位置及颜色 

• gradientUnits

径向

• <radialGradient> 和 <stop> 

• 定义方向 

• 关键点位置及颜色 

• gradientUnits 

• 焦点位置

笔刷

• 绘制纹理 

• <pattern> 标签 

• patternUnits 和 patternContentUni


path


<path> 元素用于定义一个路径。

下面的命令可用于路径数据:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto

注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。



文本

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





你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!