主页 / 问题 / 801079
Accepted
Дмитрий Полянин
Asked:2020-03-19 01:04:29 +0000 UTC2020-03-19 01:04:29 +0000 UTC

如何将现有的 SVG 形状转换为不同的坐标

  • 772

我有一个从 SVG 编辑器获得的 SVG 形状。

如何将其转换为所需尺寸原点的坐标？

现在，为了将其放置在某处，您必须添加 to path transform="scale(...) translate(...)"，并且您必须手动选择移位和缩放值。总的来说，scale translate毕竟其他尺寸开始起作用。

如何正常使用这些形状并将它们放置在画布上？

我想要什么：一些实用程序或功能，将坐标和大小path-a 重新制作为原点和所需的大小。

<svg style="width:400px; height:400px; background-color:pink">
  <path d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

滚动浏览下面的示例以查看该图。

我需要像这样将这个形状放在画布上：

在此处输入图像描述

如何正确完成？

svg

5 个回答

  1. 定位调整——现有贴片

    • 将 svg 文件加载到矢量编辑器中：

    在此处输入图像描述

    显然，在编辑器的设置中，文档大小是100х100px图片中心的黑色方块，并且图像是在文档边距下方创建的。

    • 我们扩大了文档的大小——400x400px为了使绘图在\u200b\u200bdocument的区域内。

    为此，设置viewport width="400"和height="400" viewBox="0 0 400 400" 红框是 svg 文档的边框，为清晰起见在 svg 文件的标题中设置style="border:1px solid red;" 

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" style="border:1px solid red;">
  <path d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

    • 为了清楚起见，我们将相同的文件加载到矢量编辑器中

    在此处输入图像描述

    • 我们看到图形已经落入了文档动作的区域，400x400px必须抬起它196px才能将它移动到坐标原点（留出4px，这样图形的线条就不会从上面截断）到提高它min-y，改变参数 viewBox

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 196 400 400"> 

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 196 400 400">
  <path d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

    • 再次检查矢量编辑器

    在此处输入图像描述

    我们看到 shape 定位到了应该的位置，但是 svg 文档太大了，所以我们需要减小它的大小

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="200" viewBox="0 196 100 200">
  <path d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

    当 svg 图像复杂、陌生且最初无法正确重绘时，需要进行此类调整操作。

    怎么做才对？

    假设您需要绘制带有尺寸的徽标100x100px

    为此，您可以在矢量编辑器中设置所需的文档大小，或者编写一个简短的模板文件并将其加载到矢量编辑器中。 

    <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" style="border:1px solid red;">
</svg>

    在此处输入图像描述

    • 我们在矢量编辑器中严格地在文档的边界内绘制

    在此处输入图像描述

    • 保存文件并在浏览器中查看

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
  <metadata id="metadata8"/>
  <defs id="defs6"/>
  <path id="path4177" d="m59 59c-4 5-13 5-18 1-6-5-6-15-1-21 6-7 18-7 25-1 8 7 8 21 1 29-9 10-24 10-34 1C21 58 21 40 31 29 43 16 63 16 76 28 91 42 91 65 78 80 62 97 35 97 18 82-1 64-1 33 16 14 20 10 23 7 27 5" style="fill-rule:evenodd;fill:#008000;stroke:#000"/>
