SVG - karynsong|BMFE|eros

算法

最小栈

设计一个支持 push，pop，top 操作，并能在常数时间内检索到最小元素的栈。

push(x) – 将元素 x 推入栈中。
pop() – 删除栈顶的元素。
top() – 获取栈顶元素。
getMin() – 检索栈中的最小元素。

示例:

MinStack minStack = new MinStack();
minStack.push(-2);
minStack.push(0);
minStack.push(-3);
minStack.getMin();   --> 返回 -3.
minStack.pop();
minStack.top();      --> 返回 0.
minStack.getMin();   --> 返回 -2.

/**
 * initialize your data structure here.
 */
var MinStack = function() {
    this.stack = [];
};

/** 
 * @param {number} x
 * @return {void}
 */
MinStack.prototype.push = function(x) {
    this.stack.push(x);
};

/**
 * @return {void}
 */
MinStack.prototype.pop = function() {
    this.stack.pop();
};

/**
 * @return {number}
 */
MinStack.prototype.top = function() {
    return this.stack[this.stack.length - 1];
};

/**
 * @return {number}
 */
MinStack.prototype.getMin = function() {
    if(!this.stack.length){
        return false;
    }
    var min = this.stack[0];
    for(var i=1; i<this.stack.length; i++){
        this.stack[i] < min && (min = this.stack[i])
    }
    return min;
};

/** 
 * Your MinStack object will be instantiated and called as such:
 * var obj = Object.create(MinStack).createNew()
 * obj.push(x)
 * obj.pop()
 * var param_3 = obj.top()
 * var param_4 = obj.getMin()
 */

Fizz Buzz

写一个程序，输出从 1 到 n 数字的字符串表示。

如果 n 是3的倍数，输出“Fizz”；
如果 n 是5的倍数，输出“Buzz”；

3.如果 n 同时是3和5的倍数，输出 “FizzBuzz”。

var fizzBuzz = function(n) {
    var res = [];
    for(var i=1; i<n+1; i++){
        if(i % 3 === 0 && i % 5 === 0){
            res.push('FizzBuzz');
        }else if(i % 3 === 0){
            res.push('Fizz');
        }else if(i % 5 === 0){
            res.push('Buzz');
        }else{
            res.push(i + '');
        }
    }
    return res
};

SVG 属性

SVG css 属性

使用内联样式表

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">
    < ![CDATA[ circle.myGreen {
        stroke: #006600;
        fill: #00cc00;
    }

    circle.myRed {
        stroke: #660000;
        fill: #cc0000;
    }

    ]]>
    </style>
    <circle class="myGreen" cx="40" cy="40" r="24" />
    <circle class="myRed" cx="40" cy="100" r="24" />
</svg>

使用外联样式表

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

path元素和其它图形元素的CSS属性：

CSS属性	描述
fill	设置图形填充色
fill-opacity	设置图形的不透明度
fill-rule	设置图形的填充规则
marker	设置沿此形状边缘线的标记
marker-start	设置起始标记
marker-mid	设置中间段标记
marker-end	设置结束标记
stroke	设置图形的描边颜色
stroke-dasharray	设置描边虚线和间隔长度
stroke-dashoffset	设置虚线描边偏移
stroke-linecap	设置描边线头样式，有效值为round，butt和square
stroke-miterlimit	设置描边连接处长度
stroke-opacity	设置描边的不透明度
stroke-width	设置描边宽度
text-rendering	设置文本渲染方式

文本CSS属性

CSS属性	描述
alignment-baseline	设置文本如何与x和y坐标对齐
baseline-shift	设置用于呈现文本的基准线偏移
dominant-baseline	设置显性基准线
glyph-orientation-horizontal	设置水平字形方向
glyph-orientation-vertical	设置垂直字形方向
kerning	设置文本的字距（字距即字母间距）

渐变CSS属性

CSS属性	描述
stop-color	设置渐变中使用的stop元素中的最终颜色
stop-opacity	设置渐变中使用的stop元素中的最终不透明度

SVG 轮廓

stroke：轮廓的颜色
stroke-width：轮廓的宽度
stroke-linecap：（butt、square、round）轮廓的渲染方式
stroke-linejoin：（miter、round、bevel）渲染形状中两条线之间的连接
stroke-miterlimit：如果stroke-linejoin设置为miter，stroke-miterlimit可以用来限制两条线相交的点之间的距离，线连接（角）的延伸
stroke-dasharray：用于使用虚线呈现SVG形状的描边
stroke-dashoffset：从dash模式的多少像素位置开始呈现
stroke-opacity：透明度

SVG 填充

fill-opacity：填充颜色
fill-rule：（nonzero、evenodd）某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部

SVG 视口和视图框

width、height：视图区域的宽高
viewBox：视图框宽高等比缩放
preserveAspectRatio：(xMaxYMax、xMidYMid、xMinYMin) meet、slice、none 宽高填充。

