Как отключить контент, который находится вне viewBox?

Question

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

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

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

Я делаю изменение SVG-редактирование: 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> 

Посмотреть его онлайн here.

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