</svg>

    • 10

  2. 前几天我发现了一个有趣的工具（链接）。在这种情况下，您只需要插入一个元素，path然后选择类型 - absolute：

    <svg style="width:400px; height:400px; background-color:pink">
  <path d="M53 99C53 99 52 99 52 99 52 99 52 96 52 92 52 86 52 82 53 80 53 79 54 79 55 79 56 79 57 80 58 81 58 82 58 86 58 90 58 92 58 94 58 95 58 97 57 98 56 99 55 100 55 100 53 99zM29 94C28 94 28 93 28 93 28 92 29 89 32 83 34 80 34 78 35 77 37 75 37 75 39 77 40 78 40 78 40 79 40 81 39 84 37 87 35 90 34 91 34 92 34 93 33 94 32 95 31 96 31 96 29 95zM75 92C72 89 66 79 66 77 66 76 67 75 67 74 67 74 68 74 69 73 71 73 71 73 71 73 73 74 76 80 79 87L80 90 79 91C78 92 76 93 76 93 76 93 75 92 74 92zM9 76C8 76 8 74 8 73 8 72 15 67 18 66 20 65 21 65 22 65 23 65 23 66 23 67 23 68 23 69 23 69 23 70 20 71 17 73 16 73 15 74 14 75 12 76 10 76 9 76zM95 74C94 74 93 74 89 71 87 70 85 69 83 68 81 67 80 66 79 65 78 64 77 63 77 62 77 61 77 60 79 60 80 60 83 60 85 61 87 62 94 67 96 68 97 69 98 70 97 72 96 74 96 74 94 73zM38 72C36 72 33 71 32 70 29 68 27 65 25 62 22 57 21 48 23 43 25 36 32 28 38 24 40 23 43 22 44 22 45 22 45 22 45 23 46 24 46 27 45 28 45 29 44 30 41 33 34 39 33 42 32 47 32 49 31 51 31 52 31 54 32 58 34 60 39 67 47 68 58 62 61 60 63 58 67 52L69 49 69 46C69 43 69 42 68 41 67 39 65 38 63 37 62 36 61 36 59 36 57 36 56 36 54 37 51 38 48 40 47 43 47 44 46 44 47 46 47 48 48 50 49 51 50 52 50 52 51 52 52 52 52 52 52 52 52 52 52 51 51 51 49 49 49 47 50 45 51 44 54 42 55 42 57 42 58 43 60 45 62 48 63 50 61 54 60 57 56 60 53 61 51 62 47 61 45 61 44 61 43 60 43 60 42 60 40 55 40 53 39 49 40 43 42 40 44 38 47 35 51 33 55 31 56 30 60 30 64 30 66 31 69 33 74 37 76 42 76 49 76 53 76 57 75 59 74 61 73 63 69 66 63 71 57 73 48 75 45 75 40 75 37 75zM5 50C1 50 1 49 0 48 -1 47 -1 46 0 46 1 44 4 44 12 44 18 44 18 44 19 45 20 45 20 46 21 47 22 49 22 49 19 50 16 51 11 52 5 51zM85 50C84 49 84 49 84 48 84 46 85 45 90 44 91 44 93 43 94 43 95 43 97 42 100 42 104 42 104 42 105 42 106 43 106 44 106 45 105 46 105 47 101 48 96 49 92 50 89 50 86 50 86 50 85 50zM19 32C10 27 5 24 5 22 5 21 5 20 6 19 7 19 7 19 9 19 11 20 16 22 18 23 19 24 21 25 22 26 25 28 25 29 24 31 23 32 22 33 21 33 21 33 20 32 18 32zM76 30C75 30 74 28 74 28 74 27 74 27 76 25 79 22 82 20 84 18 85 17 86 17 87 17 89 17 91 19 90 21 89 22 87 24 85 26 80 29 78 30 77 30zM31 20C29 18 27 15 26 11 25 8 25 8 25 6 25 3 25 2 27 2 28 2 29 3 29 3 29 3 30 5 32 8 35 13 36 15 36 18 36 20 36 20 34 21 33 21 33 21 32 20zM57 20C56 19 55 18 55 17 55 16 56 7 56 5 57 2 58 0 60 -1 61 -1 62 -1 62 1 63 3 63 8 60 19 60 19 59 20 59 20 57 21 58 21 57 20z" id="path826" style="fill:green;"/>
</svg>

    由德米特里添加

    要确定转移多少，请使用函数getBBox()。

    从中您可以轻松找到转移的坐标。

    var bbox = document.getElementById("id1").getBBox();

