Как обрезать изображение SVG в файле уценки - PullRequest
Новая
       31

Как обрезать изображение SVG в файле уценки

0 голосов
/ 25 декабря 2018

У меня есть файл SVG, созданный Google Drawings.(Версия png показана ниже

enter image description here

, а код 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. Как видите, на изображении много пустого пространства, я хочу обрезать их и показать только полезную часть. В этом примере полезная частьэто просто серый круг.

У меня есть некоторые общие идеи, но я не знаю, как их реализовать.

  • Прямой метод: используйте некоторые приемы уценки, чтобы урезать его.
  • Косвенный метод: загрузите это изображение в Python и обрежьте его с помощью некоторой библиотеки Python, экспортируйте усеченное svg-изображение и используйте его в md-файле.
  • Косвенный метод: обрежьте его в Google Drawings.

Подскажите, пожалуйста, как это сделать? Любой способ приветствуется. Мне просто нужно показать только полезную часть изображения. Обратите внимание, что у меня много svg-файлов и полезная частьможет быть не в центре изображения.

1 Ответ

0 голосов
/ 25 декабря 2018

К вашему примеру я добавил id s, чтобы иметь возможность говорить о ваших путях.

Путь 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>
...