0

我有一个 svg 文件，由 Google 绘图制作。（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 中使用它。
  • 间接方法：在谷歌绘图中修剪它。

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

4

1 回答 1

1

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

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

路径c和路径d也是相同的。您可以删除其中之一并将笔触和填充添加到同一路径。或者，您将路径c放在 a 中<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>

于 2018-12-25T10:44:52.260 回答