Как обрезать контент, находящийся вне viewBox?

Question

Есть ли функция или способ обрезать путь, который находится за пределами окна просмотра, а не просто скрыть его?

Я использую svg-edit, который имеет viewbox, область холста. Все нарисованное вне этого холста скрыто. Однако, когда выходные данные редактора собираются и вставляются в графический редактор, такой как Inkscape, появляется весь чертеж. Я хочу, чтобы рисунок, находящийся вне области просмотра, полностью вырезался из вывода редактора. Так, например, если у меня есть круг, который наполовину находится за пределами холста, то результат работы редактора будет полукругом, а не весь круг, а только половина скрытого.

Я хочу изменить геометрию самого предметного пути, а не просто скрыть его от глаз.

Я делаю модификацию svg-edit: http://code.google.com/p/svg-edit/

Answer 1

Один из способов сделать это - применить clip-path в корневой элемент SVG.

Если вы хотите, это может быть простая прямоугольная область или другая более сложная форма, как в примере ниже:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"     
     viewBox="-100 -100 300 300"
     clip-path="url(#clip)">
  <defs>
    <clipPath id="clip">
      <rect width="100" height="100" rx="10"/>
      <path d="M40 99l10 11 10 -11z"/> 
    </clipPath>
  </defs>

  <rect id="background" width="120" height="120" fill="slateblue"/>
  <image xlink:href="images/man.png" width="100" height="110" 
         preserveAspectRatio="xMidYMax meet"/>
</svg>

Посмотреть это онлайн здесь.

В вашем случае вы, вероятно, хотели бы только один <rect> внутри <clipPath> элемент, который имел те же размеры, что и viewBox.