SVG 动画

set

set是SVG动画中最简单的元素。它只是在特定时间间隔过去后将属性设置为某个值。因此，形状的动画不是连续的，而是只改变属性值一次。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff">
        <set attributeName="x" attributeType="XML" to="100" begin="3s" />
    </rect>
</svg>

attributeName：需要改变的属性名称
attributeType：（XML、css）节点类型

animate

让某些属性按照帧变化

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
        <animate attributeName="cx" attributeType="XML"
            from="30"  to="470"
            begin="0s" dur="5s"
             fill="remove" repeatCount="indefinite"/>
    </circle>
</svg>

当动画结束时，动画属性被设置为原始值（fill=”remove”设置）。如果你希望动画结束时动画属性保持最终的值不变，可以将fill属性设置为freeze。动画无限重复（repeatCount属性）。

animateTransform

发生旋转和缩放的动画

<rect x="200" y="200" width="100" height="40" style="stroke: #ff00ff; fill:none;" >
    <animateTransform attributeName="transform"
        type="rotate"
        from="0 100 100" to="360 100 100"
        begin="0s" dur="10s"
        repeatCount="indefinite"
    />
</rect>

type=”rotate”：旋转。from=”0 100 100” to=”360 200 200”围绕着 100，100 这个点从0度旋转到 200，200 这个点转 360 度
type=”scale”：放大。from=”1 1” to=”2 3”。宽度变为 2倍，高度变为 3 倍

animateMotion

根据固定的路径旋转

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
        <animateMotion
            path="M10,50 q60,50 100,0 q60,-50 100,0"
            begin="0s" dur="10s" repeatCount="indefinite"
        />
    </rect>
</svg>

rotate=”auto” 让当前运动的形状方向一直向前。也可以是固定的数值。

协调动画

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
        <animate id="one"
            attributeName="x" attributeType="XML"
            from="0" to="400"
            begin="0s" dur="3s" fill="freeze"
        />
        <animate
            attributeName="y" attributeType="XML"
            from="0" to="50"
            begin="one.end+2s" dur="3s"
            repeatDur="10s"
            fill="freeze"
        />
    </rect>
</svg>

重复动画

repeatCount：重复次数，indefinite 无限重复
repeatDur：重复时间，indefinite

组合动画

控制不同的属性运动。组合动画

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="40" height="20" style="stroke: #000000; fill: none;">
        <animate attributeName="x"
            attributeType="XML"
            from="10" to="400"
            begin="0s" dur="10s"
            repeatCount="indefinite"
        />
        <animate attributeName="y"
            attributeType="XML"
            from="10" to="100"
            begin="0s" dur="10s"
            fill="freeze"
            repeatCount="indefinite"
        />
    </rect>
</svg>

SVG 变换

transform 提供图形变化

translate：平移
rotate：旋转
scale：缩放
skew：形变
matrix：矩阵变化

SVG linearGradient 渐变

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient id="myRadialGradient4"
        fx="5%" fy="5%" r="65%"
        spreadMethod="pad">
        <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
        <stop offset="100%" stop-color="#006600" stop-opacity="1" />
        </radialGradient>
    </defs>
    <rect x="340" y="10" width="100" height="100" rx="10" ry="10"
        style="fill:url(#myRadialGradient4);
        stroke: #005000; stroke-width: 3;" />
</svg>

SVG 填充图案

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="pattern2"
            x="0" y="0" width="20" height="20"
            patternUnits="userSpaceOnUse" >
            <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
        </pattern>
    </defs>
    <rect x="10" y="10" width="100" height="100"
        style="stroke: #000000; fill: url(#pattern2);" />
</svg>

x、y：定义起始的点位
width、height：定义外框的宽高
patternTransform：位移变换

SVG 裁剪路径

根据 cliPath 中的形状进行裁剪

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="clipPath">
            <rect x="30" y="30" width="40" height="40" />
        </clipPath>
    </defs>
    <circle cx="30" cy="30" r="20"
        style="fill: #0000ff; clip-path: url(#clipPath); " />
</svg>

SVG 遮罩

与裁剪相反，确定哪些形状是可见的

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="pattern1"
            x="10" y="10" width="20" height="20"
            patternUnits="userSpaceOnUse" >
            <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
        </pattern>
        <mask id="mask5" x="0" y="0" width="200" height="100" >
            <rect x="0" y="0"  width="200" height="100"
                style="stroke:none; fill: url(#pattern1)"/>
        </mask>
    </defs>
    <text x="10" y="55" style="stroke: none; fill: #000000;">
        This text is under the rectangle
    </text>
    <rect x="1" y="1" width="200" height="100"
        style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
</svg>

SVG 滤镜

<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="blurFilter4" x="-20" y="-20" width="200" height="200">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </defs>
    <rect x="20" y="20" width="90" height="90"
        style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" />
</svg>