console.log(bbox);
    <svg style="width:400px; height:400px; background-color:pink">
  <path id="id1" d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

    • 9
  3. Best Answer

    在编辑器中打开（西班牙语：Inkscape）>选择形状>编辑>使页面适合选择（Shift+ Ctrl+ R）>保存>从文件中删除正确的文件path或将新文件制作成神圣的形式。

    <svg style="width:400px; height:400px; background-color:pink">
 <path
     d="m 53.75,100 c 0,0 -1,0 -1,0 0,0 0,-3 0,-7 0,-6 0,-10 1,-12 0,-1 1,-1 2,-1 1,0 2,1 3,2 0,1 0,5 0,9 0,2 0,4 0,5 0,2 -1,3 -2,4 -1,1 -1,1 -3,0 z m -24,-5 c -1,0 -1,-1 -1,-1 0,-1 1,-4 4,-10 2,-3 2,-5 3,-6 2,-2 2,-2 4,0 1,1 1,1 1,2 0,2 -1,5 -3,8 -2,3 -3,4 -3,5 0,1 -1,2 -2,3 -1,1 -1,1 -3,0 z m 46,-3 c -3,-3 -9,-13 -9,-15 0,-1 1,-2 1,-3 0,0 1,0 2,-1 2,0 2,0 2,0 2,1 5,7 8,14 l 1,3 -1,1 c -1,1 -3,2 -3,2 0,0 -1,-1 -2,-1 z m -65,-16 c -1,0 -1,-2 -1,-3 0,-1 7,-6 10,-7 2,-1 3,-1 4,-1 1,0 1,1 1,2 0,1 0,2 0,2 0,1 -3,2 -6,4 -1,0 -2,1 -3,2 -2,1 -4,1 -5,1 z m 86,-2 c -1,0 -2,0 -6,-3 -2,-1 -4,-2 -6,-3 -2,-1 -3,-2 -4,-3 -1,-1 -2,-2 -2,-3 0,-1 0,-2 2,-2 1,0 4,0 6,1 2,1 9,6 11,7 1,1 2,2 1,4 -1,2 -1,2 -3,1 z m -56,-1 c -2,0 -5,-1 -6,-2 -3,-2 -5,-5 -7,-8 -3,-5 -4,-14 -2,-19 2,-7 9,-15 15,-19 2,-1 5,-2 6,-2 1,0 1,0 1,1 1,1 1,4 0,5 0,1 -1,2 -4,5 -7,6 -8,9 -9,14 0,2 -1,4 -1,5 0,2 1,6 3,8 5,7 13,8 24,2 3,-2 5,-4 9,-10 l 2,-3 v -3 c 0,-3 0,-4 -1,-5 -1,-2 -3,-3 -5,-4 -1,-1 -2,-1 -4,-1 -2,0 -3,0 -5,1 -3,1 -6,3 -7,6 0,1 -1,1 0,3 0,2 1,4 2,5 1,1 1,1 2,1 1,0 1,0 1,0 0,0 0,-1 -1,-1 -2,-2 -2,-4 -1,-6 1,-1 4,-3 5,-3 2,0 3,1 5,3 2,3 3,5 1,9 -1,3 -5,6 -8,7 -2,1 -6,0 -8,0 -1,0 -2,-1 -2,-1 -1,0 -3,-5 -3,-7 -1,-4 0,-10 2,-13 2,-2 5,-5 9,-7 4,-2 5,-3 9,-3 4,0 6,1 9,3 5,4 7,9 7,16 0,4 0,8 -1,10 -1,2 -2,4 -6,7 -6,5 -12,7 -21,9 -3,0 -8,0 -11,0 z m -35,-22 c -4,0 -4,-1 -5,-2 -1,-1 -1,-2 0,-2 1,-2 4,-2 12,-2 6,0 6,0 7,1 1,0 1,1 2,2 1,2 1,2 -2,3 -3,1 -8,2 -14,1 z m 80,-1 c -1,-1 -1,-1 -1,-2 0,-2 1,-3 6,-4 1,0 3,-1 4,-1 1,0 3,-1 6,-1 4,0 4,0 5,0 1,1 1,2 1,3 -1,1 -1,2 -5,3 -5,1 -9,2 -12,2 -3,0 -3,0 -4,0 z m -66,-17 c -9,-5 -14,-8 -14,-10 0,-1 0,-2 1,-3 1,0 1,0 3,0 2,1 7,3 9,4 1,1 3,2 4,3 3,2 3,3 2,5 -1,1 -2,2 -3,2 0,0 -1,-1 -3,-1 z m 58,-2 c -1,0 -2,-2 -2,-2 0,-1 0,-1 2,-3 3,-3 6,-5 8,-7 1,-1 2,-1 3,-1 2,0 4,2 3,4 -1,1 -3,3 -5,5 -5,3 -7,4 -8,4 z m -46,-10 c -2,-2 -4,-5 -5,-9 -1,-3 -1,-3 -1,-5 0,-3 0,-4 2,-4 1,0 2,1 2,1 0,0 1,2 3,5 3,5 4,7 4,10 0,2 0,2 -2,3 -1,0 -1,0 -2,-1 z m 25,0 c -1,-1 -2,-2 -2,-3 0,-1 1,-10 1,-12 1,-3 2,-5 4,-6 1,0 2,0 2,2 1,2 1,7 -2,18 0,0 -1,1 -1,1 -2,1 -1,1 -2,0 z" id="path826" style="fill:#008000" />
