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

淡淡的烟草味﹌ 2022-05-12 12:50 316阅读 0赞

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

![70][]

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

![70 1][]

**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][http_www.htmleaf.com_ziliaoku_qianduanjiaocheng_201506182064.html]

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

![70 2][]

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

结果：

![70 3][]

**4. preserveAspectRatio的语法**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>preserveAspectRatio = defer? &lt;</code><code>align</code><code>&gt; &lt;</code><code>meetOrSlice</code><code>&gt;?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

<table> 
 <thead> 
  <tr> 
   <td>取值</td> 
   <td>描述</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>xMin</td> 
   <td>viewBox的最小X值对齐viewport的左边部</td> 
  </tr> 
  <tr> 
   <td>xMid</td> 
   <td>viewBox的X轴中点对齐viewport的X轴中点</td> 
  </tr> 
  <tr> 
   <td>xMax</td> 
   <td>viewBox的最大X值对齐viewport的右边部</td> 
  </tr> 
  <tr> 
   <td>YMin</td> 
   <td>viewBox的最小Y值对齐viewport的顶边</td> 
  </tr> 
  <tr> 
   <td>YMid</td> 
   <td>viewBox的Y轴中点对齐viewport的Y轴中点</td> 
  </tr> 
  <tr> 
   <td>YMax</td> 
   <td>viewBox的最大Y值对齐viewport的底边</td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

![70 4][]

![70 5][]

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

![70 6][]

**（1）meet：按最长边填充**

![70 7][]

**（2）slice：按最短边填充**

![70 8][]

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

![70 8][]

**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标签

![70 9][]

[70]: /images/20220512/62d90d331ba141c0ad5eba75ca80468f.png
[70 1]: /images/20220512/eb1b31b1d061462f919f43c2524945a6.png
[http_www.htmleaf.com_ziliaoku_qianduanjiaocheng_201506182064.html]: http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506182064.html
[70 2]: /images/20220512/fd423d3c873e4dfaacac8c66a14da709.png
[70 3]: /images/20220512/48047c9384c74cee878d282aa9d8ad31.png
[70 4]: /images/20220512/1f7b7e02852643b0a58c4fb10d356e7c.png
[70 5]: /images/20220512/da697174a79d44fdac4c408c170f853c.png
[70 6]: /images/20220512/b3148f7e7d254cd68302701ce7513c64.png
[70 7]: /images/20220512/432e57a489994a5a9262d49875f4cd0a.png
[70 8]: /images/20220512/72a75e2b72474324a2a58e9085395f67.png
[70 9]: /images/20220512/d82b06508e6e43219e41a0b0a5333aaa.png