跳过主要内容

MorphSVGPlugin.convertToPath

MorphSVGPlugin.convertToPath（ shape:[Element | String], swap:Boolean ） : Array

将SVG形状比如<circle>, <rect>, <ellipse>，或者<line>进入<path>

参数

  • 形状：[元素 | 字符串]

    元素或一个选择器字符串。

  • 交换：布尔值

    默认情况下，生成的 <path> 元素会直接在 DOM 中替换提供的形状元素，但你可以定义false为了swap来阻止此操作。

返回值 : 数组​

返回所有创建的<path>元素的数组。

细节​

技术上讲，只能对<path>路径元素或<polyline>/<polygon>元素，但在许多情况下你可能希望变形一个<circle>, <rect>, <ellipse>，或者<line>。此方法通过将这些基本形状转换为<path>元素使这成为可能。其使用方式如下：

MorphSVGPlugin.convertToPath("#elementID");

你可以传入一个元素或者选择器文本，因此也可以通过一行代码转换所有的这些元素：

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

这实际上是在 DOM 中逐个替换为<path>，外观应该是完全一样的。它会保留诸如 "id" 等属性不变，因此在完成转换后，你应该可以像之前一样正常引用目标元素。

//An svg <rect> Like this:
<rect id="endShape" width="100" height="100" fill="red"/>
//becomes
<path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path>

那为什么不自动进行这种转换呢？因为这会过于入侵式并可能导致问题。例如，如果你对原始元素应用了事件监听器，或者你的代码中对该元素有引用。我们认为开发者应该意识到并明确要求这种转换，而不是由系统自动执行要更稳妥。

加载中...

注意事项​

  • 如果你在rx或者ry属性定义在一个<rect>元素上，请确保你也定义了同时满足（MorphSVGPlugin 默认值为 0，而某些浏览器默认会复制已定义的那个值）。

目录