svg知识总结（2）——与JavaScript相关知识

1. getTotalLength()获取图形总长度

注意：与stroke-linecap和stroke-linejoin无关

<body>
    <svg width=200 height=200 style="border:1px solid black;" id="svg">
      <rect x=20 y=20 width=100 height=100 stroke="red" id="rect"></rect>
    </svg>
    <script>
        var rect = document.getElementById('rect')
        console.log(rect.getTotalLength());
    </script>
</body>

2. getPointAtLength(x)：获取路径（path）上距离起始点长度为x的点的坐标

<body>
    <svg width=200 height=200 style="border:1px solid black;" id="svg">
      <path d="M 0 50 h 100" stroke="red" id="path1"></path>
    </svg>
    <script>
        var path1 = document.getElementById('path1');
        console.log(path1.getPointAtLength(50));
    </script>
</body>

3. 标签属性：viewBox = <min-x> <min-y> <width> <height>

<min-x>和<min-y>值决定viewbox的左上角位置。<width>和<height>值决定viewport的宽度和高度。注意viewBox的宽度和高度不需要设置得和<svg>元素的宽度和高度相同。<width>和<height>不允许设置为负数。

详情：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506182064.html

viewBox = “0， 0， 20， 20”：对svg进行缩放，缩放到viewBox的大小。（viewBox是svg的真正的大小，svg的设置的width和height是viewport可视大小）

在起始点：（0,50）的位置画一条长为100的水平线。现在svg的大小是viewBox

结果：

4. preserveAspectRatio的语法

preserveAspectRatio = defer? <align> <meetOrSlice>?

defer参数是可选值，它仅仅在image元素上应用preserveAspectRatio属性时才使用。在使用其它元素时会被忽略。

align参数是否强制进行均匀的缩放。如果align设置为none，图形会被缩放以适应viewport大小，而不会管它的宽高比。

其它的preserveAspectRatio值会在均匀缩放的同时保持viewbox的宽高比，并指定viewbox 在viewport中的对齐方式。

align参数的值有分为两个部分，第一个部分指定X坐标的对齐方式，第二个部分指定Y坐标的对齐方式。下面列出了所以的X和Y对齐方式：例如：xMaxYMax或xMidYMid

取值	描述
xMin	viewBox的最小X值对齐viewport的左边部
xMid	viewBox的X轴中点对齐viewport的X轴中点
xMax	viewBox的最大X值对齐viewport的右边部
YMin	viewBox的最小Y值对齐viewport的顶边
YMid	viewBox的Y轴中点对齐viewport的Y轴中点
YMax	viewBox的最大Y值对齐viewport的底边

（2）preserveAspectRatio的另外一个参数meetOrSlice有三种取值：

取值	描述
meet	保持宽高比并将viewBox缩放为适合viewport的大小
slice	保持宽高比并将所有不在viewport中的viewBox剪裁掉
none	不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形

语法：比如：preserveAspectRatio取值分别为xMinYMin meet，xMidYmin meet和xMaxYmin meet

小结：可视区viewport 和实际区域viewBox如果是等比例，两个区域完全重合；当不是等比例时，比如：

此时两个区域不完全重叠，调用preserveAspectRatio才有效果；当viewBox和viewport完全重合时，调用preserveAspectRatio肯定是无效果的。

（1）meet：按最长边填充

（2）slice：按最短边填充

（3）none：单独使用，不需要x Y ;viewBox会填充整个viewport，意味X轴和Y轴的比例不相同，图像将会发生变形。

5. js代码创建svg标签

注意：svg是xml元素，创建时要加NS；需要指定命名空间；通过setAttribute()方法来设定属性值，只能设置标签属性（特性）；

（1）固定的命名空间：var char = "http://www.w3.org/2000/svg";

（2）创建dom元素：var oSvg = document.createElementNS(char, 'svg');

//还可以创建line、rect、circle、path等svg元素

（3）设置属性、属性值

例子：创建一个svg标签，一个rect标签

    <script>
       //创建固定的命名空间
       var char = "http://www.w3.org/2000/svg";
       var oSvg = document.createElementNS(char, 'svg');
       var rect = document.createElementNS(char, 'rect');
       //还可以创建line、rect、circle、path等svg元素
       oSvg.setAttribute('width', '200');
       oSvg.setAttribute('height', '200');
       rect.setAttribute('x', 50);
       rect.setAttribute('y', 50);
       rect.setAttribute('width', '50');
       rect.setAttribute('height', '70');
       rect.setAttribute('fill', 'green');
       oSvg.appendChild(rect);
       document.body.appendChild(oSvg);
    </script>

svg知识总结（2）——与JavaScript相关知识

猜你喜欢