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: /

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./p/svg-edit/

• javascript
• html
• svg
• jquery-svg
• svg-edit

• Please tag your questions related to svg-edit with the tag svg-edit. – Erik Dahlström Commented Feb 25, 2013 at 13:32
• The question is not clear enough for me to answer. What are the constraints, what is your expected result? What have you tried? – Erik Dahlström Commented Feb 25, 2013 at 19:06
• 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. – nicholaswmin Commented Feb 25, 2013 at 19:09
• see also SVG viewbox overflow: hidden / crop – milahu Commented May 6, 2024 at 8:15

1 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 plex shape, as in the example below:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3/2000/svg" 
     xmlns:xlink="http://www.w3/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.