<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>
3 ответа
Обтравка ни чего не вырезает потому что за пределами круга:
Равно как и здесь: 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>
Функцию 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>
Уберите символ #
:
<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>
-
1символ` #` нельзя убирать. В вашем ответе без него
clip-path
не работает. Просто выводится зелёный круг. Для проверки этого, уберите совсемclip-path="url(myclipPath)"
результат будет тот же. Опять просто зелёный круг 21 фев 2020 в 9:05