CODEWITHSUNDEEP
svg
ZomoXYZ
ZomoXYZ

Reputation: 1852

Make a path get cut off by a circle

Is there a way to cut off a path when it is outside of a circle?

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red" />
  <path d="M0 0 L100 100" stroke-width="1px" stroke="black" />
</svg>

Is it possible to make that line stay inside the circle (and not be visible off of the circle) without changing the d="M200 175 L696 880" in the path?

Upvotes: 3

Views: 305

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You can use a clipPath to prevent things drawing outside another shape.

<svg width="100" height="100">
  <clipPath id="clip">
      <circle cx="50" cy="50" r="50" fill="red" />
  </clipPath>
  <circle cx="50" cy="50" r="50" fill="red" />
  <path d="M0 0 L100 100" stroke-width="1px" stroke="black" clip-path="url(#clip)"/>
</svg>

Upvotes: 4

Related Questions