使用javascript将描边路径转换为形状

Question

有没有办法使用javascript将描边路径转换为形状？是否有任何图书馆将其作为内置功能提供？

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

Answer 1

  

[我有一种方法可以使用JavaScript将描边路径转换为形状吗？

是的，有一种方法可以将SVG路径笔划转换为轮廓形状。不幸的是，它不是SVG中内置的预打包功能。这样做的方法叫做Math。您需要考虑贝塞尔曲线，斜接设置，线路盖，线路连接和dasharray。正如@inhan所指出的，你可能会使用各种函数来帮助你或近似它，但它们都不会为你做数学计算。这是可能的，但在JavaScript中它绝不是 easy ...。

  

[W]是否有办法在屏幕上复制svg图像并将其移至Illustrator？

当然，这很容易。

1. 在网络浏览器中打开基于SV的D3.js插图。
2. 打开开发人员工具（或Firebug）。
3. 找到所需的元素，右键单击并选择“复制为HTML”或“复制SVG”。
4. 将代码粘贴到文本编辑器中并用SVG包装。
5. 在Illustrator中打开SVG。
6. 概述您想要的路径。
7. 另存为SVG
8. 将SVG代码Illustrator复制/粘贴到任何您想要的地方。

但是这会让你获得什么？当然没有任何东西可以用于你的D3.js可视化。

  

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

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

你的问题对我来说没什么意义，我觉得我必须错过你的需求/目标。你真正试图完成什么？

Answer 2

在Raphaël中使用Element.getTotalLength()和Element.getSubpath()函数以及函数中该路径的 stoke-width 和 stroke-dasharray 属性可能给出结果。