5

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/

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • Please tag your questions related to svg-edit with the tag `svg-edit`. – Erik Dahlström Feb 25 '13 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 Feb 25 '13 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 Feb 25 '13 at 19:09

1 Answers1

4

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 1
    Clip paths doesnt alter the geometry of the shape itself. My apologies if the answer was not clear enough but that is what i needed. I edited it to reflect my true intentions. – nicholaswmin Apr 22 '13 at 04:15
  • Not everything in svg is geometry (filters for example), so even if you did do geometry clipping that doesn't guarantee that the content stays inside the viewBox. – Erik Dahlström Apr 22 '13 at 05:14
  • The link provided only shows a large beige screen (on FF 75) – Ideogram Apr 11 '20 at 07:37