How can I cut one shape inside another?

by

You must use path element to cut a hole.

See the example from the SVG specification: (you can click this link or the following image to view the real svg file)

svg hole example

<g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3">
    <path d="M 250,75 L 323,301 131,161 369,161 177,301 z"/>

    <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
             M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z"/>

    <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
             M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z"/>
</g>

For your case:

<path d="M10 10h50v50h-50z M23 35a14 10 0 1 1 0 0.0001 z"
    stroke="blue" stroke-width="2" fill="red" fill-rule="evenodd" />

M10 10h50v50h-50z will draw a rect.

M25 35a10 10 0 1 1 0 0.0001 z will draw a ellipse.

fill-rule="evenodd" will make the hole.

The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).

  • Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
  • Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
  • Concat the path datas of outer shape and inner shapes(holes).

You can cut more holes by concat more hole path data.

This image explain how to cut a hole:

This image explain how to cut a hole

See w3c docs:
SVG Arc Commands
and
SVG fill-rule Property.

More Related Contents:

  1. svg text wrapping issues
  2. Circle drawing with SVG’s arc path
  3. Can you control how an SVG’s stroke-width is drawn?
  4. How to convert a PNG image to a SVG? [closed]
  5. Removing transforms in SVG files
  6. How to use the viewBox attribute?
  7. Remove the host HTML element selectors created by angular component
  8. How many levels of recursion does SVG support?
  9. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  10. semantic zooming of the force directed graph in d3
  11. Catmull-Rom interpolation on SVG Paths
  12. Default background color of SVG root element
  13. How to convert/save d3.js graph to pdf/jpeg
  14. Scale and mirror SVG object
  15. How to convert a SVG to a PNG with ImageMagick?
  16. SVG shadow cut off
  17. Crop to fit an svg pattern
  18. How to place multiple evenly-spaced arrowheads along an SVG line?
  19. SVG Positioning
  20. Do SVG docs support custom data- attributes?
  21. SVG angular gradient
  22. Avoiding lines between adjecent svg rectangles
  23. Can I apply a gradient along an SVG path?
  24. Adding feDropShadow to a vertical line in SVG makes it disappear
  25. SVG Image in JavaFX 2.2
  26. Converting an svg arc to lines
  27. Pure SVG way to fit text to a box
  28. SVG images blocked by gmail proxy
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

Leave a Comment