</svg>

    • 8

  4. 无需在编辑器中编辑 svg 即可剪辑 svg 渲染区域。为此，有一个 all 支持的属性viewBox。SVG 是直接从您的问题中复制的，但添加了该属性：

    <svg style="width:400px; height:400px; background-color:pink" viewBox="-2 199 110 98">
  <path d="m53 297c0 0-1 0-1 0 0 0 0-3 0-7 0-6 0-10 1-12 0-1 1-1 2-1 1 0 2 1 3 2 0 1 0 5 0 9 0 2 0 4 0 5 0 2-1 3-2 4-1 1-1 1-3 0zm-24-5c-1 0-1-1-1-1 0-1 1-4 4-10 2-3 2-5 3-6 2-2 2-2 4 0 1 1 1 1 1 2 0 2-1 5-3 8-2 3-3 4-3 5 0 1-1 2-2 3-1 1-1 1-3 0zm46-3c-3-3-9-13-9-15 0-1 1-2 1-3 0 0 1 0 2-1 2 0 2 0 2 0 2 1 5 7 8 14l1 3-1 1c-1 1-3 2-3 2 0 0-1-1-2-1zm-65-16c-1 0-1-2-1-3 0-1 7-6 10-7 2-1 3-1 4-1 1 0 1 1 1 2 0 1 0 2 0 2 0 1-3 2-6 4-1 0-2 1-3 2-2 1-4 1-5 1zm86-2c-1 0-2 0-6-3-2-1-4-2-6-3-2-1-3-2-4-3-1-1-2-2-2-3 0-1 0-2 2-2 1 0 4 0 6 1 2 1 9 6 11 7 1 1 2 2 1 4-1 2-1 2-3 1zm-56-1c-2 0-5-1-6-2-3-2-5-5-7-8-3-5-4-14-2-19 2-7 9-15 15-19 2-1 5-2 6-2 1 0 1 0 1 1 1 1 1 4 0 5 0 1-1 2-4 5-7 6-8 9-9 14 0 2-1 4-1 5 0 2 1 6 3 8 5 7 13 8 24 2 3-2 5-4 9-10l2-3 0-3c0-3 0-4-1-5-1-2-3-3-5-4-1-1-2-1-4-1-2 0-3 0-5 1-3 1-6 3-7 6 0 1-1 1 0 3 0 2 1 4 2 5 1 1 1 1 2 1 1 0 1 0 1 0 0 0 0-1-1-1-2-2-2-4-1-6 1-1 4-3 5-3 2 0 3 1 5 3 2 3 3 5 1 9-1 3-5 6-8 7-2 1-6 0-8 0-1 0-2-1-2-1-1 0-3-5-3-7-1-4 0-10 2-13 2-2 5-5 9-7 4-2 5-3 9-3 4 0 6 1 9 3 5 4 7 9 7 16 0 4 0 8-1 10-1 2-2 4-6 7-6 5-12 7-21 9-3 0-8 0-11 0zM5 248c-4 0-4-1-5-2-1-1-1-2 0-2 1-2 4-2 12-2 6 0 6 0 7 1 1 0 1 1 2 2 1 2 1 2-2 3-3 1-8 2-14 1zm80-1c-1-1-1-1-1-2 0-2 1-3 6-4 1 0 3-1 4-1 1 0 3-1 6-1 4 0 4 0 5 0 1 1 1 2 1 3-1 1-1 2-5 3-5 1-9 2-12 2-3 0-3 0-4 0zM19 230c-9-5-14-8-14-10 0-1 0-2 1-3 1 0 1 0 3 0 2 1 7 3 9 4 1 1 3 2 4 3 3 2 3 3 2 5-1 1-2 2-3 2 0 0-1-1-3-1zm58-2c-1 0-2-2-2-2 0-1 0-1 2-3 3-3 6-5 8-7 1-1 2-1 3-1 2 0 4 2 3 4-1 1-3 3-5 5-5 3-7 4-8 4zm-46-10c-2-2-4-5-5-9-1-3-1-3-1-5 0-3 0-4 2-4 1 0 2 1 2 1 0 0 1 2 3 5 3 5 4 7 4 10 0 2 0 2-2 3-1 0-1 0-2-1zm25 0c-1-1-2-2-2-3 0-1 1-10 1-12 1-3 2-5 4-6 1 0 2 0 2 2 1 2 1 7-2 18 0 0-1 1-1 1-2 1-1 1-2 0z" id="path826" style="fill:green;"/>
</svg>

    • 1

  5. 我找到的最简单的解决方案是使用Inkscape.

    已经有一个类似的答案，但我正在添加带有图片的说明。

    1. 用鼠标选择要放置在坐标原点的对象。

    在此处输入图像描述

    1. 我们做Resize to page selection。

    在此处输入图像描述

    1. 我们在原点处获取图像，在图像大小处获取画布。

    在此处输入图像描述

    • 0

相关问题