在来自 `<image>` 或 `<use>` 元素的 SVG 文件中应用转换转换

Question

所以基本上我想转换这个：

transform="翻译(...)"

到 x/y 坐标。在

<image>

元素

---

附加信息：

与这个问题类似但更具体： 移除 SVG 文件中的变换

我的问题专门针对

<image>

元素。

我有一个像这样的 svg 元素：

<image width="42" height="55" id="Piz_Buin" xlink:href="assets/svgs/pin.svg"  
    transform="transalte(1.0909,269.65)">
</image>

我希望输出是这样的：

<image width="42" height="55" id="Piz_Buin" xlink:href="assets/svgs/pin.svg"  x="1.0909" y="269.65">
</image>

所以基本上我想转换这个： 转换=“矩阵（1.0909 0 0 1.0909 32.8309 269.65）” 到 x/y 坐标。在一个元素上

我如何做到这一点？

我尝试过但没有奏效的事情：

• 使用 Inkscape 移动元素 -> 导出为转换
• 使用 Inkscape“Apply Transforms”插件 -> 不支持

  <image>

  元素
• 使用 Adobe Illustrator 移动元素 -> 导出为转换
• 使用 Affinity Designer -> 甚至不支持从 svgs

   创建

  <image>
元素
• 尝试使用

  <use>

  元素代替，但问题与上述相同

我看过 svggo github 项目，它有 convertTransform 命令，但在阅读 API 后，似乎这个命令根本没有帮助。

Answer 1

想了想，这其实是一件很容易的事情，是我想多了。您可以在 IntelliJ Idea 中完成它。

在 IntelliJ 的正则表达式替换中，您可以按照以下步骤操作：

打开“查找和替换”对话框（Ctrl + R 或 Cmd + R）。

确保启用“正则表达式”选项（图标应为蓝色）。

在“查找”字段中输入以下正则表达式模式：

transform=translate\(([^,]+),\s*([^)]+)\)

在“替换”字段中输入以下替换字符串：

x="$1" y="$2"

单击“全部替换”或根据需要使用其他替换选项。

正则表达式模式使用捕获组

([^,]+)

和

([^)]+)

捕获 translate() 函数内的 X 和 Y 值，它们将分别匹配除逗号和右括号之外的任何字符。替换字符串使用

$1

和

$2

引用这些捕获的值，并将它们格式化为 x="

<x>

" y="

<y>

".

这是截图：

请注意，图像示例不适用于

<image>

，而是应用于路径。我只是展示给你看视觉控制。但它应该在

<image>

元素上完成。