svg基础学习

前言

  最近由于工作的需要，开始学习JavaScript中的svg绘图方法，由于从未使用过svg，故从头开始学习。

SVG基础图形

• 矩形

<rect x="10" y="10" width="30" height="30"/>

  上述代码中，x,y表示的是矩形左上角的横坐标和纵坐标，width和height表示的是宽度与高度。

• 圆形

<circle cx="25" cy="75" r="20"/>

  上述代码中，cx和cy分别表示的是圆心的x轴和y轴的位置，r表示的是半径。

• 直线

<line x1="10" x2="50" y1="110" y2="150"/>

  上述代码中，x1表示起点的x位置，y1表示起点的y位置，x2表示终点的x位置，y2表示终点的y位置。

• 折线

<polyline points="60 110, 65 120, 85 140, 90 135, 95 150, 100 145"/>

  上述代码中，所有的点都被包括在点集points中，需要注意的是每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

• 多边形

<polygon points="60 110, 65 120, 85 140, 90 135, 95 150, 100 145"/>

  多边形与折线基本一致，区别在于多边形的最后一个点会和第一个点自动连接起来。

• 路径

  目前还没有学到，后面再加

变形

所有接下来使用的方法都可以用transform总结，只需要连起来带空格即可

1.平移: translate()

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

  允许图形平移一段距离，对于上述代码，矩形出现的位置将会是(30,40）而不是之前规定的(0,0),即向X轴方向平移30，向y轴方向平移40。

2.旋转: rotate()

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="rotate(30)" />
</svg>

  允许图形旋转一定的角度，该示例显示了一个方形，旋转了45度。rotate()的值是用角度数指定的。

3.斜切: skewX() skewY()

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="rotate(30)" />
</svg>

  对图形进行斜切，X是对X轴方向进行斜切，Y则是对Y轴，两个函数均需要一个角度参数来表示需要斜切的角度，之前未接触过斜切，从斜切后的样式来看，应该是对整个图形按照从上到下渐进平移（skewX），skewY同理。

4.缩放: scale()

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="scale(0.5)" />
</svg>

  scale()改变图像的尺寸，需要两个参数（X轴和Y轴方向上的放大倍数或缩小倍数），如果第二个数字被忽略了，那他默认等于第二个值。

剪切和遮罩（clipping,masking）

1.剪切: clipping
  clipping表示的是移除已经创建的元素的部分内容，在这里，任何半透明效果都是不行的。它只能要么显示要么不显示。

<svg height="1000" width="800">
    <defs>
        <clipPath id="as">
            <rect x="0" y="0" width="200" height="100"/>
        </clipPath>
    </defs>

    <circle cx="100" cy="100" r="100" id="az" clip-path='url(#as)' stroke="red" />
</svg>

  上述代码会产生一个半圆，前半部分的代码包裹在一个defs标签中(defs标签表示的是可以复用的元素，需要注意的是clipPath通常都包含在一个defs标签中)创建了一个长方形，后半部分代码创建了一个圆。
  此处代码的实现逻辑是：在(100,100)创建一个圆形，半径是100，引用了一个带单个rect元素的clipPath元素，它内部的这个矩形将把画布的上半部分涂黑。故实际显示的样子为下方被截去的半圆
2.遮罩: masking
  遮罩masking的效果最令人印象深刻的是它表现为一个渐变的样子。如果想要让一个元素淡出，可以利用遮罩效果实现这一点。

<svg>
    <linearGradient id="Gradient">
        <stop offset="0" stop-color="white" stop-opacity="1" />
        <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="Mask">
        <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"/>
    </mask>
    <rect x="0" y="0" width="200" height="200" fill="green"/>
    <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)"/>
</svg>
</svg>