clipPath не выполняется

Question

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" fill='red'/>
    </clipPath>
  </defs>
  <circle clip-path="url(#myclipPath)" r="100" cx="50%" cy="50%" fill="green"/>
</svg>

Answer 1

Уберите символ #:

<svg width='400' height='400' style='border: 1px solid black'>
    <defs>
        <clipPath id="myclipPath">
            <polygon points="20,30 40,10 60,30" fill='red'/>
        </clipPath>
    </defs>
    <circle clip-path="url(myclipPath)" r="100" cx="50%" cy="50%" fill="green"/>
</svg>

Answer 2

Обтравка ни чего не вырезает потому что за пределами круга:

Равно как и здесь: https://codepen.io/topicstarter/pen/KKpgLYZ я обвёл девочку по контуру её тела так и сработал clip-path и кстати обводил руками то есть ручная работа

Что бы вырезать надо полигон поставить точнее нарисовать на круге

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" fill='red'/>
    </clipPath>
  </defs>
  
  <circle  r="100" cx="50%" cy="50%" fill="green"/>
  <polygon points="20,30 40,10 60,30" fill='red'/>
</svg>

В этом примере обтравка вырезает, изменил только координаты круга

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" />
    </clipPath>
  </defs>
  
  <circle r="100" cx="0%" cy="0%" fill="green" clip-path="url(#myclipPath)"/>
</svg>

Answer 3

Функцию clipPath может выполнять маска с определенными настройками.
Это более мощный инструмент, позволяющий получить дополнительные возможности.

При окраске в белый цвет маска работает, как clipPath, обрезая всё остальное и показывая только то, что входит в polygon, прописанный в маске.

<mask id="myMask" fill="white">

В ответе ниже за основу взят код @MaximLensky

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <mask id="myMask" fill="white">
         <polygon points="20,30 40,10 60,30" />
    </mask>
  </defs>
  
  <circle r="100" cx="0%" cy="0%" fill="green" mask="url(#myMask)" />
</svg>

Если добавить в маске окраску фона, отличающуюся от белого цвета, то можно получить полупрозрачный фон вокруг треугольника:

<rect width="100%" height="100%" fill="red" />

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <mask id="myMask" > 
      <rect fill="red" widht="100%" height="100%"  />
         <polygon fill="white" points="20,30 40,10 60,30" />
    </mask>
  </defs>
  
  <circle r="100" cx="0%" cy="0%" fill="green" mask="url(#myMask)" />
</svg>

БЛОГ НА HUSL

clipPath не выполняется

Ответы (3 шт):