如何在 Markdown 文件中修剪 svg 图像

Question

我有一个由 Google 绘图制作的 svg 文件。 （png版本如下图

svg 代码如下

<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/><path fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/><path stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/></g></svg>

我的目的是将这个svg 图像插入到降价文件my_work.md 中。如您所见，图像中有很多空白，我想将它们修剪掉，只显示有用的部分。在此示例中，有用的部分只是灰色圆圈。

我有一些一般的想法，但不知道如何实现它们。

• 直接法：使用一些markdown技巧来修剪它。
• 间接方法：在 Python 中加载此图像并使用一些 Python 库对其进行修剪，导出修剪后的 svg-image 并在 md-file 中使用。
• 间接方法：在 Google 绘图中修剪。

你能告诉我怎么做吗？欢迎任何方法。我只需要显示图像的有用部分。请注意，我有很多 svg 文件，有用的部分可能不在图像的中心。

Answer 1

在您的示例中，我添加了ids 以便能够谈论您的路径。

路径 a 和 b 是相同的，它们是覆盖整个 svg 画布的大矩形。路径 a 不可见，因为它位于 clipPath 内部，而路径 b 是透明的：fill-opacity="0.0"

另外，路径c 和路径d 是相同的。您可以删除其中之一并将笔触和填充添加到同一路径。或者，您将路径 c 放在 <defs> 中并使用它两次：一次用于填充，一次用于描边，如果这是您需要的。

<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<clipPath id="p.0">
<path id="a" d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"/></clipPath>

<g clip-path="url(#p.0)">

<path id="b" fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"/>

<path  id="c" fill="#999999" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>

<path  id="d" stroke="#000000" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>

</g>

</svg>

为了去除空白你可以删除路径b，获取路径c的大小并将其用于viewBox属性：在本例中为viewBox="391 240 139 139"

<svg version="1.1" viewBox="391 240 139 139" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  
  <path fill="#999999" stroke="black" d="m393.1811 309.8189l0 0c0 -37.33795 30.268372 -67.60631 67.60632 -67.60631l0 0c17.930298 0 35.12622 7.1227875 47.80487 19.801437c12.67865 12.678619 19.801392 29.874542 19.801392 47.80487l0 0c0 37.33792 -30.268341 67.60629 -67.60626 67.60629l0 0c-37.33795 0 -67.60632 -30.268372 -67.60632 -67.60629z" fill-rule="evenodd"/>
  
  
</svg>