Как залить фон в SVG вокруг объекта?

#svg

Как залить фон в SVG вокруг объекта так, чтобы фон внутри объекта - остался прозрачным?
примерно так, только без скругления углов. Спасибо! https://www.iconfinder.com/icons/246717/bookmark_favorite_square_star_icon#size=256

 
    

Ответы

Ответ 1

Берём рядом бесплатную звезду (хотя я бы сам сделал):








и чистим:



body { margin: 0; background: linear-gradient(to bottom, red, blue); }
svg { display: block; height: 100vmin; width: 100vmin; margin: auto; }





и ещё чистим:



console.log(
"M694.98491,281.136378 L688.186537,286 L690.536373,277.987539 L684,272.561762 L691.949829,272.493347
L694.98491,264 L697.936034,272.561768 L706,272.561768 L699.433447,278.040327 L701.783283,286
L694.98491,281.136378 L694.98491,281.136378 Z"
.replace(/(\d+\.?\d*),(\d+\.?\d*)/g, (m,x,y)=>`${(x-683).toFixed(3)},${(y-263).toFixed(3)}`)
)






body { margin: 0; background: linear-gradient(to bottom, red, blue); }
svg { display: block; height: 100vmin; width: 100vmin; margin: auto; }





Теперь добавляем прямоугольник M0,0H24V24H-24Z:

При этом надо обратить внимание, что выставлен fill-rule="evenodd".



body { margin: 0; background: linear-gradient(to bottom, red, blue); }
svg { display: block; height: 100vmin; width: 100vmin; margin: auto; }





Готово!


Ответ 2

Если работать в Incscape можно создать квадрат с закруглёнными краями, а на него
наложить звезду 



а дальше в меню Контур, предварительно выбрав оба объекта Shift-ом, нажать Разность.

Должно получиться именно то, что вы хотите!


Ответ 3

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



body {
  animation: bg 5s forwards;
}

@keyframes bg {
  from {
    background-color: #fff;
  }
  to {
    background-color: #ccc;
  }
}