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

【问题标题】：Converting stroked path to shape with javascript使用javascript将描边路径转换为形状
【发布时间】：2012-05-22 01:53:46
【问题描述】：

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

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

【问题讨论】：

标签： javascript raphael d3.js

【解决方案1】：

[我]有没有办法使用 JavaScript 将描边路径转换为形状？

是的，有一种方法可以将 SVG 路径笔划转换为轮廓形状。不幸的是，它不是 SVG 中内置的预打包函数。这样做的方法称为数学。您需要考虑贝塞尔曲线、斜接设置、linecaps、linejoins 和 dasharrays。正如@inhan 指出的那样，您可能会使用各种函数来帮助您或近似它，但它们都不会为您做数学计算。这是可能的，但无论如何简单...在 JavaScript 中。

[W]有没有办法将屏幕上的 svg 图片复制到 Illustrator 中？

当然，这很容易。

在网络浏览器中打开基于 D3.js SVG 的插图。
打开开发者工具（或 Firebug）。
找到所需的元素，右键单击并选择“复制为 HTML”或“复制 SVG”。
将代码粘贴到文本编辑器中并使用 SVG 进行包装。
在 Illustrator 中打开 SVG。
勾勒出您想要的路径。
另存为 SVG
将 Illustrator 导出的 SVG 代码复制/粘贴到...任意位置。

但这对你有什么好处？当然，没有任何东西适用于您的 D3.js 可视化。

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

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

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

【讨论】：

我很喜欢阅读您的回复！ FWIW，当我说属性时，我的意思是类、id、数据，你有什么——所以你说得对。我真的只是对创建一个具有多个笔划、一个颜色笔划和鼠标悬停第二个笔划的 SVG 路径感兴趣。我在 SVG 规范中找不到任何信息，所以我开始考虑将描边路径转换为形状，以便可以应用第二个描边。

【解决方案2】：

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

【讨论】：

……尽管您还需要考虑笔划线帽和线连接选项，并实施适当的斜接限制算法。您基本上说的是“是的，存在一些可以帮助解决此问题的功能。”
是的，我跳过了那些道具。我认为亚历克斯可以自己创建一个函数，并且可能会再次询问公式本身是否没有按预期工作。还是我自己写整个函数？