How to clip away content that is outside the viewBox?

Question

Is there a function or a way to clip a path that is outside the viewbox instead of just hiding it?

I am using svg-edit which has a viewbox, a canvas area. Everything drawn outside that canvas is hidden. However when the output of the editor is collected and pasted into a graphics editor such as Inkscape, the whole drawing appears. I want the drawing that are outside the viewbox clipped entirely from the editor's output. So for example if i have a circle that is half outside the canvas, then the output of the editor would be half a circle and not the whole circle just half of it hidden.

I want to alter the geometry of the subject path itself not just hide it from view.

I am doing a modification of svg-edit: http://code.google.com/p/svg-edit/

Answer 1

One way to do this is to apply a clip-path to the root svg element.

If you want it can be a simple rectangular region, or another more complex shape, as in the example below:

<?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>

View it online here.

In your case you would probably want just one <rect> inside the <clipPath> element that had the same dimensions as the viewBox.