1

我正在创建一个迷你 SVG 编辑器，我是用纯 JavaScript 来做的，我想生成一个干净的 SVG，因此，是否有公式、模式、逻辑、算法等来获取当前的命令行值（又名绘制路径）将变换属性应用于 svg 路径时？任何文档、文章、教程等？我无法找到解释此类内容或帮助解决我遇到的问题的结果，主要是因为我不知道如何搜索该主题或该主题所指的关键字。例如：

<svg width="111" height="95" viewBox="0 0 111 95" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="my-path" transform="rotate(20)" d="M0.25 0L55 35L110.75 0V95L55 63L0.25 95V0Z" fill="#C4C4C4" />
</svg>

并且在 JavaScript 代码中有这样的东西：

const myPath = document.getElementById('my-path');
console.log(myPath.getRealValuesOfAttributeD());

// or

const getCurrentValuesOfAttributeD = (svgPathElement) => {
   // the formula, pattern, logic, algorithm, etc., goes here.
};


console.log(getCurrentValuesOfAttributeD(myPath));
4

1 回答 1

1

这是对用于旋转、平移等的变换矩阵数学的介绍 - 您需要进行计算：

正如罗伯特所说 - 数学非常复杂，很难处理像 S 命令这样的情况。您还需要将每个相对路径命令转换为绝对路径才能正确计算。

如果你这样做是因为你害怕嵌套变换混乱，那么更简单的方法可能是通过将它们的矩阵等价相乘来合并嵌套变换 - 从而为每个元素或组生成单个矩阵变换. 它仍然是一堆数学运算，但比进行这些路径计算要容易一个数量级。

于 2021-09-11T17:16:09.227 回答