search

Home  >  Q&A  >  body text

Why can't the "<line>" element be made a child element of "<clipPath>"?

Working example with <circle>

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

Same but using <line> - does not work

<svg viewBox="-20 -20 150 150" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <line x1="0" y1="0" x2="1" y2="1" />
  </clipPath>
  <rect x="0" width="100" height="100" rx="15" clip-path="url(#myClip)" />
</svg>

I expected to see part of the square, but nothing is shown

It seems that cannot be used in

P粉295616170P粉295616170436 days ago718

reply all(1)I'll reply

  • P粉427877676

    P粉4278776762023-09-17 09:49:11

    An alternative to

    clippath could be <mask>. The advantage is that any SVG element can be used for "drawing".

    <svg height="80vh" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <mask id="m1" maskContentUnits="objectBoundingBox">
        <line x1="0" y1="0" x2="1" y2="1" stroke="white" stroke-width=".5" />
      </mask>
      <rect width="100" height="100" rx="15" mask="url(#m1)" />
    </svg>

    reply
    0
  • Cancelreply