使用javascript将笔划路径转换为形状

有没有一种方法可以使用javascript将笔划路径转换为形状？是否有库将此作为内置功能提供

---

我知道Illustrator有这个功能，所以一个可能的解决方案是在屏幕上复制SVG图像并将其移动到Illustrator，但是如果可以这样做，会丢失作为属性存储的所有相关元数据吗？

使用

Element.getTotalLength（）

和

Element.getSubpath（）

函数中的Raphaël函数以及函数中该路径的stoke width和stroke dasharray属性可能会给出结果

[一] 有没有一种方法可以使用JavaScript将笔划路径转换为形状

是的，有一种方法可以将SVG路径笔划转换为轮廓形状。不幸的是，它不是SVG中内置的预打包函数。这种方法叫做数学。您需要考虑bézier曲线、斜接设置、线帽、线连接和虚线阵列。正如@inhan所指出的，您可能会使用各种函数来帮助您或近似它，但它们都不会为您计算。这是可能的，但无论如何都不容易…用JavaScript

[W] 有没有办法在屏幕上复制svg图像并将其移动到Illustrator

当然，那很容易

在web浏览器中打开基于D3.js SVG的插图

打开开发者工具（或Firebug）

找到所需的元素，右键单击并选择“复制为HTML”或“复制SVG”

将代码粘贴到文本编辑器中，并用SVG将其包装

在Illustrator中打开SVG

列出所需的路径

另存为SVG

将导出的SVG代码Illustrator复制/粘贴到…任意位置

但是这对你有什么好处呢？当然，D3.js可视化没有任何效果

但是如果你能做到这一点，你会丢失所有作为属性存储的相关元数据吗

你在说什么？如果您谈论的是源代码中的属性，那么只有在不将属性复制/粘贴到结果上时，才会丢失它。如果您谈论的是绑定到web浏览器中运行的可视化的JavaScript数据，当然，如果您往返于Adobe Illustrator，您将丢失数据

---

你的问题对我来说毫无意义，以至于我觉得我一定错过了你的需求/目标。您真正想要完成的是什么？

…不过您还需要考虑笔划线帽和线连接选项，并实现适当的斜接限制算法。你基本上说的是“是的，有一些功能可以帮助你做到这一点。”是的，我跳过了那些道具。我想Alex可以自己创建一个函数，然后再问一次公式本身是否有问题。还是我自己写整个函数？我喜欢读你的回复！FWIW，当我说属性时，我指的是类，id，数据，你们有什么-，你们说得对。我真正感兴趣的是创建一个SVG路径，其中包含多个笔划、一个颜色笔划和鼠标上方的第二个笔划。我在SVG规范中找不到任何信息，所以我开始考虑将笔划路径转换为形状，以便应用第二个笔划。