Warum kann das „<line>'-Element nicht zu einem untergeordneten Element von „<clipPath>' gemacht werden?-Fragen und Antworten zum chinesischen PHP-Netzwerk

Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Warum kann das „<line>'-Element nicht zu einem untergeordneten Element von „<clipPath>' gemacht werden?

P粉295616170 2023-09-16 11:00:51

742

Arbeitsbeispiel mit <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>

Das Gleiche, aber die Verwendung von <line> – funktioniert nicht

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

Ich hatte erwartet, einen Teil des Platzes zu sehen, aber es wird nichts gezeigt

scheint in 不能在 verwendet zu werden

P粉295616170

Antworte allen(1)

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

clippath的替代方案可以是<mask>。优点是可以使用任何SVG元素进行“绘制”。

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